DN0300 DN0300 - 4 months ago 7
jQuery Question

After Ajax call data-id in the url doesn't change

I am outputting multiple dynamic links which use the same

<a>
. My AJAX call loads the content of all the links fine but URL always displays the id of the first link. How can I get it to change the id in the url as the different links are clicked?

$string .= '<a class="hrefid" data-id="'.$name["id"].'" href="#link">'.$name["name"].'</a>'.


<div id="content"></div>


$('.hrefid').on('click', function (e) {
var load = $(e.target).attr("href");
if(load == "#link") {
$.ajax({
type: 'post',
url: "/page/test/"+$(this).parents("[data-id]").attr("data-id"),
complete: function (event) {
$("#content").contents().remove();
$("#content").append(event.responseText);
history.replaceState({}, "", "link"+$('[data-id]').first().attr('data-id'));

}
});
}
});

Answer

Here is the solution...

$('.hrefid').on('click', function (e) { var $this = $(this); var load = $(e.target).attr("href"); if(load == "#link") { $.ajax({ type: 'post', url: "/page/test/"+id, complete: function (event) { $("#content").contents().remove(); $("#content").append(event.responseText); history.replaceState({}, "", "link" + $this.attr('data-id')); } }); } });

Comments