Note that there are some explanatory texts on larger screens.

plurals
  1. POContent will only show when delayed
    primarykey
    data
    text
    <p>I have a problem when loading content into a div via Ajax.<br> I start with opening a dialogbox when I click on a button. The dialog box loads in a php file.<br> Right after the code for the dialog box I placed some code to load certain content into a div in that php file. My code: </p> <pre><code>function edit(serverpage, persoonid) { $(".opendg").dialog( { open:function () { $(this).load('/location/php/' + serverpage); }, title: 'Change!', autoOpen: true, closeOnEscape: true, height: 335, width: 650, modal: true, resizable: false, close: function(){}, buttons: { "Change": function() { sendedit(serverpage, persoonid); return; }, "Cancel": function() { $(this).dialog("close"); } } }); xmlhttp = ajaxFunction(); if (xmlhttp) { var url = "/location/php/" + serverpage; var pagelength = serverpage.length; var value = serverpage.substr(0,pagelength - 4); var params = "edit=" + value + "&amp;id=" + persoonid; xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", params.length); xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) { if(xmlhttp.responseText != '') { value = value + 'form'; alert('test'); document.getElementById(value).innerHTML=xmlhttp.responseText; } } } xmlhttp.send(params); } } </code></pre> <p>As you can see I placed an alert just before sending the responseText to the div.<br> I did this because without the alert I get an empty form!<br> The first time I open the dialog box I see nothing. After reopening I see a short flash of the content I want, but disappears in milliseconds.</p> <p>The code which generates the content: </p> <pre><code>&lt;?php if($_POST['edit'] == 'editpersoneel') { //Query run here to get the results echo '&lt;form&gt; &lt;table&gt; &lt;tr&gt; &lt;td class="first"&gt; Location: &lt;/td&gt; &lt;td&gt; &lt;input type="text" value="'.$result['location'].'" /&gt; &lt;/td&gt; &lt;td class="first"&gt; phonenumber &lt;/td&gt; &lt;td&gt; &lt;input type="text" value= "'.$result[phonenumber'].'" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt;'; } ?&gt; &lt;div id="editpersoneelform"&gt;&lt;/div&gt; </code></pre> <p>I tried solving this with the $(document).ready statement from jQuery, but didn't work in any order.<br> I think the problem is that the div is unknown (somehow) to Ajax when sending the content, yet I do get a result.</p> <p>So My question is:<br> - Why does my code work when I place an alert in it? (I only have to open the dialog once here)<br> - Why does my content get loaded and unloaded one millisecond thereafter? And why did I had to open the dialog twice?</p> <p><strong>UPDATE</strong><br> When I place the alert after sending the responseText I have to open the dialog twice before I get to see the alertbox.</p> <p><strong>UPDATE 2</strong><br> The code that calls the event: </p> <pre><code>&lt;div class="jbutton"&gt; &lt;a onclick="edit(\'editpersoneel.php\',\''.$b['id'].'\')"&gt;Adjust&lt;/a&gt; &lt;/div&gt; </code></pre> <p>This button is placed inside a jquery-ui-accordion.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload