How to get querystring value from url using - JS - jquery

Problem definition

http://www.raymn.in/index.php?username=rahul&password=123

In above link querystring is username=rahul&password=123 and the values are rahul and 123.

So we have to extract values from url. how??

Solution

Step by Step description,
First Step: Get querystring from URL.. var sPageURL = window.location.search.substring(1);

var sPageURL holds "username=rahul&password=123"

Second Step: Split queries from "&".. var sURLVariables = sPageURL.split('&');

sURLVariables is array of "username=rahul" and "password=123"

Third Step: Split values from "="..var sParameterName = sURLVariables[i].split('=');

sParameterName holds array of "username", "rahul", "password", "123"

Example
//JS example
function getQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}​

//JQuery example
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var array = [], values;
    var arrayOfQuery = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < arrayOfQuery.length; i++)
    {
        values = arrayOfQuery[i].split('=');
        values.push(values[0]);
        vars[values[0]] = values[1];
    }
    return array;
}


Tags and Related Topics
Parse query string in JavaScript,
jquery get querystring from URL,

How to create a redirect page using JS/JQUERY

Problem definition

I am owner of two domains and want to redirect my traffic from one website to another,

http://www.raymn.in drive traffic to http://www.raymn.com.

Previous JQuery posts and related terms, Create redirect page form js/jquery, Modify URL without reloading

Solution

The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page.

OR 

You can use window.location.replace(URL).

The difference between window.location and window window.location.replace(URL), is that replace() removes the URL of the current document from the document history, meaning that it is not possible to use the "back" button to navigate back to the original document.

Example

window.location = "http://www.raymn.com";

OR

window.location.replace("http://www.raymn.com");


Tag and Related Topics

What is Jquery/js Location Href,
URL Redirect Javascript,

Href attribute best practices for using "#", "javascript:void(0)", "javascript:" - HTML - HTML5 - JS

Problem definition

There are number of ways you can use onclick and href to your anchor tag for on page clicking,

<a href="#" onclick="func()">click here</a>

<a href="#" onclick="func();return false;"></a>

<a href="javascript:void(0)" onclick=""></a>

<a href="javascript:" onclick=""></a>

<a onclick="func()">Does not appear as a link, because there's no href</a>

Which one is better or what are the differences?

Solution

 It's a trick to do the same as PreventDefault

when you're way down in the page and an anchor as:

<a href="#" onclick="func()">click here</a>
you will jump to the top and the URL will have the anchor # as well, to avoid this we simply return false; or use javascript:void(0);

regarding your problem defination

<a onclick="func()">Does not appear as a link, because there's no href</a>
just do a {text:decoration:underline;} and you will have "link a-like"

<a href="javascript:void(0)" onclick="func()">fn is called</a>
<a href="javascript:" onclick="func()">fn is called too!</a>

it's ok, but in your function at the end, just return false; to prevent the default behaviour, you don't need to do anything more.


Disadvantages of "#" over "javascript:void(0)", "javascript:"

Encouraging the use of # amongst a team of developers inevitably leads to some using the return value of the function called like this:

function doSomething() {
    //Some code
    return false;
}
But then they forget to use return doSomething() in the onclick and just use doSomething().

A second reason for avoiding # is that the final return false; will not execute if the called function throws an error. Hence the developers have to also remember to handle any error appropriately in the called function.

A third reason is that there are cases where the onclick event property is assigned dynamically. I prefer to be able to call a function or assign it dynamically without having to code the function specifically for one method of attachment or another. Hence my onclick (or on anything) in HTML markup look like this:

onclick="someFunc.call(this)"

OR

onclick="someFunc.apply(this, arguments)"


Which code is better "#", "javascript:void(0)"

Doing <a href="#" onclick="myJsFunc();">Link</a> or <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> or whatever else that contains an onclick attribute - was okay back five years ago, though now it can be a bad practice. Here's why:

• It promotes the practice of obtrusive JavaScript - which has turned out to be difficult to maintain and difficult to scale. More on this in Unobtrusive JavaScript.
• You're spending your time writing incredibly overly verbose code - which has very little (if any) benefit to your codebase.
• There are now better, easier, and more maintainable and scalable ways of accomplishing the desired result.

Example

Your HTML:

<a class="cancel-action">Cancel this action</a>

Your CSS:

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

Your JavaScript(using jQuery):

// Cancel click event
$('.cancel-action').click(function(){

});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

Tags and Related Topics
Alternatives for using “#” in href attribute,
Why use javascript:void(0) instead of # in href,

References
We get details from http://www.stackoverflow.com/,Authors:
http://stackoverflow.com/users/28004/balexandre, http://stackoverflow.com/users/17516
http://stackoverflow.com/users/130638

What are valid naming convention for id attribute in - HTML - HTML5

Problem definition

attribute id values HTML5 vs HTML4.01,

Are below values are valid for id attribute??

<p id="♥">First Value.
<p id="©">Second Value.
<p id="{}">Third Value.


Solution

The HTML 4.01 spec states that ID tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.). For the class attribute, there is no such limitation. Class names can contain any character, and they don’t have to start with a letter to be valid.

HTML5 gets rid of the additional restrictions on the id attribute. The only requirements left — apart from being unique in the document — are that the value must contain at least one character (can’t be empty), and that it can’t contain any space characters.


This means the rules that apply to values of class and id attributes are now very similar in HTML5.

Example

Valid for HTML5
Invalid for HTML4.01
<p id="♥">First Value.
<p id="©">Second Value.
<p id="{}">Third Value.

Valid for HTML5
Valid for HTML4.01
<p class="♥">First Value.
<p class="©">Second Value.
<p class="{}">Third Value.

Tags and Related topics

html vs html5 valid values for id attribute,
naming convention for attribute id html,

This article is uploaded by RayMn &  BR Technologies Pvt Ltd

How to Modify the URL without reloading the page - HTML5

Problem definition:

Sometimes we need to change the portion after the domain,

e.g. http://raymn.com/ -> http://www.raymn.in/example.html without reloading.

Solution:

Video

HTML5 introduced the history.pushState() and history.replaceState() methods, which allow you to add and modify history entries, respectively.

This new feature offers you a way to change the URL displayed in the browser through javascript without reloading the page. It will also create a back-button event and you even have a state object you can interact with.

Example

window.history.replaceState("object or string", "Title", "example.html");

Parameter 2: The “Title” string is intended to describe the new state, and will not change the title of the document as one might otherwise expect.
Parameter 3:  The url you want to change domain/example.html.

Downloadable Links

Download Change_URL_raymntechnologies.html

Tags

Modify url without reloading,
Html/js modify url without reloading,
Addressbar url modify without reloading