Question

Lets say I may (but also may not) have an element with class order in my DOM.
It maybe create on page load but also, after successful ajax request. My question is, how can I add some live event, that will append something to my element based on it class?

Flow would be like this:

1.Opening page, jQuery searchs for elements with class order, if found, appends something to them (for this question lets say its text "text string"
2.I do an ajax request
3.After ajax request jQuery searchs again for class order and append if found

There is one condition, I DON’T want to trigger any function searching for elements after ajax request, I’d prefere some magic trick with .live() function, if it is possible of course.

EDIT Exact problem

What I was really trying to achive, is appending an img to certain class within newly loaded DOM.

From the beginning:

1. I tried to implementing sortable/paginable table with displaytag and ajax.

2. Then adding (also Ajax) search list filtering.

3. After table is reloaded with Ajax, append images (up or down icon depending on sorting type)

See my answer for results

Answer 1

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 🙂