2012-10-11 176 views
0

好吧,这是一个放肆的标题 - 这是复杂的复杂jqueryui对话框

概述:(请参见截图和底部的更新。)
a。在$(document).ready上,jQuery/AJAX构建每行一个触点的表格
b。每个表格行,第三个单元格是:<a id="edit_83">edit</a>标记 - “83”是示例并表示来自db的contact_id,因此每个标记都将具有唯一的id号,用于步骤(d)中
c。在构建表时,为AJAX回调中的每个联系人构造jqueryui对话框(autoOpen = false)。
d。当单击任何编辑锚点时,jquery会分离contact_id并使用它来显示适当的jQueryUI对话框。

目的:在任何表行点击编辑链接会打开与该联系人编辑形式的jQueryUI的对话框。

问题:表单打开,但里面没有表单域。事实上,在DOM中,每个表行都缺少注入的form/div。 ???


HTML:

<div id="contact_table"></div> 

的Javascript/jQuery的 - AJAX调用:

$(document).ready(function() { 
$.ajax({ 
    type: "POST", 
    url: "ax_all_ajax_fns.php", 
    data: 'request=index_list_contacts_for_client&user_id=' + user_id, 
    success: function(data) { 
     $('#contact_table').html(data); 
     var tbl = $('#injected_table_of_contacts'); 
     tbl.find("div").each(function() { 
      $(this).dialog({ 
       autoOpen: false, 
       height: 400, 
       width: 600, 
       modal: true, 
       buttons: 
        { 
         Okay: function() { 
          $(this).dialog("close"); 
         }, 
         Cancel: function() { 
          $(this).dialog("close"); 
         } 
        } 
      }) 
     }); 
    } 
}); 
}); 

AJAX/PHP 1 - ax_all_ajax_fns.php:

}else if ($_POST['request'] == 'index_list_contacts_for_client') { 
    $user_id = $_POST['user_id']; 
    $r = build_contact_table_for_client($user_id); 
    echo $r; 
} 

AJAX/PHP 2: - 的functions.php

function build_contact_table_for_client($user_id) { 
    $aContact_info = get_contact_data_ARRAY_user_id($user_id, 'first_name','last_name','email1','cell_phone', 'contact_id'); 
    $r = '<table id="injected_table_of_contacts"> 
      <tr> 
       <th width="120">Name</th> 
       <th width="200">Email Address</th> 
       <th width="100">Cell Phone</th> 
       <th>Action</th> 
      </tr> 
     '; 
    while ($rrow = mysql_fetch_array($aContact_info)) { 
     $r .= ' 
      <tr> 
       <td>'.$rrow['first_name'].' '.$rrow['last_name'].'</td> 
       <td>'.$rrow['email1'].'</td> 
       <td>'.$rrow['cell_phone'].'</td> 
       <td> 
        <a class="editcontact" id="edit_'.$rrow['contact_id'].'" href="#">edit</a> 
        /
        <a class="delcontact" id="del_'.$rrow['contact_id'].'" href="#">del</a> 
        <div id="editThisContact_'.$rrow['contact_id'].'" style="display:none"> 
         <form name="editForm" onsubmit="return false;"> 
          <p class="instructions">Edit contact information:</p> 
          First Name:<span style="padding:0 20px;">Last Name:</span><br /> 
          <input type="hidden" id="fn_'.$rrow['contact_id'].'" value="'.$rrow['first_name'].'"> 
          <input type="hidden" id="ln_'.$rrow['contact_id'].'" value="'.$rrow['last_name'].'"> 
          Email:<span style="padding:0 20px;">Cell Phone:</span><br /> 
          <input type="hidden" id="em_'.$rrow['contact_id'].'" value="'.$rrow['email1'].'"> 
          <input type="hidden" id="cp_'.$rrow['contact_id'].'" value="'.$rrow['cell_phone'].'"> 
         </form> 
        </div> 
       </td> 
      </tr> 
     '; 
    } 

    $r .= '</table>'; 
    return $r; 
} 

jQuery的 - document.click事件 - 如果注入的代码丢失,它是如何能够找到选择?

$(document).on('click', '.editcontact', function(event) { 
    var contact_id = this.id.split('edit_')[1]; 
    var etc = $('#editThisContact_' + contact_id); 
    etc.dialog("open"); 
}); 

更新 - 部分解决:

对话框现在出现 - 取消按钮是出位,每this post。但是,注入的代码已经消失。没有其他改变 - 只是通过在取消按钮的位置上固定语法错误来获得对话框代码的工作。


图像对话框代码之前注射标记的合作对话缺失的输入字段injected markup before dialog code worked http://bluecoonmedia.com/so_query.jpg


截图 - 其中文本“编辑联系人信息”和字段标签是从哪里来的?(见下截图 - 所有注射标记丢失)对话框代码工作injected markup after dialog code working http://bluecoonmedia.com/so_query_new.jpg

+0

建议:不要有多个对话框。有一个,你的所有数据都在一个JSON对象数组中。使用它来填写表格,甚至可以绘制您的表格(取决于您的需求)。 –

+0

这将是什么样子?你能指点我一个在线的例子或教程吗?我还没有使用JSON obj阵列,并且无法在概念上设想您的解决方案。 – gibberish

回答

1

回应关于我对原帖的评论的问题: 您确实已经知道JSON,它代表JavaScript Object Notation。这是一个JSON对象:

{"a":1,"b":2,"c":3} 

看起来很熟悉吗? JSON对于我们已经使用了很长时间的东西来说只是一个奇特的名字(这可能不是100%真实的,但它是我的看法。)

这个想法是让服务器传递回JSON对象并拥有你的JavaScript基于它们创建/更新HTML。在你的场景中,你让PHP构建了多个HTML对话框。相反,你将有你的PHP传回对象每一个代表从表中的一行,像这样的数组:

{ 
    "records": 
    [ 
    { 
     "field a":"value a", 
     "field b":"value b" 
    }, 
    // record 2 
    { 
     "field a":"value a", 
     "field b":"value b" 
    } 
    ] 
} 

如果你是从服务器使用.getJSON(),jQuery的会要求自动读取它并为您提供一个带有.records属性的对象,该属性是对象数组!现在,您可以使用JavaScript在屏幕上单击对应记录之一时更新单个对话框/窗体。

注意:您可以让PHP传回一组对象,但最好将它包装在上面的对象中。很多时候,您还需要其他信息,例如,当您分页搜索结果时,您需要知道记录的总数,您正在浏览的页面以及其他数据点。

这样做的另外一个好处是服务器要快得多。将所有显示逻辑推送到客户端的计算机上,因此可以从同一台服务器上服务更多页面。

这是一个真正简单的解释。网上有教程和例子。您在线使用的任何良好的Ajax应用程序(例如GMail)都使用JSON对象,而不是传递巨大的HTML块。这里有几个链接,谷歌有相当多的更多:

也有一些非常好的框架来帮助这个过程。我是backbone.jsspine.js的巨大粉丝。两者都使用jQuery,它们都可以帮助您在构建应用程序时使用最佳做法(如MVC)。

+0

Thom,谢谢你提供的信息丰富的答案 - 并且非常清楚地解释。 – gibberish

0

当你解决你自己的问题很高兴后dialog missing input fields http://bluecoonmedia.com/so_query_dlg.jpg


截图注射标记。当答案是ID-ten-T错误时不太好。

在注入的HTML中,请注意输入字段的类型(屏幕截图1)。将类型更改为type =“text”,并且所有工作都按需要进行。

当概念是新的时候,奥卡姆的剃刀移动几乎无法触及。

我还是不明白为什么我看不到注入的标记,虽然..!