jquery dialog - external link's javascript not working

问题

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.

Here is the script I have for the dialog:

<script type="text/javascript">
$(document).ready(function() {
    $('#order a').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
        .load($link.attr('href') + ' #content')
        .dialog({
            autoOpen: false,
            title: $link.attr('title'),
            width: 500,
            height: 400
        });

        $link.click(function(){
            $dialog.dialog('open');
            return false;
        });
    });
});
</script>

This is the code I have that pops up the dialog:

<div id="order">
    <a href="package.php?code=NY1" title="Package Booking"><img src="images/order.png"></a>
</div>

The javascript code and form in the php file:

<head>
<script type="text/javascript">
$(function(){
            // Datepicker
            $('#pdate').datepicker({
                inline: true,
                minDate: 0,
            });
</script>
<script type="text/javascript">
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;
}
</script>
</head>
<body>
<div id="content">
<form action="send_package.php" method="post" onsubmit='return packageValidator()' >
        <table>
          //Form Information
            <tr>
                <td><input id="pdate" name="pdate" type="text"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="Submit" /></td>
            </tr>
        </table>
</form>
</div>
</body>

回答1:

I've never seen a setup like this one. Not sure if you can post to a page containing only javascript in it. On the page with the form, you have to throw all that javascript from the PHP file into an external .js file and add

<script src="myjavascript.js"></script>

to the page with the form.

Also, when you put the javascript in the external file, remove the tags. Then you can run your validation within the form, and call the functions that render the links in the dialog box.

来源：https://stackoverflow.com/questions/11833008/jquery-dialog-external-links-javascript-not-working

标签

javascript

jquery

jquery-ui-dialog