Develop Reference

class inheritance in javascript/angular

I am working on my hello world project. I have two pages let's call them "configuration" and "add configuration" *.html. Each one has its own controller like this:
angular.module('MissionControlApp').controller('ConfigController', ConfigController);
angular.module('MissionControlApp').controller('AddConfigController', AddConfigController);
Now, each controller has some properties that very much overlap:
function ConfigController($routeParams, ConfigFactory, $window){
var vm = this;
vm.status;
vm.projectId = $routeParams.projectId;
vm.selectedProject;
vm.configurations;
vm.selectedConfig;
vm.selectedRecords;
vm.filteredConfig;
vm.newFile;
vm.fileWarningMsg = '';
vm.addFile = function(){
var filePath = vm.newFile;
var encodedUri = encodeURIComponent(filePath);
vm.fileWarningMsg='';
ConfigFactory
.getByEncodedUri(encodedUri).then(function(response){
var configFound = response.data;
var configNames = '';
var configMatched = false;
if(response.status === 200 && configFound.length > 0){
//find an exact match from text search result
for(var i = 0; i < configFound.length; i++) {
var config = configFound[i];
for(var j=0; j<config.files.length; j++){
var file = config.files[j];
if(file.centralPath.toLowerCase() === filePath.toLowerCase()){
configMatched = true;
configNames += ' [' + config.name + '] ';
break;
}
}
}
}
if(configMatched){
vm.fileWarningMsg = 'Warning! File already exists in other configurations.\n' + configNames;
} else if(filePath.length > 0 && filePath.includes('.rvt')){
var file1 = { centralPath: filePath };
vm.selectedConfig.files.push(file1);
vm.newFile = '';
} else{
vm.fileWarningMsg = 'Warning! Please enter a valid file.';
}
}, function(error){
vm.status = 'Unable to get configuration data: ' + error.message;
});
};
My AddConfigController also wants to have the same functionality for addFile() so I just copy pasted the same code, but coming from C# i am sure i can do some class inheritance here, and just inherit from ConfigController and extend...right?
If this is super noob question. then apologies. js is a bit of a mystery to me.
function AddConfigController($routeParams, ConfigFactory, $window){
var vm = this;
vm.status;
vm.projectId = $routeParams.projectId;
vm.selectedProject = {};
vm.newConfig = {};
vm.newFile;
vm.fileWarningMsg = '';
vm.addFile = function(){
var filePath = vm.newFile;
var encodedUri = encodeURIComponent(filePath);
vm.fileWarningMsg='';
ConfigFactory
.getByEncodedUri(encodedUri).then(function(response){
var configFound = response.data;
var configNames = '';
var configMatched = false;
if(response.status === 200 && configFound.length > 0){
//find an exact match from text search result
for(var i = 0; i < configFound.length; i++) {
var config = configFound[i];
for(var j=0; j<config.files.length; j++){
var file = config.files[j];
if(file.centralPath.toLowerCase() === filePath.toLowerCase()){
configMatched = true;
configNames += ' [' + config.name + '] ';
break;
}
}
}
}
if(configMatched){
vm.fileWarningMsg = 'Warning! File already exists in other configurations.\n' + configNames;
} else if(filePath.length > 0 && filePath.includes('.rvt')){
var file1 = { centralPath: filePath };
vm.selectedConfig.files.push(file1);
vm.newFile = '';
} else{
vm.fileWarningMsg = 'Warning! Please enter a valid file.';
}
}, function(error){
vm.status = 'Unable to get configuration data: ' + error.message;
});
};

Since you asked about inheritance and you appear to be using ECMAScript 5, let me suggest taking a look at Object.create(). Specifically, the classical inheritance example.
That said, in AngularJS, a better solution would be to create a Service that manages files or configurations and put the addFile function in there. That way, both controllers could inject the service and call the same function when it is time to add a file. Likewise, other services and controllers that may need access to this functionality could inject it as well.

Prase query string from url javascript

my url look like http://localhost:13562/Student/RefreshStudents?sort=FirstName&sortdir=ASC&page=1
now i am looking for a function where i will pass url and query string name then that should return value.
so i did it this way but not working.
function getQueryVariable(url,variable) {
var query = url;
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
console.log('Query variable %s not found', variable);
}
calling like this way
var x='http://localhost:13562/Student/RefreshStudents?sort=FirstName&sortdir=ASC&page=1'
alert(getQueryVariable(x,'sort'));
alert(getQueryVariable(x,'sortdir'));
alert(getQueryVariable(x,'page'));
where i made the mistake?
EDIT
working code
$.urlParam = function(url,name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(url);
if (results==null){
return null;
}
else{
return results[1] || 0;
}
}
var x='http://localhost:13562/Student/RefreshStudents?sort=FirstName&sortdir=ASC&page=1'
alert($.urlParam(x,'sort'));
alert($.urlParam(x,'sortdir'));
alert($.urlParam(x,'page'));
https://jsfiddle.net/z99L3985/1/
thanks

may be the following will help
function getUrlVars(url) {
var vars = {};
var parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var x='http://localhost:13562/Student/RefreshStudents?sort=FirstName&sortdir=ASC&page=1';
var queryVars = getUrlVars(x);
alert(queryVars['sort']);
alert(queryVars['sortdir']);
alert(queryVars['page']);

I just get this from somewhere else as well..
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
console.log(vars);
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] === variable){return pair[1];}
}
return(false);
}
so far its doing its job.
with url: "http://urlhere.com/general_journal?from=01%2F14%2F2016&to=01%2F14%2F2016&per_page=25&page=2"
if im going to get the 'page' variable result would be : `2`
console.log(getQueryVariable('page'));
my query variable is only getting the search.substring(1) part of the the url so basically it only gets from=01%2F14%2F2016&to=01%2F14%2F2016&per_page=25&page=2 part of the url then from that it splits it and then return the value of the string parameter you specified on the function call getQueryVariable('page') for example.

