JQuery Error with application: cannot call methods on dialog prior to initialization; attempted to call method 'open'

user_11726149 0
Viewed 40

I am attempting to add a dialog box to my application and am getting the above error.

My jQuery code:

    $( "#dialog" ).dialog({
        autoOpen: false,
        width: 450,
        modal: true,
        buttons: {
            "Save": function() {
                $("#newSup").submit();
            }
        }});

    $( ".addsupButton" ).click(function() {
        $("#newSup table").remove();


         $("#newSup").append(
            "<table style='margin-left: auto; margin-right:auto; background-color: #ffffff;' id='edittable'>"+
                "<tr>"+
                    "<td>Supplier ID</td>"+
                    "<td style='padding-left: 6px;'><input type='text' name='new_supplier_id' id='new_supplier_id' value='' /></td>"+
                "</tr>"+
                "<tr>"+
                    "<td>Customer ID</td>"+
                    "<td><input type='text' name='custID' id='custID' value='' /></td>"+
                "</tr>"+
                "<tr>"+
                    "<td>Forecast Sales</td>"+
                    "<td><input type='text' name='forecastSales' id='forecastSales' value='' /></td>"+
                "</tr>"+
                "<tr>"+
                    "<td>Forecast Percentage</td>"+
                    "<td><input type='text' name='forecastPercentage' id='forecastPercentage' value='' /></td>"+
                "</tr>"+
                    "<td><input type='form' name='addform2' id='addform2' style='visibility: hidden;' /></td>"+
                "</tr>"+
            "</table>"      
        ); 
        $("#dialog").dialog( "open" );
    });
});

HTML div and form:

<div class='dialog' id='dialog' title='New Supplier'>
  <form method='POST' id ='newSup' name = 'newSup' action='".$_SERVER['PHP_SELF']."' 
  enctype='multipart/form-data'></form>
</div>

The button to initialize the jQuery:

<button class='addsupButton' id='button' type='button' name='addRow'>Add Supplier</button>

Any help is greatly appreciated.

html jquery javascript
1 Answers

Your mistake was in an extra closing parenthesis - }); after $("#dialog").dialog("open");

$( "#dialog" ).dialog({
        autoOpen: false,
        width: 450,
        modal: true,
        buttons: {
            "Save": function() {
                $("#newSup").submit();
            }
        }});

    $( ".addsupButton" ).click(function() {
        $("#newSup table").remove();


         $("#newSup").append(
            "<table style='margin-left: auto; margin-right:auto; background-color: #ffffff;' id='edittable'>"+
                "<tr>"+
                    "<td>Supplier ID</td>"+
                    "<td style='padding-left: 6px;'><input type='text' name='new_supplier_id' id='new_supplier_id' value='' /></td>"+
                "</tr>"+
                "<tr>"+
                    "<td>Customer ID</td>"+
                    "<td><input type='text' name='custID' id='custID' value='' /></td>"+
                "</tr>"+
                "<tr>"+
                    "<td>Forecast Sales</td>"+
                    "<td><input type='text' name='forecastSales' id='forecastSales' value='' /></td>"+
                "</tr>"+
                "<tr>"+
                    "<td>Forecast Percentage</td>"+
                    "<td><input type='text' name='forecastPercentage' id='forecastPercentage' value='' /></td>"+
                "</tr>"+
                    "<td><input type='form' name='addform2' id='addform2' style='visibility: hidden;' /></td>"+
                "</tr>"+
            "</table>"      
        ); 
        
        
        $("#dialog").dialog( "open" );

});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class='dialog' id='dialog' title='New Supplier'>
  <form method='POST' id ='newSup' name = 'newSup' action='".$_SERVER['PHP_SELF']."' 
  enctype='multipart/form-data'></form>
</div>

<button class='addsupButton' id='button' type='button' name='addRow'>Add Supplier</button>

user_135734440
Related