Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>If I understand the question right, the problem is that you don't initialize the elements in the external files when they are dynamically loaded. </p> <p>You should use the <strong><code>complete</code></strong> (callback) parameter of the jQuery <strong><code>.load()</code></strong> method; which executes when the corresponding request is complete. Here is the <a href="http://api.jquery.com/load/" rel="nofollow"><strong>documentation</strong></a>.</p> <p><strong>Main PHP/HTML file that loads external content:</strong> </p> <pre class="lang-html prettyprint-override"><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ // This is the function to be called from the externally // loaded content. function functionToBeCalled() { alert("Called function in the main (loader) page!"); } // This is the handler method that executes when the AJAX request // is complete. You can initialize the DOM elements in the external // content files here. function initOnLoad(responseText, textStatus, XMLHttpRequest) { // attach event listeners when the load is complete: $('#external-div').on('click', '#external-btn', functionToBeCalled); } $(".manage_link").click(function(e){ e.preventDefault(); var a_href = $(this).attr('href'); // passing the initOnLoad callback as param here: $('#ajax_manage').load(a_href, initOnLoad); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;li&gt;&lt;a class="manage_link" href="ajax_1.php"&gt;Manage 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="manage_link" href="ajax_2.php"&gt;Manage 2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="ajax_manage"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>External Content 1 (ajax_1.php):</strong></p> <pre class="lang-html prettyprint-override"><code>&lt;div id="external-div"&gt; External Content &lt;b&gt;1&lt;/b&gt;&lt;br /&gt; &lt;button id="external-btn" type="button"&gt;Call Function (from ajax 1)&lt;/button&gt; &lt;/div&gt; </code></pre> <p><strong>External Content 2 (ajax_2.php):</strong></p> <pre class="lang-html prettyprint-override"><code>&lt;div id="external-div"&gt; External Content &lt;b&gt;2&lt;/b&gt;&lt;br /&gt; &lt;button id="external-btn" type="button"&gt;Call Function (from ajax 2)&lt;/button&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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