jQuery的addClass / removeClass移除阿贾克斯成功后 [英] jQuery addClass/removeClass after ajax success

问题描述

我有一个ajax表单提交的工作很好，但我想添加一个成功级，表示当用户选中或取消选中一个框，要求完成用户。我已经尝试了几件事情至今：

  $（箱子）。改变（函数（）{
    VAR ID = $（本）.VAL（）;
    VAR dataString =ID =+编号+＆放大器; crudtype = MyApp的;
    。VAR clickedObj = $（本）.parent（）父（）;
    $阿贾克斯（{
        键入：POST，
        网址：/ myphppage
        数据：dataString，
        缓存：假的，
        成功：函数（）{
          VAR oldClass = clickedObj.attr（类）;
          clickedObj.fadeIn（1400，函数（）{
            clickedObj.removeClass（oldClass）;
            clickedObj.addClass（更新）;
          }）;
          clickedObj.fadeOut（1400，函数（）{
            clickedObj.removeClass（更新）;
            clickedObj.addClass（oldClass）;
          }）;
        }
    }）;
}）;
 

那一个确实适用更新级，但实际上淡出数据删除的整行（父（）。父（）是我针对的标记。）

  $（箱子）。改变（函数（）{
  VAR ID = $（本）.VAL（）;
  VAR dataString =ID =+编号+＆放大器; crudtype = MyApp的;
  。VAR clickedObj = $（本）.parent（）父（）;
  $阿贾克斯（{
      键入：POST，
      网址：/ myphppage
      数据：dataString，
      缓存：假的，
      成功：函数（）{
        VAR oldClass = clickedObj.attr（类）;
        clickedObj.removeClass（oldClass）;
        clickedObj.addClass（更新，1000）;
        clickedObj.removeClass（更新，1000）;
        clickedObj.addClass（更新）;
      }
  }）;
}）;
 

我也试过这个，但所发生的一切是它（显然）删除现有的类，添加了新的，然后做同样的事情在反向立刻让新类是从未见过。看来，1000延时尽管我在这个网站上运行jQueryUI的事实被忽略。

由于任何人谁可以帮助！

编辑：添加在HTML code：

 ＆LT;表ID =数据表级=显示dataTable的角色=网格＆GT;
  ＆LT; TBODY＆GT;
    ＆LT; TR类=奇的角色=行＆GT;
      ＆LT; TD类=formcell＆GT;＆LT;输入ID =actionitem级=盒子式=复选框值=1234NAME =actionitem []＆GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆LT; TR类=甚至角色=行＆GT;
      ＆LT; TD类=formcell＆GT;＆LT;输入ID =actionitem级=盒子式=复选框值=5678NAME =actionitem []＆GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; /表＆gt;
 

解决方案

我真的不知道你的渐变效果应该是什么样子。这的确让我更有意义添加新的和衰落它之前淡出老班会造成你无法看到＆LT; TR＆GT; 这是包括该复选框，当它淡出的开始。
briansol是对他的回调和我用 fadeTo 这里prevent 的jQuery 从设置显示：无：

  $（箱子）。在（点击，函数（）{
    。clickedObj = $（本）.parent（）父（）;

    clickedObj.fadeTo（1400年，0.01，函数（）{
        clickedObj.removeClass（oldClass）addClass（更新）。
        clickedObj.fadeTo（1400年，1.0，函数（）{
            clickedObj.removeClass（已更新）addClass（oldClass）;
        }）;
    }）;
}）;
 

我还做了一个小提琴： http://jsfiddle.net/northkildonan/rmj75wr2/

I've got an ajax form submission working well but I'd like to add a "success" class to indicate to the user that the request was completed when the user checked or unchecked a box. I've tried a few things so far:

    $(".box").change(function() {
    var id=$(this).val();
    var dataString = "id=" + id + "&crudtype=myapp";
    var clickedObj = $(this).parent().parent();
    $.ajax( {
        type: "POST",
        url: "/myphppage",
        data: dataString,
        cache: false,
        success: function() {
          var oldClass = clickedObj.attr("class");
          clickedObj.fadeIn(1400, function() {
            clickedObj.removeClass(oldClass);
            clickedObj.addClass("updated");  
          });
          clickedObj.fadeOut(1400, function() {
            clickedObj.removeClass("updated");  
            clickedObj.addClass(oldClass);
          });
        } 
    });
});

That one does indeed apply the "updated" class but the fadeOut actually removes the entire row of data (parent().parent() is the tag that I'm targeting.)

$(".box").change(function() {
  var id=$(this).val();
  var dataString = "id=" + id + "&crudtype=myapp";
  var clickedObj = $(this).parent().parent();
  $.ajax( {
      type: "POST",
      url: "/myphppage",
      data: dataString,
      cache: false,
      success: function() {
        var oldClass = clickedObj.attr("class");
        clickedObj.removeClass(oldClass);
        clickedObj.addClass("updated", 1000);
        clickedObj.removeClass("updated", 1000);
        clickedObj.addClass("updated");
      } 
  });
});

I also tried this, but all that happens is that it (evidently) removes the existing class, adds the new one, and then does the same thing in reverse immediately so the new class is never seen. It appears that the 1000 delay is ignored despite the fact that I'm running jQueryUI on this site.

Thanks to anyone who can help!

EDIT: Adding in HTML code:

<table id="datatable" class="display dataTable" role="grid">
  <tbody>
    <tr class="odd" role="row">
      <td class="formcell"><input id="actionitem" class="box" type="checkbox" value="1234" name="actionitem[]"></td>
    </tr>
    <tr class="even" role="row">
      <td class="formcell"><input id="actionitem" class="box" type="checkbox" value="5678" name="actionitem[]"></td>
    </tr>
</table>

解决方案

i don't really know how your fade-effect is supposed to look like. it did make more sense to me to fade out the old class before adding the new one and fading it in. cause you can't see the <tr> which is including the checkbox, when it's faded out at the start.
briansol is right with his callbacks and i used fadeTo here to prevent jQuery from setting display: none:

$(".box").on("click", function () {
    clickedObj = $(this).parent().parent();

    clickedObj.fadeTo(1400, 0.01, function(){
        clickedObj.removeClass("oldClass").addClass("updated");
        clickedObj.fadeTo(1400, 1.0, function(){
            clickedObj.removeClass("updated").addClass("oldClass");
        });
    });
});

i also made a fiddle: http://jsfiddle.net/northkildonan/rmj75wr2/

这篇关于jQuery的addClass / removeClass移除阿贾克斯成功后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！