0

我正在使用一个数据表插件，我有一个按钮来显示一个对话框。这是我的代码。 

        <title>DataTables example</title>
        <style type="text/css" title="currentStyle">
            @import "../../media/css/demo_page.css";
            @import "../../media/css/demo_table.css";
        </style>
        <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
        <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>


        <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    learn/jquery-ui-1.10.3.custom/development-bundle/ui/
    <script src="127.0.0.1/learn/jquery-ui-1.10.3.custom/development-bundle/ui/jquery.ui.core.js"></script>
    <script src="127.0.0.1/learn/jquery-ui-1.10.3.custom/development-bundle/ui/jquery.ui.widget.js"></script>
    <script src="127.0.0.1/learn/jquery-ui-1.10.3.custom/development-bundle/ui/jquery.ui.mouse.js"></script>
    <script src="127.0.0.1/learn/jquery-ui-1.10.3.custom/development-bundle/ui/jquery.ui.draggable.js"></script>
    <script src="127.0.0.1/learn/jquery-ui-1.10.3.custom/development-bundle/ui/jquery.ui.position.js"></script>
    <script src="127.0.0.1/learn/jquery-ui-1.10.3.custom/development-bundle/ui/jquery.ui.resizable.js"></script>
    <script src="127.0.0.1/learn/jquery-ui-1.10.3.custom/development-bundle/ui/jquery.ui.button.js"></script>
    <script src="127.0.0.1/learn/jquery-ui-1.10.3.custom/development-bundle/ui/jquery.ui.dialog.js"></script>
    <link rel="stylesheet" href="../demos.css">



        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $('#example').dataTable();
            } );
    function show_dialog_xyz(){
        $('#dialog-modal').css('visibility','visible');
        $( "#dialog-modal" ).dialog({
            height: 190,
            modal: true
        });

    }




    function submitform_xyz(){
     //alert('the user name is');
    // DO ajax and submit value to db

    var $name = $("input#id_name").val(); 
    var $email = $("input#id_email").val();
    var dataString = 'name='+ $name + '&email=' + $email; 
    alert(dataString);
  $.ajax({  
  type: "POST",  
  url: "http://127.0.0.1/learn/DataTables-1.9.4/examples/basic_init/data_populate.php",  
  data: dataString,  
  success: function(data_in) {  
    if(data_in.indexOf("ERROR:")==0){
    $('#message').html("<div id='message_recieved'></div>");  
    $('#message_recieved').html("<h2>Subscribed</h2>")  
    .append("<p>We will be in touch soon.</p>")  
    .hide()  
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='Contact_ICON.png' />");  
    });  
  }  
  else{
        $('#message').html("<div id='message_recieved'></div>");  
    $('#message_recieved').html("<h2>UnSubscribed</h2>")  
    .append("<p>Sorry for inconvenience.</p>")  
    .hide()  
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='Contact_ICON.png' />");  
    });  
  }
}  
    });
    }
    </script>

    </head>
    <body id="dt_example">
        <div id="container">

            <div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>

        </tr>
    </thead>
        <tbody>
    <?php include "data_populate.php" ?>
        </tbody>
    <tfoot>
        <tr>
            <th> Name</th>
            <th>Email</th>

        </tr>
    </tfoot>
</table>
            </div>
            <div class="spacer"></div>



        </div>
        <div id="message" style="display:block;">
<form id="dialog-modal" title="Basic modal dialog" style='background-color:#2980b9;visibility:hidden;display:block;float:right'>
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
    Enter Name :<input type="text" value="" id="id_name"/><br>
    <!--<label class="error" for="id_name" id="name_error">This field is required.</label> -->
    Enter Email :<input type='text' value='' id="id_email" />  
    <!--<label class="error" for="id_email" id="name_error">This field is required.</label> -->

     <input type='button' value='Subscribe' id='is_but_subs' onclick='submitform_xyz();'/>
</form>
</div>
<input type='button' id='but_show_dialog'  onclick='show_dialog_xyz();' value='show dialog'/>
    </body>
</html>

但是我收到一个错误，即 .dialog() 不是函数。但是如果我在单独的页面中使用该对话框，它正在工作。我应该怎么做？任何人帮助..请

4

0 回答 0