Maybe this helps
var getUrlVars = function(url){
var vars = [], hash;
var hashes = url.slice(url.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++){
hash = hashes[i].split('=');
vars.push(decodeURIComponent(hash[0]));
vars[decodeURIComponent(hash[0])] = decodeURIComponent(hash[1]);
}
if(vars[0] == url){
vars =[];
}
return vars;
}
Then in your code
var params = getUrlVars("http://localhost:13562/Student/RefreshStudents?sort=FirstName&sortdir=ASC&page=1");
console.log(params["sort"]) // FirstName

having trouble overwriting querystring with history.PushState

I can't figure out how to correctly use push state. I'm getting weird url's like so:
http://website.net/home?http://website.net/home=undefined&tab=browse
And can't seem to get it to work no matter what I try. I need domain/path to stay the same, I just want to rebuild the querystring (which I do in another function) then apply history.pushState()
Here's a basic look at the code, abbreviated to show the problem in question.
var sk = {
//push function
pushState: function(qs,callback){
var i = 0, uri = '';
$.each(qs,function(k,v){
if(k=="" || v==""){
delete qs[k];
}
});
$.each(qs,function(k,v){
if(i == 0){
uri +='?';
}else{
uri +='&';
}
uri +=k+'='+encodeURIComponent(v);
i++;
});
var obj ={ Title: $('title').html(), Url: uri }
if(typeof callback !== "undefined" && callback !== false){
obj[callback[0]] = callback[1];
}
history.pushState(obj,obj.Title,obj.Url);
},
//parse current url and return querystring
getQSvars : function(){
var vars = {}, hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars[hash[0]] = hash[1];
}
return vars;
},
};

How can I get query string parameter in Javascript or jQuery?

I have a link like this:
http://localhost:8162/UI/Link2.aspx?txt_temp=123abc
I want to get the value 123abc . I have followed this How can I get query string values in JavaScript? and
jquery get querystring from URL
$(document).ready(function () {
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
onload = function () {
alert(getParameterByName('txt_temp'));
alert(getUrlVars()["txt_temp"]);
}
});
But it does not work.

Suppose you have URL with many params eg:-
"http://localhost:8162/UI/Link2.aspx?txt_temp=123abc&a=1&b=2"
Then in js you can do like:
var url = "http://localhost:8162/UI/Link2.aspx?txt_temp=123abc&a=1&b=2"
OR
var url = window.location.href
then split main url like:
hashes = url.split("?")[1]
//hashes holds this output "txt_temp=123abc&a=1&b=2"
Then again you can split by & to get individual param
EDIT
Check this example:
function getUrlVars() {
var url = "http://localhost:8162/UI/Link2.aspx?txt_temp=123abc&a=1&b=2";
var vars = {};
var hashes = url.split("?")[1];
var hash = hashes.split('&');
for (var i = 0; i < hash.length; i++) {
params=hash[i].split("=");
vars[params[0]] = params[1];
}
return vars;
}
Output
getUrlVars()
Object {txt_temp: "123abc", a: "1", b: "2"}

