0

假设我可能（但也可能没有）order在我的 DOM 中有一个带有类的元素。它可能在页面加载时创建，也可能在成功的 ajax 请求后创建。我的问题是，我怎样才能添加一些实时事件，它将基于它的类附加到我的元素中？

流程是这样的：

1.打开页面，jQuery 搜索带有 class 的元素order，如果找到，则向它们附加一些内容（对于这个问题，让我们说它的文本"text string"
2.我做一个 ajax 请求
3.在 ajax 请求之后，jQuery 再次搜索 classorder并在找到时追加

有一个条件，我不想在ajax请求之后触发任何搜索元素的.live()函数，如果可能的话，我更喜欢函数的一些魔术。

编辑确切的问题

我真正想要实现的是将 img 附加到新加载的 DOM 中的某个类。
从一开始就：

  1. 我尝试使用 displaytag 和 ajax 实现可排序/可分页的表。

  2. 然后添加（也是 Ajax）搜索列表过滤。

  3. 使用 Ajax 重新加载表格后，附加图像（向上或向下图标取决于排序类型）

结果见我的回答

4

3 回答 3

1
于 2012-07-22T17:18:30.250 回答
0

使用 ajaxComplete 

$('body').ajaxComplete(function() {
  $('.order').text('text string');
  //or if you wish to append
  /*$('.order').append('text string');*/
});
于 2012-07-22T17:22:52.990 回答
0

Firstly, to implement ajax sorting / pagination I used Jquery DisplayTag Ajax pluging, using it is simple, just surround piece of code with div and run displayTagAjax() function on it.

But then, I also wanted Ajaxable table filtering, that was tricky. First step was to create a separate jsp page with only display tag in it:

Table.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://displaytag.sf.net" prefix="display" %>
<display:table class="noSelect" id="modelsList" name="${modelsList}" pagesize="33" cellspacing="0"
           cellpadding="10" requestURI="">
//
//Columns here
//
</display:table>

Then including this page in MainPage:

Main.jsp

<select id="searchbox-model-type>
<!-- options here -->
</select>
<select id="searchbox-domain>
<!-- options here -->
</select>
<!-- some more code -->
<div id="model-list">
    <jsp:include page="Table.jsp"/>
</div>

After this steps, we need to fill up our table, so we need a Controller which will change our jsp page to plain html (with static, not ajaxable links yet):

MyController

@RequestMapping(value = "/ModelListTable/modelTypeId/{modelTypeId}/domain/{domainId}")
public String getTable( Model model, @PathVariable Long modelTypeId, @PathVariable Integer domainId )
{
    if ( modelTypeId != -1 && domainId != -1 )
    {
        model.addAttribute( "modelsList", modelManager.getModelList( modelTypeId, domainId ) );
    } else if ( modelTypeId != -1 )
    {
        model.addAttribute( "modelsList", modelManager.getModelList( modelTypeId ) );
    } else if ( domainId != -1 )
    {
        model.addAttribute( "modelsList", modelManager.getModelList( domainId ) );
    } else
    {
        model.addAttribute( "modelsList", modelManager.getModelList() );
    }
    return "Table";
}

I dont know if it is good piece of code I wrote, but you'll get an idea, basically I'm making select from DB based on the values passed by select, -1 stands for no selected. Next step was to implement proper function in js file, which will make Ajax GET from my server:

jQuery( function ()
{
jQuery.noConflict();

loadTable();
});

function loadTable()
{
    var domainId = jQuery( "#searchbox-domain option:selected" ).val();
    var modelTypeId = jQuery( "#searchbox-model-type option:selected" ).val();
    var url = "/Models/ModelListTable/modelTypeId/" + modelTypeId + "/domain/" + domainId;
    jQuery.ajax( url, {
        type:"GET",
        responseType:"text/html"
    } ).done( function ( data )
        {
            jQuery( "#model-list" ).html( data );
            jQuery( "#model-list" ).displayTagAjax( url );
        } );
}

Then I had to change displayTagAjax function, I append the url which is equal to Controller mapping URI, so we will always get filtered list when sorting/chaning page:

$.fn.displayTagAjax = function ( pageUrl )
{
//omitted some code
  $.each( links, function ()
    {
    var url = pageUrl + $( this ).attr( "href" );
//rest of the code

Finally I appended my images to newly created elements in ajax call, also in this plugin :) :

jQuery.ajax(
    {
       url:url,
       success:function ( data )
       {
         $( this ).html( data );
         $( this ).find( '.order1' ).append( upIcon );
         $( this ).find( '.order2' ).append( downIcon );
         $( this ).displayTagAjax( pageUrl );
       },
       context:ctx
     } );

And thats it, full Ajaxable display tag table, with dynamic filtering results and fancy icons for ordering :)

于 2012-07-22T17:27:35.250 回答