Have Geek Brain

Overlay jquerytools on Codeigniter in dynamic content

I am a bit new to jquery tools and javascript. I've tried google / searching this forum, but I'm probably not sure exactly what to look for. The point is: I have a tabbed page. Within one tab, when the button is clicked depending on the text input, it lists some entries Loading using

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

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

the loaded content contains links to open in Overlay.

I've tried putting the overlay code in all three places (main html page, inner html tab, dynamic content itself), it still doesn't work, it just opens links in the same window as normal.

Dynamic content also contains another javascript function and 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 could be wrong? Or maybe someone can give me a hint what to look for?

thanks

+2


a source to share


2 answers


This is what I did to solve my problem.

<script>
    $(function () {
        var overlayElem;
        $("a.overlayLink").live("click", function (e) {
            e.preventDefault();
            overlayElem = $(this);
            overlayElem.overlay({ mask: 'lightgray', effect: 'apple',
                onBeforeLoad: function () {
                    //do something on load
                },
                onClose: function () {
                    //do something on close
                },
                load: true
            });
        });


        $("#save").click(function () {
            //do something
            $.ajax({
                type: "POST",
                url: "some service",
                data: "{some data}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    //do something when success
                    overlayElem.overlay().close();
                },
                failure: function (msg) {
                    //do something when fail
                }
            });
        });
    });
</script>


I hope this helps someone else =)

+1


a source


Loadable html speaker:

<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>

           / * use a semi-transparent overlay image * /

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 a vertical scrollbar if needed * / .contentWrap {Height: 460 pixels; 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>admin@localhost.com</td><td></td><td></td><td></td><td></td><td></td>td></td></tr>
0


a source






More articles:


All Articles