jQuery , Ajax and Live Function issues

Question

I'm aware that if you load a div within a page with form elements using ajax, then you gotta use the live function to add events to those elements that were not in the dom tree....

And also I read in the jQuery website that live function does not currently support focus, blur etc....

What should I do to invoke a function when an element loaded into a div through ajax is focused or blurred...?

Is it something that should be done with bind...? but talking about bind, even though live and bind looks a little alike, it can't be used in the above mentioned scenario... right...?

and here goes the code....

<BODY style="">

    <div style="margin-top:5px; width:100%" class="subAndContent" id="subAndContent">
        <!-- TABLE TO HOLD SUB MENU-->
        <div id="subMenuDiv">
            <table width="100%" >
                <tr align="center" valign="middle">

                    <td width="100%" valign="middle"  class="rounded"  >

                        <div class="sidebarmenu">
                            <ul id="sidebarmenu1">
                                <li>
                                    <a href="javascript:ajaxLoadMainOnly('createHotel.php', 'content')" > <!-- This function get's the page to be loaded and the div into which it should be loaded and uses ajax to do the loading... -->
                                        HOTEL
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:ajaxLoadMainOnly('createCountry.php', 'content')" >
                                        COUNTRY
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:ajaxLoadMainOnly('createCity.php', 'content')">
                                        CITY
                                    </a>
                                </li>
                            </ul>
                        </div>

                    </td>
                </tr>
            </table>  <!-- END TABLE TO HOLD SUB MENU-->
        </div>

        <div id="contentDiv" class="rounded">
            <!-- TABLE TO HOLD CONTENT PANE-->
            <table width="100%" style="float:left;">
                <tr valign="left">
                    <td align="center">
                        <div id ="content">
                           <!-- Div into which the content will be loaded -->
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <!-- DIV AND TABLE TO HOLD FOOTER -->
    <?php
    include 'footer.php';
    ?>


</BODY>

It's a bit hard to read with all the "u" and "r" and no capital letters. :-) — Nosredna, Nov 18 '09 at 04:45
Oops...!! My Bad...!! Will be more clear from now on... thanks for the pointer... :) — SpikETidE, Nov 18 '09 at 05:05

score 1 · Accepted Answer · edited Dec 10 '11 at 14:43

You have to get hold of the elements that are loaded dynamically and then add the focus and blur handlers using bind. For example, if you want to add the handlers to a textarea with class "longtext", you might use something like:

$.getJSON('createHotel.php', { /* params go here */ }, receiveHotelCreated);

function receiveHotelCreated(data) {
    $('#content textarea.longtext').bind('blur', onTABlur);
}

function onTABlur() {
    var ta = $(this);  // The textarea on which the blur event occurred
    alert('Textarea blurred');
    // Your code goes here
}

The onTABlur (TA = text area) function is to be called when the focus leaves the textarea. Inside the function, this refers to the element the function is invoked for. As we bind it to the text area when we receive the AJAX response (receiveHotelCreated), this is going to be the desired text area element. We wrap this in the jQuery function ($(this)) to get some extra functionality.

Thanks for the suggestions... I'll try both of them out and get back to you soon... — SpikETidE, Nov 18 '09 at 05:31
Hi Tom, Can u please elaborate about the onTABlur function, especialy $(e.target).....? — SpikETidE, Nov 18 '09 at 12:49
Remember you promised to write "you" instead of "u" ;-) I removed `$(e.target)` as you do not really need it here, I guess that was a bit confusing. What specifically is unclear about `onTABlur()`? — Tom Bartel, Nov 18 '09 at 13:54

score 0 · Answer 2 · answered Nov 18 '09 at 04:43

0

I believe I read that the next version of jQuery (1.4) covers the remaining events with Live.

But for now, with 1.3, you need to use bind (or the shortcuts like "click"). And yeah, if you add elements to the page and Live won't work for what you're doing, you need to bind on the added content.

The documentation for "Live" is a good place to start. I think you can still use the liveQuery plugin if you want to handle the events Live doesn't handle yet.

answered Nov 18 '09 at 04:43

Nosredna

83,000
15
95
122

can u please point to some examples...? i was under the impression that bind won't do what i wanted to.... – SpikETidE Nov 18 '09 at 04:46
i thought bind won't do because i din't think it will for elements that have been loaded with ajax separately... – SpikETidE Nov 18 '09 at 04:48
Do you have any code so I can see what's not working for you? I'm not sure how you're loading new content in. – Nosredna Nov 18 '09 at 04:51
i want to invoke functions on focus event..took a look at livequery and will it support live with focus and blur...? – SpikETidE Nov 18 '09 at 05:02

btelles · Answer 3 · 2009-11-18T05:25:31.023

Here's a quick example:

This unbinds and rebinds the focus events every time you call an ajax request. The unbinding is just to be safe and make sure there aren't any leftover events.

$(document).ready(function() {
    focusEventFunction();
    ajaxLoader();
}

function ajaxLoader();

  $('#sidebarmenu1 a').unbind().bind('click', function(event){

    $.get('url_to_get.php', function(data) {

        // CODE THAT REPLACES DIVS AND DATA

        //The following has to be inside the ajax callback and 
        //after the code that changes divs. this will remap all the functions 
        //that bind the focus.

        $('selector_for_elements_needing_focus').unbind().bind('focus', function(event){
          focusEventFunction($(this), event)

          ajaxLoader();    //this ensures your ajax gets called again, 
                           //depending on the complexity of the html changes
                           //you may not need this.
        }
}


function focusEventFunction(jElement, event) {
  //just a dummy function that does your focus/blur stuff.
  // you might not need the parameters
}

jQuery , Ajax and Live Function issues

3 Answers3