jQuery弹出显示旧内容而不是新内容

Question

I have a problem with jQuery pop up. I have some content load by ajax. And I want that content to be a pop up message (onclick event). On the first time whenever I click the popup link it shows correct content. And after loading content(in Ajax) first time it shows correct content, But next time whenever I click the popup link it shows old content that loaded at first time. Here is code..

<div id="company">
<div class="video-text">
<script>
function popup () {
     $( "#dialog" ).dialog({
         modal: true,
         buttons: {
         Ok: function() {
         $( this ).dialog( "close" );
         }
         }
         });
};
</script>



            <?php if (!empty($video_details)) {?>  
            <p><?php echo $video_details['companyName'];?></p>

            <span class="txt-small"><?php  
            $company_desc = $video_details['companyDesc'];
            echo substr("$company_desc", 0, 60); 
            //echo $company_desc;
            ?> 
            </span> 
             <input type="submit" onclick="popup()" value="Read more..">
<div id="dialog" title="Read more..">
<p><?php echo $company_desc;?></p>
</div>
<?php }?>
  </div>

Ajax :

var xmlhttp;
       if (window.XMLHttpRequest)
         {// code for IE7+, Firefox, Chrome, Opera, Safari
         xmlhttp=new XMLHttpRequest();
         }
       else
         {// code for IE6, IE5
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
       xmlhttp.onreadystatechange=function()
         {
         if (xmlhttp.readyState==4 && xmlhttp.status==200)
           {
           document.getElementById("company").innerHTML=xmlhttp.responseText;
           }
         }
       xmlhttp.open("POST","http://172.16.1.181:85/mydomain/home/load_company/",true);
       xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       var data = 'id='+current.id;
       xmlhttp.send(data);
       //alert(current.id);
       }

Here I post my id to the load_company controller, it render the content and load in company div .. The load the all content in company div

The <p><?php echo $company_desc;?></p> contain popup content .. Here is my firebug post

id 213

Response

<div id="company">
<div class="video-text">
<script>
function popup () {
     $( "#dialog" ).dialog({
         modal: true,
         buttons: {
         Ok: function() {
         $( this ).dialog( "close" );
         }
         }
         });
};
</script>



           <span class="txt-small">Lorem Ipsum is simply dummy text of the printing and typeset 
            </span> 
             <input type="submit" onclick="popup()" value="Read more..">
<div id="dialog" title="Read more..">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
  </div>

Thanks in advance..!!

Answer 1

Your popup(); function only shows the dialog box, you need to make this function do the ajax request as well, before showing the dialog.

Also, can I ask why you are not using jQuery for AJAX , seeing as you already seem to be using the library?

Something like:

function popup () {
    $.post( "test.php", { id: current.id }, function( data ) {
    $("#company").innerHTML=data;
    $( "#dialog" ).dialog({
        modal: true,
        buttons: {
        Ok: function() {
            $( this ).dialog( "close" );
        }
        }
    });
    });
}

Also you will need to set an ID on the content element: <p id="content"><?php echo $company_desc;?></p>

Answer 2

Submit button is just popping up the div named "dialog". have a look at your function which is responsible for updating the variable $company_desc.

What I guess is that your if (!empty($video_details)) statement is not letting you update company_desc variable. Change your logic.

Answer 3

在Ater Ajax中，您必须更新对话框div，但是在代码中，您必须更新公司div，并显示对话框div。