jQuery .click not working in if/else statement

Question

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!

That code really doesn't make much sense; what do you expect that to do? Returning some value like that from an event handler doesn't mean much. — Pointy
– Pointy, Commented Jan 22, 2013 at 14:52
The first spans id should be bigdrop_set or am i wrong? and the first click function should be #bigdrop_set ? — Anton
– Anton, Commented Jan 22, 2013 at 14:53
Do you really have two <span id="bigdrop_set_2"> in your code? — Blazemonger
– Blazemonger, Commented Jan 22, 2013 at 14:55

Darren · Accepted Answer · 2013-01-22 14:54:15Z

1

 $(".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);
})

answered Jan 22, 2013 at 14:54

Darren

71.2k24 gold badges141 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

po.studio Over a year ago

i've replace my code with this alert function and added a section for #bigdrop_set_2. i have the alert successfully displaying the appropriate value when each link is clicked. however, i can't replace the alert with 'replace' to fill the select box with these venue values. thoughts on why return isn't working in this scenario? thanks!

Darren Over a year ago

@PaulOsetinsky to change the select box with the values you would have to do something like: $("#dropdownlist").val(venue);

Varinder Singh · Accepted Answer · 2013-01-22 14:55:44Z

0

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.

answered Jan 22, 2013 at 14:55

Varinder Singh

1,6201 gold badge12 silver badges27 bronze badges

1 Comment

po.studio Over a year ago

no, i did mean #bigdrop_set. just edited. think the answer may be in Darren Davies' response. looking closer now

po.studio · Accepted Answer · 2013-01-22 17:08:57Z

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;
  }
}

Collectives™ on Stack Overflow

jQuery .click not working in if/else statement

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related