Event trigger on object exists

Question

I have this code:

$('#name').blur(function(){
  $('#usernameLoading').show();
  $.post("check", {
    name: $('#name').val(),
    platform: $('#platform').val()
  }, function(response){
    $('#usernameResult').fadeOut();
    setTimeout("finishAjax('usernameResult', '"+escape(response)+"')", 400);
  });
  return false;
});

I want to instead change it to simply if #name exists, not on blur. I tried .is('*') but got a syntax error, since I assume it's not an actual event handle?

What's a simple way to accomplish this?

Also, possible duplicate of this; http://stackoverflow.com/questions/8560819/fire-an-event-using-jquery-on-when-element-created — Alexander Kuzmin, Jun 29 '13 at 23:00
Just a suggestion, not answer to your question: indent every scope in your javascript, otherwise it will get unmanageable and unreadable very soon with all the nested callbacks. Rock on! — Lex Podgorny, Jun 29 '13 at 23:01
@AlexanderKuzmin Sure, if that also handles conditions where the element already existed on page load. — Zeno, Jun 29 '13 at 23:03
@Ohgodwhy What's the full syntax if I'm to do the `function(){`... part after it? — Zeno, Jun 29 '13 at 23:04

score 2 · Accepted Answer · answered Jun 29 '13 at 23:14

2

if ($('#name').length > 0) {
    $('#usernameLoading').show();
    $.post("check", {
        name: $('#name').val(),
        platform: $('#platform').val()
    }, function (response) {
        $('#usernameResult').fadeOut();
        setTimeout("finishAjax('usernameResult', '" + escape(response) + "')", 400);
    });
}

That is, create a jQuery object with the selector #name', and then test that its .length is not zero. You can shorten that to:

if ($('#name').length) {

...because a non-zero .length is truthy.

answered Jun 29 '13 at 23:14

nnnnnn

147,572
30
200
241

What's the impact of not using `function(){` ...? – Zeno Jun 29 '13 at 23:17
It doesn't make sense to use `function() {`? If you are binding an event handler, like your original `.blur()`, then you have to have a function - jQuery calls that function when the event happens. But as you've stated you no longer want to run the code in response to an event, you just want to run it if the element exists, so a simple `if` test is sufficient. – nnnnnn Jun 29 '13 at 23:19
P.S. The above code would need to be wrapped in a `$(document).ready(function() {...})` handler, and/or placed in a script block at the end of the body, but that would've been true of your original `.blur()` code too so just put it in the same place. I'm assuming that if the `#name` element does exist it will be there when the page first loads - you're not talking about an element that is added dynamically after the page loads are you? – nnnnnn Jun 29 '13 at 23:25
This code won't work on elements added dynamically after page load, so be ready for that. – Alexander Kuzmin Jun 30 '13 at 10:49
@AlexanderKuzmin - Sure it will, if it's executed after the elements are added, it all depends where you put it. But in any case I asked the OP about that in my previous comment... – nnnnnn Jun 30 '13 at 11:40

score 1 · Answer 2 · answered Jun 29 '13 at 23:42

You still to put this code inside some sort of event handling function if your <script type='text/javascript'> is not at the bottom of your <body>. Try something like:

if($('#name')){
  $('#usernameLoading').show();
  $.post('check', {name: $('#name').val(), platform: $('#platform').val()}, function(response){
    $('#usernameResult').fadeOut();
    setTimeout(function(){
      //need your usernameResult and response to be dealt with here
    }, 400);
  });
  return false;
}

You should notice I changed your executed function that you passed into setTimeout(). You cannot send an executed function into a parameter like that, unless you want it to execute on the spot. You could, however, create your finishAjax method then pass it without a parameter like:

setTimeout(finishAjax, 400);

Unfortunately, setTimeout() does not have an argument which you could pass a function argument to. To understand what I'm talking about review the following:

function lameFunc(func, funcArg){
  return func(funcArg);
}
function lameQuote(q){
  return q;
}
var whatever = lameFunc(lameQuote, 'var whatever is now this String');

That was an example of a function that passes an argument into another function. You could exchange lameQuote with an Anonymous Function and still pass it an argument, like:

var someVar = lameFunc(function(arg){return arg;}, 'This String Will Go In arg and, therfore, someVar');

That's how setTimeout() works internally, except that it does not take another argument that can be passed into your function, so It's more like:

function lameFunc(func){
  return func();
}

Of course, there are obviously more differences, but this should teach you something.

Note that `if($('#name')){` will _always_ be truthy (even when the element doesn't exist). Regarding the timeout, OP is passing a string to `setTimeout()`; the code in the string will not be executed immediately. But `setTimeout(function(){finishAjax('usernameResult', escape(response));}, 400);` should also work because `response` would still be in scope - and this avoids the less-than-best practice of passing a string. — nnnnnn, Jun 29 '13 at 23:57

Event trigger on object exists

2 Answers2