CODEWITHSUNDEEP
javascriptjqueryajax
tctc91
tctc91

Reputation: 1363

jQuery .blur on input AND div classes

I have a form with multiple input fields. I'm using a blur function to trigger an AJAX request when ever an input field is clicked out of like so:

$(".innerItems input").blur(function() {
    $.ajax({
        // etc
    });
});

However, I've also built a custom "select menu" using DIVs and jQuery like so:

http://jsfiddle.net/tctc91/gWS2L/

How can I simulate a "blur" so that when the value changes in my custom select menu, the AJAX request is triggered like it normally would if it were an input?

Upvotes: 0

Views: 811

Answers (3)

ShankarSangoli
ShankarSangoli

Reputation: 69915

You can create a custom event say customMenuChanged and trigger it whenever you change the value.

$(".currentMenu li").click(function(e){
    e.preventDefault();
    var $prev = $(this).closest(".currentMenu").prev();

    //Check if the value actually changed or same item is selected
    if($prev.text() != $(this).text()){
         $(document).trigger('customMenuChanged', $(this).text());
    }

    $prev.html($(this).text() + '<span class="dd-arrow"></span>');
});

$(document).bind('customMenuChanged', function(e, data){
     alert("Menu changed " + data);
     //Code here to make ajax request
});

You can bind event to any element you want and trigger it.

Working demo - http://jsfiddle.net/gWS2L/6/

Upvotes: 0

Manse
Manse

Reputation: 38147

You already have a listener on the click event just add the ajax to the bottom of that ?

$(".currentMenu li").click(function(e){
    e.preventDefault();
    $(this).closest(".currentMenu").prev().html($(this).text());
    $(this).closest(".currentMenu").prev().append('<span class="dd-arrow"></span>');
    // ajax here
    doAjaxStuff();
});​

$(".innerItems input").blur(doAjaxStuff);

function doAjaxStuff() {
    $.ajax({
       // etc
    });
}

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337580

You can trigger events on elements programatically by using trigger():

$(".innerItems input").trigger("blur");

So in your code, it would be:

$(".currentMenu li").click(function(e){
    e.preventDefault();
    $(this).closest(".currentMenu").prev().html($(this).text());
    $(this).closest(".currentMenu").prev().append('<span class="dd-arrow"></span>');
    $(".innerItems input").trigger("blur");
});

Upvotes: 1

Related Questions