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.

When i use location.hash feature

Ilyas karim
– Ilyas karim

2016-06-03 19:12:50 +00:00
Commented Jun 3, 2016 at 19:12 — Ilyas karim
– Ilyas karim, Commented Jun 3, 2016 at 19:12

David Bradshaw · Accepted Answer · 2016-06-03 19:14:29Z

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

answered Jun 3, 2016 at 19:14

David Bradshaw

13.2k3 gold badges45 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ilyas karim Over a year ago

How can is remove the data which i've written using push state.

David Bradshaw Over a year ago

Not sure I follow your question, this just changes the URL, whilst keeping you on the same page.

Ilyas karim Over a year ago

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 Over a year ago

history.pushState({},'','index.php');

Ilyas karim Over a year ago

What is second parameter of pushState.

|

qurban ali · Accepted Answer · 2016-06-03 20:18:57Z

0

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

answered Jun 3, 2016 at 20:18

qurban ali

299 bronze badges

Comments

Barmar · Accepted Answer · 2016-06-03 19:13:46Z

0

Change

location.hash = a[0];

to:

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

answered Jun 3, 2016 at 19:13

Barmar

789k57 gold badges555 silver badges669 bronze badges

3 Comments

Ilyas karim Over a year ago

It works but the page redirects and it shows 404 NOT FOUND error message.

Barmar Over a year ago

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 Over a year ago

Yeah DavidBradshaw's answer helped me

KpTheConstructor · Accepted Answer · 2016-06-03 19:27:03Z

0

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

edited Jun 3, 2016 at 19:27

answered Jun 3, 2016 at 19:10

KpTheConstructor

3,2991 gold badge16 silver badges24 bronze badges

1 Comment

Barmar Over a year ago

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

Collectives™ on Stack Overflow

Changing url using javascript and jquery

4 Answers 4

6 Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related