Codeigniter jquerytools overlay in dynamic content

Question

Hello I'm a bit new to jquery tools and javascript in common. I've tried to google/search this forum, but I probably dont know exactly what to search. Thing is: I have a page which has tabs. Inside one tab when the button is pressed depending os input text it list some records Loads using

myUrl = 'admin/listusers/' + mySearch +'/'+ pageNr +'/';

        $("#userlist").html("<b>Loading user list...</b>"); 
        $("#userlist").load(myUrl); 

the loaded content contains links to be opened in Overlay.

I've tried putting overlay code in all 3 locations (main page html, tab inner html, dynamic content itself) it still does not work, it just open links in the same window, just like regular ones.

Dynamic content also contains another javascript function and it works (used for pagination onclick="pagepress(PageNr):

function pagepress(pageNr) { searchstring = document.getElementById('searchstring');

        if (searchstring.value != '') { 
            mySearch = searchstring.value; 
        } else { 
            mySearch="0"; 
        } 

        myUrl = 'admin/listusers/' + mySearch +'/'+ pageNr +'/'; 

        $("#userlist").html("<b>Loading user list...</b>"); 
        $("#userlist").load(myUrl); 
    } 

What might be wrong? Or maybe someone can give me a tip what to look for?

Thanks

Answer 1

The html, that is loaded dynamically is:

<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"&gt;&lt;/script&gt;

/* use a semi-transparent image for the overlay */

overlay {

/* initially overlay is hidden */
display:none;

/* growing background image */
background-image:url(http://flowplayer.org/tools/img/overlay/white.png);

/* 
    width after the growing animation finishes
    height is automatically calculated
*/
width:600px;        

/* some padding to layout nested elements nicely  */
padding:35px;

/* a little styling */  
font-size:11px;

}

/* container for external content. uses vertical scrollbar, if needed */ .contentWrap { height:460px; width:600px; overflow-y:auto; }

                    <!-- the external content is loaded inside this tag --> 
                    <div class="contentWrap"></div> 

                </div>

$(function() {

// if the function argument is given to overlay, 
// it is assumed to be the onBeforeLoad event listener 
$("a[rel]").overlay({ 

    expose: 'darkred', 
    effect: 'default', 

    onBeforeLoad: function() { 

        // grab wrapper element inside content 
        var wrap = this.getContent().find(".contentWrap"); 

        // load the page specified in the trigger 
        wrap.load(this.getTrigger().attr("href")); 
    } 

}); 

});

function pagepress(pageNr) {
        searchstring = document.getElementById('searchstring');

        if (searchstring.value != '') {
            mySearch = searchstring.value;
        } else {
            mySearch="0";
        }

        myUrl = 'admin/listusers/' + mySearch +'/'+ pageNr +'/';

        $("#userlist").html("<b>Loading user list...</b>");
        $("#userlist").load(myUrl);
    }


<div id="pages">1 | <a href="http://localhost/~olegas/xxx/index.php" onclick="pagepress(1);return false;">2</a> | <a href="http://localhost/~olegas/xxx/index.php" onclick="pagepress(2);return false;">3</a> | </div>

<div id="admin-user-table">
     <table width="100%"  border="0" cellspacing="0" cellpadding="0" style="text-align:center;">

EditLoginEmailFirst nameLast nameCompany namePhoneCurrencyCountry

<tr class="left-table-border"><td><a href="http://localhost/~olegas/xxx/index.php/admin/edit_user/1" rel="#overlay">Edit</a></td><td>admin</td>td>[email protected]</td><td></td><td></td><td></td><td></td><td></td>td></td></tr>