使用ajax调用弹出的jquery对话框表单

时间:2013-05-13 07:24:56

标签: jquery ajax

我有一个get参数链接。当我点击它时,会调用ajax。现在进入

action.php,我有一个带有php值的表单(来自mysql)。我想用jquery

弹出它

对话框。

我不知道该怎么做。

      <script>


 $(document).ready(function(){
 $.ajax({
        type: "GET",
        url: this.href,
        cache:false,
        success: function(response){           
            if (response.length > 0) {  
            document.getElementById('display').innerHTML=wrapperelement; 
                wrapperelement.innerHTML = response; 
                $( "#dialog-form" ).dialog( "open" );
            }
        }
 });
});
</script>

更新的代码

此档案的正文

       <body>
       <div id="display"></div>
       echo '<a href="action.php?pldid=' . $pldid . '" class="editbt">Edit</a>';
       </body>

所以我的action.php

   if (isset($_GET['pldid'])&& $_GET['pldid'])
 {
 $form = <<<EOF
<form>
<div id="dialog-form" title="Edit Fields">
  <p class="validateTips">All form fields are required.</p>



 <form>
 <fieldset>
 <label for="box">Box</label>
 <input type='text' name='box' id='box' class="text ui-widget-content ui-corner-all"   />
 <label for="itemname">itemname</label>
 <input type='text' name='itemname' id='itemname' class="text ui-widget-content ui-corner-all"   />
<label for="size">size</label>
 <input type='text' name='size' id='size' class="text ui-widget-content ui-corner-all"   />
<label for="potency">potency</label>
 <input type='text' name='potency' id='potency' class="text ui-widget-content ui-corner-all"   />
<label for="quantity">Quantity</label>
 <input type='text' name='quantity' id='quantity' class="text ui-widget-content ui-corner-all"   />

 </fieldset>
 </form>

</div>
EOF;
echo $form;
}

我希望链接打开一个带窗体的窗口(来自mysql的值)。任何建议都受到欢迎。谢谢你..

2 个答案:

答案 0 :(得分:0)

如果您的表单尚未在页面上,那么action.php应该只创建表单的标记,所以一旦成功,只需通过innerHTML方法附加标记,从而显示对话框。

<强>的script.php

<?php

$form = "";
if (isset($_GET['pldid']) && $_GET['pldid']) { 
    $form = <<<EOF
<form id="dialog-form">
  ...
</form>
EOF;
}

echo $form;
?>

标记/ javaScript

<div id="wrapper">
   <!-- I'm your wrapper. I'm waiting to receive your markup --> 
</div>

<script>
     var wrapperelement = document.getElementById('wrapper');
     $.ajax({
            type: "GET",
            url: this.href,
            cache:false,
            success: function(response){           
                if (response.length > 0) {   
                    wrapperelement.innerHTML = response; 
                    $( "#dialog-form" ).dialog( "open" );
                }
            }
     });
</script>

其中 wrapperelement 是一个空元素,在其中附加在服务器端生成的标记

答案 1 :(得分:0)

$.ajax({
            type: "GET",
            url: this.href,
            cache:false,
            success: function(response){           
                if (response.length > 0) {   
                    wrapperelement.innerHTML = response; 
                    $( "#dialog-form" ).dialog( "open" );
                }
            }
     });