Ilyas Dattoo Ilyas Dattoo - 6 months ago 8
jQuery Question

Changing url using javascript and jquery

Hello there

I am developing a jQuery plugin that loads files through ajax. When user clicks on a button which is:

<button class='btn btn-info' data-load="ajax" data-file="ajax/login.html" >Login</button>


When user clicks on button it generates following url:

http://localhost//plugins/ajaxLoad/index.html#ajax/Login


I want to change it to

http://localhost//plugins/ajaxLoad/index.html/ajax/Login


My javascript is:

(function ($) {
$.fn.ajaxLoad = function (options) {
var settings = $.extend({
fileUrl : 'null',
loadOn : '.em'

}, options);
$('[data-load="ajax"]').each(function(index, el) {
$(this).click(function () {
var file = $(this).attr('data-file');
var loadOn = $(this).attr('data-load-on');
var permission = $(this).attr("data-ask-permission");
settings.fileUrl = file;
settings.loadOn = loadOn;
if (permission == 'yes') {
var ask = confirm("Do you want to load file");
if (ask == true) {
$.fn.loadFile();
}
}else {
$.fn.loadFile();
}
});
});
$.fn.loadFile = function () {
// setting location;
var a = settings.fileUrl.split(".");
location.hash = a[0];
$.post(settings.fileUrl, function(response) {
$(settings.loadOn).html(response);
});
}
}
}(jQuery))


Can anyone tell me how to change url in jquery and Javascript.

Answer

Added another attribute title to button

<button data-title="login" class='btn btn-info' data-load="ajax" data-file="ajax/login.html" >Login</button>

In Js (after $(this).click line):

var title = $(this).attr('data-title');
settings.title = title

Just replace

location.hash = a[0];

With

history.pushState('','',"?"+settings.title);