Jquery , Ajax and Live Function issues....

Question

Hi y'all....

got a question.....!!

i'm aware that if u r loading a div within a page with form elements using ajax, then u 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....

my question is what i gotta 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....

<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';
?>

thanks in advance....

Answer 1

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.

Answer 2

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
}

Answer 3

SpikETidE,

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.

Cheers, Tom

Answer 4

And Also.. check out this cool workaround by JP ... Great Work...

http://stackoverflow.com/questions/1199293/simulating-focus-and-blur-in-jquery-live-method/1199651#1199651