CODEWITHSUNDEEP
javascriptjqueryhtmlclick
po.studio
po.studio

Reputation: 4127

jQuery .click not working in if/else statement

I have a connection to the Foursquare API in my application. The user can type in a box to start searching for venues, or they can click one of two venue links to fill the same select box with one of those two venues. I'm having trouble letting the user click one of either two venues in. Here is my code:

JS:

function venueFormatSelection(venue) {

  if ( venue.name && venue.location.address ) {
    // if a user starts typing into a box, venue.name and venue.address values will  pop up for them to select from. OR in the 'else' case, they can click one of either two links
  else {

    $("#bigdrop_set").click(function () {
      return $('#bigdrop_set').attr('venue_name')
    })

    $("#bigdrop_set_2").click(function () { 
      return $('#bigdrop_set_2').attr('venue_name_2')
    })

  }
}

HTML:

<span class="which_venue" id="bigdrop_set" venue_name='foo' venue_data='FOO'><%= link_to(FOOOOO) %></span>

<span class="which_venue" id="bigdrop_set_2" venue_name_2='bar' venue_data_2='BAR'><%= link_to(BARRRR) %></span>

For some reason, the "click to populate" JS only works if just ONE of the 'return' lines is included without the .click function:

return $('#bigdrop_set').attr('venue_name')

What's wrong with the code inside my "else" statement? Thanks!

Upvotes: 1

Views: 503

Answers (3)

po.studio
po.studio

Reputation: 4127

I found a fix by using a global variable. Doubt it's the cleanest approach, but it's working for now:

$("#bigdrop_set").click(function () { 
  window.clickVenue = $('#bigdrop_set').attr('venue_name');
  $(".bigdrop").select2("val", $('#bigdrop_set').attr('venue_data'));
});

$("#bigdrop_set_2").click(function () { 
  window.clickVenue = $('#bigdrop_set_2').attr('venue_name_2');
  $(".bigdrop").select2("val", $('#bigdrop_set_2').attr('venue_data_2'));
});

function venueFormatSelection(venue) {

  if (venue.name && venue.location.address) {
    var imageSource = venue.categories[0].icon.prefix.slice(0, -1) + venue.categories[0].icon.suffix;
    return "<img src='" + imageSource + "' height='20' width='20' />" + "   " + venue.name + " (" + venue.location.address + ")";
  }
  else {
    return window.clickVenue;
  }
}

Upvotes: 0

Varinder Singh
Varinder Singh

Reputation: 1590

You have something like 

$(".bigdrop_set").click(function () {
  return $('#bigdrop_set').attr('venue_name')
})

Did you really mean css class selector .bigdrop_set and then id selector #bigdrop_set.

Upvotes: 0

Darren
Darren

Reputation: 70728

 $(".bigdrop_set").click(function () {
  return $('#bigdrop_set').attr('venue_name')
  })

Should be:

$("#bigdrop_set").click(function () {
  return $('#bigdrop_set').attr('venue_name')
 })

As you are selecting an element with the ID bigdrop_set not an element with the class bigdrop_set. ID's should be unique, in your code you have duplicate bigdrop_set ID's which should be changed.

Also I would suggest binding the click elements on the $(document).ready() function, not in the venueFormatSelection function.

Returning the value from the click function doesn't really make much sense either. Either manipulate the value directly in the function or put it in another function itself, not on the click event.

For example:

function alertVenue(venue) {
   alert(venue)
}

$("#bigdrop_set").click(function () {
   var venue = $('#bigdrop_set').attr('venue_name')
   alertVenue(venue);
})

Upvotes: 1

Related Questions