0

orderDOMにクラスを持つ要素があるかもしれない（しかし持っていないかもしれない）としましょう。ページの読み込み時に作成される可能性がありますが、ajaxリクエストが成功した後にも作成されます。私の質問は、クラスに基づいて要素に何かを追加するライブイベントを追加するにはどうすればよいですか？

フローは次のようになります。

1.ページを開くと、jQueryはクラスを持つ要素をorder検索し、見つかった場合はそれらに何かを追加します（この質問では、そのテキストを言います"text string"
2.ajaxリクエストを実行します3.ajaxリクエストの後、
jQueryはクラスorderを再度検索し、見つかった場合は追加します

1つの条件があります。ajaxリクエストの後に要素を検索する関数をトリガーしたくないのです.live()が、もちろん可能であれば、関数を使った魔法のトリックをお勧めします。

正確な問題を編集する

私が実際に達成しようとしていたのは、新しくロードされたDOM内の特定のクラスにimgを追加することです。
最初から：

  1. displaytagとajaxを使用してソート可能/ページ可能テーブルを実装しようとしました。

  2. 次に、（Ajaxも）検索リストフィルタリングを追加します。

  3. テーブルにAjaxをリロードした後、画像を追加します（並べ替えの種類に応じて上または下のアイコン）

結果については私の答えを参照してください

4

3 に答える 3

1
于 2012-07-22T17:18:30.250 に答える
0

Make use of the 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 に答える