2012-02-29 60 views
1

我试图加载一个页面,我使用ajax创建,加载得很好,所有。我遇到的问题是,我加载到对话框中的页面以其显示的形式具有更新按钮。该按钮不起作用,因为它只是重定向到页面Im而不执行更新。单独的页面按钮Ajax功能

是否有一些特殊的方式来处理加载在对话框中的页面,它包含的按钮。

这是我的ajax请求,工作并加载我想要的页面。

$('[data-label="button_edit"]').bind('click', function(){ 
     temp = $(this).attr('id'); 
     contact_id = temp.split('-'); 
     $.ajax({ 
      type: 'post', 
      url: 'admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id='+ contact_id[1] + '&form_only=true' , 
      success:(function(data) { 
       $('#edit_contact_form').html(data).dialog({ 
        width: 1500, 
        height: 700 
       }); 
      }) 
     }); 
     return false; 
    }); 


<td data-label="form_only" class="-left-side"> 
       <form action="" method="post" name="form" id="form"> 
        <span data-label="footprint_alerts">footprint_alerts</span> 
        <table class="span-17 -form"> 
         <thead> 
          <tr> 
           <th colspan="2">Contact Information</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td class="-field-label" width="120">Is Default:</td> 
           <td class="-field"> 
            <select size="1" data-field="is_default" name="is_default"> 
             <option value="yes">yes</option> 
             <option value="no">no</option> 
            </select> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label -required">Contact Method:</td> 
           <td class="-field"> 
            <select name="method" data-field="method"> 
             <option value="">-- Select a Contact Method --</option> 
             <option value="phone">Phone</option> 
             <option value="email">E-Mail</option> 
             <option value="form">Form</option> 
            </select> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label">Email Address:</td> 
           <td class="-field"> 
            <input type="text" value="" maxlength="128" size="30" name="email" data-field="email" /> 
            <div data-label="email_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label">Email Address Alt:</td> 
           <td class="-field"> 
            <input type="text" value="" size="30" name="email_alt" data-field="email_alt" /><br/> 
            <small class="-lite">This field accepts comma separated e-mail address lists. (ie. [email protected], [email protected], [email protected])</small> 
            <div data-label="email_alt_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label">URL:</td> 
           <td class="-field"> 
            <input type="text" value="" maxlength="1024" size="45" name="url" data-field="url" /> 
            <div data-label="url_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label">URL Alt:</td> 
           <td class="-field"> 
            <input type="text" value="" maxlength="1024" size="45" name="url_alt" data-field="url_alt" /> 
            <div data-label="url_alt_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label">Job Title:</td> 
           <td class="-field"> 
            <input type="text" value="" maxlength="45" size="20" name="job_title" data-field="job_title" /> 
            <div data-label="job_title_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label">Company Name:</td> 
           <td class="-field"> 
            <input type="text" value="" maxlength="45" size="25" name="name_company" data-field="name_company" /> 
            <div data-label="name_company_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label -required">First Name:</td> 
           <td class="-field"> 
            <input type="text" value="" maxlength="45" size="25" name="name_first" data-field="name_first" /> 
            <div data-label="name_first_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label">Middle Name:</td> 
           <td class="-field"> 
            <input type="text" value="" maxlength="45" size="25" name="name_middle" data-field="name_middle" /> 
            <div data-label="name_middle_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label -required">Last Name:</td> 
           <td class="-field"> 
            <input type="text" value="" maxlength="45" size="25" name="name_last" data-field="name_last" /> 
            <div data-label="name_last_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label">Phone:</td> 
           <td class="-field"> 
            <input type="text" value="" maxlength="20" size="20" name="phone" data-field="phone" /> 
            <div data-label="phone_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label">Phone Alt.:</td> 
           <td class="-field"> 
            <input type="text" value="" maxlength="20" size="20" name="phone_alt" data-field="phone_alt" /> 
            <div data-label="phone_alt_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label">Address:</td> 
           <td class="-field"> 
            <input type="text" value="" maxlength="45" size="25" name="address" data-field="address" /> 
            <div data-label="address_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label">Address 2:</td> 
           <td class="-field"> 
            <input type="text" value="" maxlength="45" size="25" name="address_alt" data-field="address_alt" /> 
            <div data-label="address_alt_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label">City:</td> 
           <td class="-field"> 
            <input type="text" value="" maxlength="45" size="25" name="city" data-field="city" /> 
            <div data-label="city_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-field-label">Zip:</td> 
           <td class="-field"> 
            <input type="text" value="" maxlength="10" size="10" name="zip" data-field="zip" /> 
            <div data-label="zip_container"></div> 
           </td> 
          </tr> 
          <tr> 
           <td class="-label">&#160;</td> 
           <td class="-field"> 
            <input type="submit" data-field="button_new" value="Create New" name="action" class="-alt"/> 
            <input type="submit" value="Update" name="action" data-field="button_update" /> 
            <input type="submit" value="Delete" name="action" data-field="button_delete" /> 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </form> 
      </td> 

CNC中我发现了一个解决方案,我是有这个问题,感觉就像在此基础上的按钮独立页面上工作信息共享它

$('[data-label="button_edit"]').bind('click', function(){   
     temp = $(this).attr('id'); 
     contact_id = temp.split('-'); 
     $.ajax({ 
      type: 'post', 
      url: 'admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id='+ contact_id[1] + '&form_only=true' , 
      success:(function(data) { 
       contactForm = $('#edit_contact_form_container').html(data); 
       $('#contact_form').find('[data-field="button_update"]').css('visibility','hidden'); 
       $('#contact_form').bind('submit', function(){ 
        $.post('admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id='+ contact_id[1] + '&form_only=true&action=Update Contact',$('#contact_form').serialize()); 
        contactForm.dialog('close'); 
       }); 
       contactForm.dialog({ 
        width: 700, 
        height: 700, 
        title: 'Edit Contact Information', 
        buttons: { 
         "Go To Contacts Page": function(){ 
          location.href='admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id=' + contact_id[1]; 
         }, 
         "Update Contact": function(){ 
          $.post('admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id='+ contact_id[1] + '&form_only=true&action=Update Contact',$('#contact_form').serialize()); 
          contactForm.dialog('close'); 
          window.location.reload(); 
         } 
        } 
       }); 
      }) 
     }); 
     return false; 
    }); 
+0

不清楚是什么您从窗体按钮中查找的行为。 AJAX? – charlietfl 2012-02-29 20:06:26

+0

对不起,如果我不清楚。基本上我现在工作的是一个窗体,出现在从不同的php页面获得的对话框中。问题是出现在对话框中的窗体中有来自另一个页面的按钮,但是当我点击其中一个按钮时,它不执行任何类型的功能。请记住,这些按钮在单独的php页面上工作。所以林不知道我怎么能使该按钮在当前页面上工作。 – Novazero 2012-02-29 20:11:03

+0

我没有看到您提供的代码中的任何按钮。你可以请张贴所有需要的代码来回答你的问题。 – Paul 2012-02-29 20:16:32

回答

1

。如果他们有独立的脚本,就绪事件已经发生在对话框所在的主页上,所以如果脚本在新的HTML之后没有加载,它将会过早地引发。

你可以打电话,你创建对话框(您加载在对话框中新的HTML之后)同阿贾克斯的成功中相同的脚本,或者确保加载网页上的脚本标签AFER的HTML它是指

+0

是的,你的权利我将不得不绑定表单提交并阻止它在发射之后被触发 – Novazero 2012-02-29 20:37:54