HTML change content using javascript,ajax,jquery

Question

I have a table in my phtml file.

<table width="700" class="detais" cellpadding="10px;">
<tr><td></td><td></td></table>

I also have a drop down, on change of this drop down it will call a javascript which is

function filterbyaptno(){
     var idno = document.getElementById("aplist").value;
      $.ajax({
        url: 'address',
        type: 'POST',                    
        data:"idno="+idno,
         success:function(result) { 
            var numRecords = parseInt(result.rows.length);
            if(numRecords>0)
            {
              for(var i = 0; i<numRecords;i++)
               {
                 var html ='<div class="support"><table><tr>      <td>'+result.row[i].firstname+'</td>                        
               +'<td>'+result.rows[i].advice+'</td>'         
               +'<td>'+result.rows[i].customdata+'</td><tr></table></div>' 
               }
           $('.detais').replaceWith(html);//am trying to change the table content
             }
         });
   }

But what happens if the result has more records it just give me only the last record. And also if i change the drop down again it never works. Can anyone help me how to do this? Is there any way in javascript to modify the content of the table based on the response of controller;

Alex K. · Accepted Answer · 2012-09-12 12:13:40Z

2

As you loop the results you:

var html = ..

which replaces whats already in the html variable.

Declare var html outside the for loop & always append (html += ...) within the loop.

You probably also want to setup the container <div class="support"><table> outside the loop also, only adding rows within.

answered Sep 12, 2012 at 12:13

Alex K.

177k32 gold badges276 silver badges299 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Indira Over a year ago

That was a nice help from you brother.I don know why the drop down results does not change if i click on one results and trying to see another result.

Alex K. Over a year ago

@Indira you replace $('.detais') with the stuff in the 1st click, so you need to make sure you add a new element with class detais to replace with on the next click, e.g. <div class="support detais"> if that's not the prob you will need to post a new question with the relevant code.

Anthony Grist · Accepted Answer · 2012-09-12 12:16:12Z

0

You're re-assigning the value of the html variable in each iteration of the for loop which means that in each iteration you're replacing the previous value with the new value, rather than concatenating the previous value and new value.

Modify your code to look like this:

if (numRecords > 0) {
    var html = '';
    for (var i = 0; i < numRecords; i++) {
        html += '<div class="support"><table><tr>      <td>' + result.row[i].firstname + '</td>' + ' < td > ' + result.rows[i].advice + ' < /td>' + '<td>' + result.rows[i].customdata + '</td > < tr > < /table></div > '
    }
    $('.detais ').replaceWith(html); //am trying to change the table content
}

answered Sep 12, 2012 at 12:16

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Collectives™ on Stack Overflow

HTML change content using javascript,ajax,jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related