Home/ Questions/Q 3229108
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T16:46:20+00:00

Using JQuery, and still a little new to it, trying to change an Link

  • 0

Using JQuery, and still a little new to it, trying to change an Link into a Drop Down of options, whi8ch the user can select from, and upon selecting a choice, it returns to a hyperlink with the text of the selection.

So far, I have:

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

The HTML is as follows:

<a href='#' class='timeChange'>Mon, 13 Sep 2010 04:20:45 -0700</a>

The data that is returned from the AJAX call is:

<select id="selectTimeStamp">
   <option value='1284445245'>Mon, 13 Sep 2010 23:20:45 +1200</option>
   <option value='1284441645'>Mon, 13 Sep 2010 22:20:45 +1100</option>
   <option value='1284438045'>Mon, 13 Sep 2010 21:20:45 +1000</option>
   <option value='1284434445'>Mon, 13 Sep 2010 20:20:45 +0900</option>
   <option value='1284430845'>Mon, 13 Sep 2010 19:20:45 +0800</option>
   <option value='1284427245'>Mon, 13 Sep 2010 18:20:45 +0700</option>
   <option value='1284423645'>Mon, 13 Sep 2010 17:20:45 +0600</option>
   <option value='1284420045'>Mon, 13 Sep 2010 16:20:45 +0500</option>
   <option value='1284416445'>Mon, 13 Sep 2010 15:20:45 +0400</option>
   <option value='1284412845'>Mon, 13 Sep 2010 14:20:45 +0300</option>
   <option value='1284409245'>Mon, 13 Sep 2010 13:20:45 +0200</option>
   <option value='1284405645'>Mon, 13 Sep 2010 12:20:45 +0100</option>
   <option value='1284402045'>Mon, 13 Sep 2010 11:20:45 +0000</option>
   <option value='1284398445'>Mon, 13 Sep 2010 10:20:45 -0100</option>
   <option value='1284394845'>Mon, 13 Sep 2010 09:20:45 -0200</option>
   <option value='1284391245'>Mon, 13 Sep 2010 08:20:45 -0300</option>
   <option value='1284387645'>Mon, 13 Sep 2010 07:20:45 -0400</option>
   <option value='1284384045'>Mon, 13 Sep 2010 06:20:45 -0500</option>
   <option value='1284380445'>Mon, 13 Sep 2010 05:20:45 -0600</option>
   <option SELECTED value='1284376845'>Mon, 13 Sep 2010 04:20:45 -0700</option>
   <option value='1284373245'>Mon, 13 Sep 2010 03:20:45 -0800</option>
   <option value='1284369645'>Mon, 13 Sep 2010 02:20:45 -0900</option>
   <option value='1284366045'>Mon, 13 Sep 2010 01:20:45 -1000</option>
   <option value='1284362445'>Mon, 13 Sep 2010 00:20:45 -1100</option>
</select>

When the link is clicked, I get no error, yet the link does not become a drop down. I see the GET request via FireBug and it’s returning the data, Status 200 OK 44ms. After I OK the Alert window, I see no change and no errors. Thanks for any help or advice you might be able to provide.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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).

    • 0