CODEWITHSUNDEEP
javascriptjqueryurlhash
Ilyas karim
Ilyas karim

Reputation: 4812

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.

Upvotes: 0

Views: 99

Answers (4)

qurban ali
qurban ali

Reputation: 29

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

Upvotes: 0

KpTheConstructor
KpTheConstructor

Reputation: 3291

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

Upvotes: 0

David Bradshaw
David Bradshaw

Reputation: 13097

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

Upvotes: 1

Barmar
Barmar

Reputation: 782508

Change

location.hash = a[0];

to:

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

Upvotes: 0

Related Questions