Jquery模态表单发布两次

时间:2014-03-05 06:53:03

标签: php jquery html ajax modal-dialog

我正在使用jquery custombox,但在发布模式表单时遇到问题。 这些值是两次发布,因为一旦我初始化模态窗口,表单在html源上出现两次。 当我点击'#att = add'时,我的fn.custom框中出现一个,而另一个出现在页面底部,但显示为:none; 我怎样才能发布显示的表格? 这是我的js。

$s = jQuery.noConflict();
$s(document).ready(function() {

   //Afisam modal pentru adaugare atribut
    $s('#att-add').live('click', function (e) {
        $s.fn.custombox( this, {
            overlay: true,
            effect: 'fadein',
            eClose: '.close',
            width: 300,
            close: function () { 
                        $s('.groups').selectric('destroy');
                        $s("label.error").hide();
                 }
        });
          e.preventDefault();
          $s('.groups').selectric();
    });


   //Afisam modal pentru editare atribut
    $s('#att-edit').live('click', function (e) {
      e.preventDefault();
        var id = $s(this).data('id');
          $s.ajax({
                type: "POST",
                url: "index.php?controller=attribute&method=edit",
                data: {id: id},
                    success: function(data) {
                        $s('.attribute-edit').html(data); 
              $s('.groups').selectric();
                    }

        });
        $s.fn.custombox( this, {
            overlay: true,
            effect: 'fadein',
            eClose: '.close',
            width: 300,
            close: function () { 
                        $s('.groups').selectric('destroy');
                        $s("label.error").hide();
                    }
        });

    });

   //Validam si actualizam atributul
   $s('#updateAttribute').live('click', function (e) {
    e.preventDefault();
    $s('.groups').change(function(){
        if ($s(this).val()!="")
        {

            $s(this).valid();
        }
    });
      $s('#form-attribute-update').validate({
        ignore: [],
        rules: {
          name: {
            required: true,
            minlength: 2
          },
          groups: {
            required: true
          }
        },
        errorPlacement: function (error, element) {
            if (element.attr("name") == "groups") {
              error.insertAfter(".selectric");
            } else {
              error.insertAfter(element);
            }
        },

        messages: {
          name: {
            required: "Completeaza numele atributului.",
            minlength: "Minim 2 caractere."
          },
          groups: {
            required: "Selectati un grup"
          }
        }

      });

      if ( $s('#form-attribute-update').valid() ) {
          $s.ajax({
              type: 'post',
              url: 'index.php?controller=attribute&method=updateAttribute',
              data: $s('#form-attribute-update').serialize(),
                  success: function(){
                    // window.location.href = "index.php?controller=attribute";
               }

          }); 
          return false; 
      }
    });
   });

这就是我在xhr发布的内容:

Parametersapplication/x-www-form-urlencoded
groups  1
groups  1
id  7
id  7
name    Intel
name    Intel
ordine  0
ordine  0

html

  <div id="modal-edit-attribute" style="display: none;" class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" title="inchide">&times;</button>
        <h3>Actualizeaza atributul</h3>
    </div>
    <div class="modal-body attribute-edit">
                   <form id="attributeupdate" method="post">
            <div class="form-group">
              <label>Numele atributului</label> -id ={$atribute.attribute_id}
              <input type="text" name="name" autocomplete="off" value="{$atribute.name}" />
            </div>
            <div class="form-group">
              <label>Selectati grupul de atribute</label>
              <select name="groups" class="groups">
                <option value="">Selecteaza grupul</option>
                {section name=op loop=$groups.attribute_group_id}
                 <option value="{$groups.attribute_group_id[op]}" {if $atribute.attribute_group_id == $groups.attribute_group_id[op]} selected="selected" {/if}>{$groups.name[op]}</option>
                 {/section}
              </select>
            </div>
            <div class="form-group">
              <label>Ordinea</label>
              <input class="ordine" type="text" name="ordine" value="{$atribute.sort_order}"/>
              <input type="hidden" name="id" value="2"/>
            </div>
            <div class="form-group form-btn">
              <button class="bluebtn" id="updateAttribute">Actualizeaza atributul</button>
          </div>
      </form>
    </div>
    <div class="clear"></div>
</div>

表单加载在modal-body中。 身体标签后,我正在

<div id="custombox-modal" class="custombox-modal custombox-fadein custombox-show" style="z-index: 10001; margin-left: -151px; width: 302px; position: absolute;" data-custombox-scroll="0" data-custombox="function () { 
                        $s('.groups').selectric('destroy');
                        $s(&quot;label.error&quot;).hide();
                    }"><div id="custombox-modal-content" class="custombox-modal-content" style="transition-duration: 600ms;"><div style="display: block; width: auto;" class="modal-content" id="modal-edit-attribute" data-custombox-width="302">
        <div class="modal-header">
            <button title="inchide" class="close" type="button">×</button>
            <h3>Actualizeaza atributul</h3>
        </div>
        <div class="modal-body attribute-edit">              <form method="post" id="attributeupdate">
                <div class="form-group">
                  <label>Numele atributului</label> -id =1
                  <input type="text" value="Capacitate" autocomplete="off" name="name">
                </div>
                <div class="form-group">
                  <label>Selectati grupul de atribute</label>
                  <div class="selectricWrapper groups"><div class="selectricHideSelect"><select class="groups" name="groups">
                    <option value="">Selecteaza grupul</option>
                                         <option selected="selected" value="1">Specificatii</option>
                                          <option value="2">Tara de provenienta</option>
                                          <option value="3">Tip produs</option>
                                       </select></div><div class="selectric"><p class="label">Specificatii</p><b class="button">▾</b></div><div tabindex="-1" class="selectricItems"><ul><li class="">Selecteaza grupul</li><li class="selected">Specificatii</li><li class="">Tara de provenienta</li><li class=" last">Tip produs</li></ul></div><input type="text" class="selectricInput"></div>
                </div>
                <div class="form-group">
                  <label>Ordinea</label>
                  <input type="text" value="0" name="ordine" class="ordine">
                  <input type="hidden" value="2" name="id">
                </div>
                <div class="form-group form-btn">
                  <button id="updateAttribute" class="bluebtn">Actualizeaza atributul</button>
              </div>
          </form></div>
        <div class="clear"></div>
    </div></div></div>

1 个答案:

答案 0 :(得分:0)

解决了
$s('.modal-content:gt(0)').remove();
验证后