ansaurus

Question

Convert A to SELECT upon Click Event with JQuery

Answer 1

A:

It's because this doesn't refer to the link in the $.get() success callback (it refers to the jQuery ajax object), you need to keep a reference to the anchor you clicked, like this:

$("a.timeChange").live("click", function(e){
    e.preventDefault();
    var link = $(this), $stamp = link.text();
    $.get("tstampoffsetter.php", { t: $stamp, a: 1 }, function(data){
       link.replaceWith(data);
    });
});
$("#selectTimeStamp").live("change", function(){
    var i = $("#selectTimeStamp :selected").text();
    $(this).replaceWith("<a href='#' class='timeChange'>" + i + "</a>");
});

The this change fixes the first problem, as per your comment the second is binding to newly created elements you'll need to use .live() and when re-creating the link be sure it has the timeChange class (so the .live() selector matches).

Nick Craver 2010-09-30 21:34:22

Thanks Nick! This fixed that first function. My second function is not applying to the new SELECT object. Do I need to attach that after I replace?

Twisty 2010-09-30 21:39:41

@Twisty - Oh, use `.live()` for that, e.g. `$("#selectTimeStamp").live("change", function(){` for the select, `$("a.timeChange").live("click", function(e){` for the anchor, I'll update in a moment.

Nick Craver 2010-09-30 21:40:48

Thanks! Perfect fix for that. Guffa beat you to it. All working just as I wanted.

Twisty 2010-09-30 21:46:07

@Twisty - Be careful, his solution and your original code doesn't add the `timeChange` class back, clicking the link again (created by the select going away) won't work :) Make sure to add the class back!

Nick Craver 2010-09-30 21:47:15

You're right, I missed that. Was scratching my head at why it was not working a second time. New code:

Twisty 2010-09-30 21:55:45

$("a.timeChange").live('click', function(e){ e.preventDefault(); var link = $(this), $stamp = $(this).text(); $.get("tstampoffsetter.php", { t: $stamp, a: 1 }, function(data){ link.replaceWith(data); }); }); $("#selectTimeStamp").live('change', function(){ //var i = $("#selectTimeStamp :selected").text(); var selObj = $(this); selObj.replaceWith("<a href='#'>" + $("#selectTimeStamp :selected").text() + "</a>"); });

Twisty 2010-09-30 21:56:51

Copied the wrong version of the code: $("#selectTimeStamp").live('change', function(){ var i = $("#selectTimeStamp :selected").text(); var selObj = $(this); selObj.replaceWith("<a href='#' class='timeChange'>" + $("#selectTimeStamp :selected").text() + "</a>"); });

Twisty 2010-09-30 21:57:48

Any thoughts on reverting the event if the user clicks off the Select object? E.G User clicks on link, and then clicks on another section of the page.

Twisty 2010-09-30 23:24:16

@Twisty - Change `.live("change"` to `.live("change blur"` so it fires on both events.

Nick Craver 2010-09-30 23:39:02

No go with the following code: $("#selectTimeStamp").live('change blur', function(event){ if(event.type == 'blur'){ return false; } var i = $("#selectTimeStamp :selected").text(); var selObj = $(this); selObj.replaceWith("<a href='#' class='timeChange'>" + $("#selectTimeStamp :selected").text() + "</a>"); });--- Will keep poking at it, I think you gave me the right direction.

Twisty 2010-09-30 23:52:13

@Twisty - If you want to put the link back whenever clicking of the `<select>` I'd just remove that if check and `return false` portion.

Nick Craver 2010-09-30 23:53:18

@Nick - Tried it a few ways, just doesn't seem to catch the blur event: $("#selectTimeStamp").live('change blur', function(){ var selObj = $(this); selObj.replaceWith("<a href='#' class='timeChange'>" + $("#selectTimeStamp :selected").text() + "</a>"); return false; });

Twisty 2010-10-01 00:15:05

Answer 2

A:

You can use the live method, so that the events will also be attached to elements that doesn't exist yet:

$("a.timeChange").live('click', function(e){
    e.preventDefault();
    var $link = $(this)
    $.get("tstampoffsetter.php", { t: $link.text(), a: 1 }, function(data){
        alert(data);
        $link.replaceWith(data);
    });
});
$("#selectTimeStamp").live('change', function(){
    var text = $("#selectTimeStamp :selected").text();
    $(this).replaceWith('<a href="#">' + text + '</a>');
});

Guffa 2010-09-30 21:39:07

Guffa! You and Nick rocked it! Thanks, using .live() worked perfectly for the functions that would attach to the new Select Object.

Twisty 2010-09-30 21:44:52

ansaurus

tags:

views:

answers:

Convert A to SELECT upon Click Event with JQuery

related questions