Switch url and title on click

Question

I have a sort bar and I want to cage urls and titles on click. For example this link:

<a href="http://localhost/11/affiliate/?post_type=affiliate&orderby=title&order=asc ">Title ASC</a>

Should change to:

<a href="http://localhost/11/affiliate/?post_type=affiliate&orderby=title&order=desc ">Title DESC</a>

The links should go to the page and then switch to the new link after click.

How is this done? HTML5, Javascript or Jquery?

What does cage mean? You can do this using jquery or javascript. You can toggle the href attribute valuewith script, but it would probably make sense to find the element with an identifier of some sort. Since it is going to another page, you could also send a parameter as query string to the page. — AnotherDeveloper, Aug 25 '15 at 19:15
It sounds like perhaps you are in a class or otherwise studying independently? It would be helpful if you could post a plunkr or jsfiddle to show what your challenge is. But from the little info here, I would create one page which calls the first URL. Since this is a call to a backend server, it would be responsible for updating the URL in the freshly rendered page. — E. Maggini, Aug 25 '15 at 19:15
Have a look here: [How to change href of tag on button click through javascript](http://stackoverflow.com/questions/4365246/how-to-change-href-of-a-tag-on-button-click-through-javascript) — WhiteHat, Aug 25 '15 at 19:15
I still think he missing the thrust of what is needed. If this is a straight call to a server he doesn't need to do anything, since the update should come from the server. If what he is trying to do is an SPA which maintains client-side state......he's gotta whole lotta reading left to do about AJAX and async requests :) — E. Maggini, Aug 25 '15 at 19:17
cage = change. I have a table. The table has a header. I would like users to sort the table using a database query. The query will be title sort asc and title sort desc. If the user clicks Title ASC they will go to the Title asc page and the link will change to Title DESC. — user2821847, Aug 25 '15 at 19:19
If you click on the link, the link is going to navigate away and whatever you do after the click is useless unless you are stopping the page from navigating. — epascarello, Aug 25 '15 at 19:27

score 0 · Answer 1 · answered Aug 25 '15 at 19:25

I am not completly sure if this is it, but you might try and give a feedback, if possible.

<script>
function changeHref(_a) {
    var linkAsc = "http://localhost/11/affiliate/?post_type=affiliate&orderby=title&order=asc";
    var linkDesc = "http://localhost/11/affiliate/?post_type=affiliate&orderby=title&order=desc";

    console.log(_a);
    if (_a.id == "aOne") {
        document.getElementById(_a.id).href = linkDesc;
    } else {
        document.getElementById(_a.id).href = linkAsc;
    }
    return false;
}
</script>

HTML

<a href="http://localhost/11/affiliate/?post_type=affiliate&orderby=title&order=asc" id="aOne" onclick="changeHref(this);">Title ASC</a>
<br />
<a href="http://localhost/11/affiliate/?post_type=affiliate&orderby=title&order=desc" id="aTwo" onclick="changeHref(this);">Title DESC</a>

score 0 · Answer 2 · answered Aug 25 '15 at 19:32

I think this work:

HTML

<a id="link" href="http://localhost/11/affiliate/?post_type=affiliate&orderby=title&order=asc ">Title ASC</a>

JS

$(document).ready(function () {
    if($("#link")[0].textContent == "Title ASC")
    {
        $("#link")[0].textContent = "Title DESC";
        $("#link")[0].href = "http://localhost/11/affiliate/?post_type=affiliate&orderby=title&order=desc"
    }
    else
    {
        $("#link")[0].textContent = "Title ASC";
        $("#link")[0].href = "http://localhost/11/affiliate/?post_type=affiliate&orderby=title&order=asc"
    }
});

I tried all the above and the URl and Title do not switch. I think onclick with visibility might work. Onclck one link appears, another click the link reverts. — user2821847, Aug 25 '15 at 19:42

score 0 · Answer 3 · answered Aug 25 '15 at 20:33

$(document).ready(function () {
$("#a_id").click(function(){

  if($("#a_id").text() == 'Title ASC')
  {
    $("#a_id").attr("href","http://localhost/11/affiliate/?post_type=affiliate&orderby=title&order=desc");
    $("#a_id").text("Title DESC");
  }
  else
  {
    $("#a_id").attr("href","http://localhost/11/affiliate/?post_type=affiliate&orderby=title&order=asc");
    $("#a_id").text("Title ASC");
  }
});
});

<a href="http://localhost/11/affiliate/?post_type=affiliate&orderby=title&order=asc" id="a_id">Title ASC</a>

This will switch Title of link and href when you click the link using JQuery. — Mitre, Aug 25 '15 at 20:34

Switch url and title on click

3 Answers3