Changing url using javascript and jquery

Question

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.

• Ilyas karim: When i use location.hash feature

Answer 1

You need to use history.pushstate() to do this.

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

Have a look at this article on MDN for more details https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

This article gives some nice jQuery examples. https://rosspenman.com/pushstate-jquery

• Ilyas karim: How can is remove the data which i've written using push state.
• David Bradshaw: Not sure I follow your question, this just changes the URL, whilst keeping you on the same page.
• Ilyas karim: Let i have a url wapgee.com/index.php i changed it to wapgee.com/index.php/game/12 now i want to change it as deafult wapgee.com/index.php. How can i achieve this using push state
• David Bradshaw: history.pushState({},'','index.php')
• Ilyas karim: What is second parameter of pushState.

Answer 2

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

Answer 3

Change

location.hash = a[0];

to:

location.pathname += '/' + a[0];

• Ilyas karim: It works but the page redirects and it shows 404 NOT FOUND error message.
• Barmar: If you want to change the URL without actually redirecting, you probably need to use the History API, as in @DavidBradshaw's answer.
• Ilyas karim: Yeah DavidBradshaw's answer helped me

Answer 4

Just replace the hash with a blank using .replace()

Example .

settings.fileUrl.replace('.' , ' ');
Updated above also 

UPDATE :

Don't hash the URL

Example :

 $.fn.loadFile = function () {
 // setting location;
 var a = settings.fileUrl.replace("." , "/");
 location.href = a;
 $.post(settings.fileUrl, function(response) {
 $(settings.loadOn).html(response);
 });
 }
}

• Barmar: There's no # in settings.fileURL. The hash is coming from the assignment to location.hash.