CODEWITHSUNDEEP
javascriptajaxjqueryjquery-selectors
anon
anon

Reputation:

jQuery: do something if select element exists

Hey, I looked around on Stack Overflow and tried a few other people's attempts at this, and I just couldn't get this to work.

I have a select element like this:

<select id="slct_firstCat" name="slct_firstCat" size="15">
</select>

This only shows once a specfic AJAX request has completed, so this select element is NOT loaded with the original page's DOM, it is loaded as a seperate AJAX request after the main page has loaded.

I basically want to do this...

if (/* select element exists */) {
  // Then change the colour of a div to green
} else {
  // Change the colour to red
}

But remember, this has to work after the page has loaded. I can click the select to run the JS function if needed.

I tried this code below, but couldn't get it to work:

if ($(".element1").length > 0 || $(".element2").length > 0 {
  // code
}

So basically, if the select element exists, then change the tab colour to green, else change it to red.

Upvotes: 3

Views: 6788

Answers (4)

user492203
user492203

Reputation:

You have to put your code in jQuery.ajax()'s success callback. And the > 0 part isn't needed in $('.element1').length > 0, since—unlike in Ruby—, 0 and "" are also falsy in JavaScript.

jQuery.ajax({
    url: 'example.php',
    success: function () {    
        if ($('#slct_firstCat').length) {
            $('#myDiv').css('color', 'green');
        } else {
            $('#myDiv').css('color', 'red');
        }
});

Upvotes: 5

pconcepcion
pconcepcion

Reputation: 5641

You can try to use something like:

 if ($('select#slct_firstCat').length) {
    // ... stufff....
  }

Upvotes: 2

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18354

You should change the colours when your events happen, i.e. when your ajax call succeeds, starts, or when you trigger another event. Anyway, you could use this code, that isn't the best way to do it, but suits your needs:

$(document).ready(function(){
  setInterval(function(){
      if($("#slct_firstCat").size() > 0)
          $("#divColour").css("backgroundColor", "green");
      else
          $("#divColour").css("backgroundColor", "red");
  }, 100);
});

Upvotes: 1

kobe
kobe

Reputation: 15835

move your if block to ajax success it will work

just giving an example 

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
   if ($(".element1").length > 0 || $(".element2").length > 0 {
  ...stuff...
}
  }
});

Upvotes: 1

Related Questions