Hello...

I am trying to change the parameter for a class of links I have on a page. Example:


<a href="test.php?p1=DYNA123&p2=STATIC_ON" class="changeMe">abc123</a>
<a href="test.php?p1=DYNA321&p2=STATIC_ON" class="changeMe">abc321</a>

<a href="#" onclick="changeStatic();return false;">change urls</a>

I would like to use javascript/jquery to change the p2 parameter for all links with the class "changeMe" so it would equal "STATIC_OFF" when the "change urls" link is clicked. I found a couple of examples going by the href id.

function changeStatic(){
  var allLinks = $('.changeMe').attr('href');
  var res = allLinks.replace('p2=STATIC_ON', 'p2=STATIC_OFF');
}

The above doesn't work...maybe I'll have to do some type of explode on href and find that param and replace it.

I appreciate any insight.

Thanks,
j

    Shouldn't even need JQuery:

    function changeStatic(){
  var allLinks = document.getElementsByClassName("changeMe");
  for ( var i = 0; i < allLinks.length; i++ ) {
      var myStr = allLinks[i];
      var str2 = myStr.href;
      var newStr = str2.replace("STATIC_ON","STATIC_OFF");
      myStr.href = newStr;
   }
  }

    ??

      Thanks for the response... that would work but I realized I need to write my href's w/ an onClick event b/c they're triggering an AJAX call. So, I'll need to change the param in the onClick event. So.. that .href property won't work. I got caught up in the function I forgot it had to be an onClick event.

      <a href="#" onClick="myAjaxFunc('test.php?p1=DYNA123&p2=STATIC_ON', 'msgDiv');" class="changeMe">abc123</a>
<a href="#" onClick="myAjaxFunc('test.php?p1=DYNA321&p2=STATIC_ON', 'msgDiv');" class="changeMe">abc321</a>

      Would I be better off doing something like: href="javascript:myAjaxFunc('...'); return false;")>abc123</a>? That way I can still utilize the href property?

        jeepin81;11050755 wrote:

        Thanks for the response... that would work but I realized I need to write my href's w/ an onClick event b/c they're triggering an AJAX call. So, I'll need to change the param in the onClick event. So.. that .href property won't work. I got caught up in the function I forgot it had to be an onClick event.

        Would I be better off doing something like: href="javascript:myAjaxFunc('...'); return false;")>abc123</a>? That way I can still utilize the href property?

        I'm guessing the purist answer to the last question is "no". I'm getting a little lost on your problem, though. Perhaps you need setAttribute? Or you could feed the new URL to your function?

          I'm just wondering why you are doing this in Javascript rather than altering your code's output in the first place?

            sneakyimp;11050761 wrote:

            I'm just wondering why you are doing this in Javascript rather than altering your code's output in the first place?

            Because he doesn't know in advance which links the user will pick that he needs to operate on? I'm assuming, I guess, that the layout allows for only one link, rather than two.

              OR why you don't just attach an event handler for onclick to the things that match the selector:

              document.getElementsByClassName("changeMe").map(function(link) {
    link.addEventHandler('click', function(event) {
        // do something now that the user has clicked on the element
    });
});

                It similar to a cart... as Dale said I don't know which link will be selected. When I get the URL's param2 = STATIC_ON I want to initiate a few things and and during my success response with AJAX set the all the links param2's to STATIC_OFF so during their next selection I'll know not to run the initiation process. After reading & typing this out I think this will be better handled with a $_SESSION variable to indicate if things have been initiated or not. :bemused:

                Thanks for the responses...

                  jeepin81;11050767 wrote:

                  It similar to a cart... as Dale said I don't know which link will be selected. When I get the URL's param2 = STATIC_ON I want to initiate a few things and and during my success response with AJAX set the all the links param2's to STATIC_OFF so during their next selection I'll know not to run the initiation process. After reading & typing this out I think this will be better handled with a $_SESSION variable to indicate if things have been initiated or not. :bemused:

                  Thanks for the responses...

                  I was just thinking it seems a bit weird to be doing a bunch of modification to your DOM via javascript search/replace/whatever rather than creating some function that all of your links call upon which is aware of the necessary document state. I realize that each link might encode numerous parameters in its link, but I personally would probably tend toward some approach that used a custom data structure rather than trying to parse/massage the links. I find that it can be messy to try and add/remove event listeners and hrefs -- especially when these are assigned via anonymous function.

                  Given this last post, I wonder if you might be able to maintain some sense of state in Javascript or whether this state concept has to be enforced on the server side.

                    Write a Reply...