Databases
StackOverflow2013
Postsdbo
POjquery dialog - external link's javascript not working
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery dialog - external link's javascript not working
    text
    copied!<p>I'm trying to make a dialog box that loads an external php file with a form that asks for information including a date which uses the jQuery datepicker and a javascript code to check if all the fields are filled in before submitting. I have the dialog box popping up correctly however the javascript in the external php file do not work(calendar doesn't pop up and the form validation checks aren't working). I am using an external php file because I have the link set to pass a variable to fill in one section of the form. I'm not sure if this information will be useful but loading the php file in a normal window link works perfectly fine, it is only when it is in the dialog that the javascript is not working.</p> <p>Here is the script I have for the dialog:</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function() { $('#order a').each(function() { var $link = $(this); var $dialog = $('&lt;div&gt;&lt;/div&gt;') .load($link.attr('href') + ' #content') .dialog({ autoOpen: false, title: $link.attr('title'), width: 500, height: 400 }); $link.click(function(){ $dialog.dialog('open'); return false; }); }); }); &lt;/script&gt; </code></pre> <p>This is the code I have that pops up the dialog:</p> <pre><code>&lt;div id="order"&gt; &lt;a href="package.php?code=NY1" title="Package Booking"&gt;&lt;img src="images/order.png"&gt;&lt;/a&gt; &lt;/div&gt; </code></pre> <p>The javascript code and form in the php file:</p> <pre><code>&lt;head&gt; &lt;script type="text/javascript"&gt; $(function(){ // Datepicker $('#pdate').datepicker({ inline: true, minDate: 0, }); &lt;/script&gt; &lt;script type="text/javascript"&gt; function packageValidator(){ var pdate = document.getElementById('pdate'); if(notEmpty(pdate, "Please enter a departure date.")){ return true; } return false; } function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); return false; } return true; } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="content"&gt; &lt;form action="send_package.php" method="post" onsubmit='return packageValidator()' &gt; &lt;table&gt; //Form Information &lt;tr&gt; &lt;td&gt;&lt;input id="pdate" name="pdate" type="text"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt;&lt;input type="submit" value="Submit" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&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