I have a Ajax Json Array result made of Divs in DOM. I want to update the existing DOM data with the new Ajax Json Result. The DOM data and the Ajax data both have a id number that can be used to match. I used to have the form within the div, so it was easy to update because all I had to do was use $(this) or $(this)closest. Now I have moved the Ajax Get form to outside the Div $(this) or $(this)closest does not work.
I need a method to relate the data and then apply the data based on the id to id relationship or whatever you can recomend. Thank you. Below is where I have got to so far. The Ajax result update data below it shows the person with id:2 surname as Wright. I want to update the DIV. In a nutshell update each record with its update data. Thank you for any help.
<form class="updateform" action="" method="" >
<input type="hidden" class ="customers" name="" value="<?php echo $mycustomers; ?>">
<a class="update-button"></a>
</form>
var Ajaxresultdata = [
{id:1,name:"Mike",surname:"Rynes"},
{id:2,name:"James",surname:"Wright"},
{id:3,name:"Helen",surname:"Bills},
];
Div rows are json Array result
<div class="mycustomers">
<div id="1" class ="name">Mike </div><div>="class="surname">Rynes</div>
<div id="2">class ="name"> James</div><div>="class="surname">Bond</div>
<div id="3">class ="name"> Helen</div><div>="class="surname">Bills</div>
</div>
<script>
var Ajaxresultdata = [
{id:1,name:"Mike",surname:"Rynes"},
{id:2,name:"James",surname:"Bond"},
{id:3,name:"Helen",surname:"Bills},
];
$.each(ajaxresultdata, function( i, person ) {
if(document.getElementById(person.surname)){
$("#divid").find('.surname').html(person.surname);
}
});
</script>
Are you looking for this?
check on codepen