It doesn't work because you're running the functions inside of onload, which doesn't fire inside of document.ready, because by the time the code inside of document.ready executes, onload has already fired. Just get your code out of the onload event:
http://jsfiddle.net/whp9hnsk/1/
$(document).ready(function() {
// Remove this, this is only for testing.
history.pushState(null, null, '/UI/Link2.aspx?txt_temp=123abc');
function getUrlVars() {
var vars = [],
hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
// You may also place this inside of a function,
// and execute it when you desire, but `onload` is not going
// to fire by itself, when inside of document.ready
alert(getParameterByName('txt_temp'));
alert(getUrlVars()["txt_temp"]);
});

This should get you started:
function parseQueryStr( str, obj ) {
// Return object
obj = obj || {};
// Looping through our key/values
var keyvalues = str.split('&');
for( var i=0; i<keyvalues.length; i++ ) {
// Break apart our key/value
var sides = keyvalues[i].split( '=' );
// Valid propery name
if( sides[0] != '' ) {
// Decoding our components
sides[0] = decodeURIComponent( sides[0] );
sides[1] = decodeURIComponent( sides.splice( 1, sides.length-1 ).join( '=' ) );
// If we have an array to deal with
if( sides[0].substring( sides[0].length - 2 ) == '[]' ) {
var arrayName = sides[0].substring( 0, sides[0].length - 2 );
obj[ arrayName ] = obj[ arrayName ] || [];
obj[ arrayName ].push( sides[1] );
}
// Single property (will overwrite)
else {
obj[ sides[0] ] = sides[1];
}
}
}
// Returning the query object
return obj;
}
var href = window.location.href.split('#');
var query = href[0].split('?');
query.splice(0,1);
var get = parseQueryStr(query.join('?'));
alert( get.txt_temp );

You can use:
var param = new URLSearchParams(urlString).get('theParamName');
Or if searching the current page:
var param = new URLSearchParams(location.search).get('theParamName');

you have to slice the everything before and after "=" so first answer is a bit incomplete. Here is the answer which works for querystrings includes "=" in it too :) Like:
https://localhost:5071/login?returnUrl=/writer/user?id=315&name=john
Thanks to user abhi
var getUrlVars = function () {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]); //to get name before =
vars[hash[0]] = hashes[i].slice(hashes[i].indexOf('=') + 1); //to take everything after first =
}
return vars;
}
and then get it with
var url = window.getUrlVars()["returnUrl"];
so it will extract "/writer/user?id=315" with "=" too :)

I wrote this one liner with ES6 syntax which follows the method of the accepted answer.
function getParam(key){
return window.location.href.split('?')[1].split('&').filter(x=>x.split('=')[0]==key)[0].split('=')[1];
}
Use:
Lets say the current URL is: https://stackoverflow.com?question=30271461
getParams('question') //30271461

How can i pass values from querystring to javascript?

Now that i learned how to pass values to an SWF object via flashvars, could you please guide me how can i pass values from a querystring to javascript?
What do i mean? In the following example i hard-code the xml file to load in the SWF object.
<script type="text/javascript">
var so = new SWFObject("preview.swf", "", "100%", "100%", "9", "#ffffff");
so.addParam("allowFullScreen", "true");
so.addParam("scale", "noscale");
so.addParam("menu", "false");
so.addVariable("xmlPath", "xml/exampleData.xml");
so.write("flashcontent");
</script>
Since the Xml file is created dynamic, the xml should be loaded from the value of a query-string. (I guess).
Supposing my url is http://www.example.com/load.aspx?XmlFile=SomeData
How can i pass it to the javascript side? Like..
so.addVariable("xmlPath", "xml/<% SomeData %>.xml");
or whatever it needs to make it work.
UPDATE: Besides the above example, is there any way of creating the JavaScript, in server-side?

Try something like:
function GetQueryString(param)
{
var url = window.location.search.substring(1);
var params = url.split("&");
for (i=0;i<params.length;i++)
{
var p = params[i].split("=");
if (p[0] == param)
{
return p[1];
}
}
}
And use it like:
so.addVariable("xmlPath", "xml/" + GetQueryString("XmlFile") + ".xml");

window.location.href contains the querystring of the current page, this should work:
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}

function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}