How to open hyperlink in new window

We can open hyperlink in new window using javascript.

lets consider you have the following hyperlink

<a class="link" onclick="openWindow();"> open me in new window </a>

As we are not using href attribute above hyperlink is shown as plain text. So use below styles to make it look as a hyperlink

.link {
    color: blue;
    cursor: pointer;
}

Now add the following javascript code

function openWindow() {
    window.open('http://coding-issues.com', '', 'width=950,height=700');
}

The above javascript opens the new window when you click on the hyperlink.

Note: You have to specify the height and width of the new window. Otherwise it opens a new tab instead of new window.

Demo:

open me in new window

In this way we can open the hyperlink in new window using javascript.

For more posts on Javascript visit: javascript

Read more...

How to disable or enable input field using JQuery

If you want to disable any input field like button or checkbox or textbox etc, you can do it using JQuery.

Consider you have the following input fields in your page

<input type="text" id="tb1" />
<input type="button" id="btn1" />
<input type="checkbox" id="chkbx1" />
<input type="radio" id="radio1" />

Now if you don't want to allow a user to enter text into textbox(in cases when you are showing pre-loaded data) or if you don't want to allow a user to click on the submit/send button until all the form fields are valid, then in the above cases you can disable those input fileds using jQuery's prop() method.

jQuery code to disable the input fields:

Disable textbox using jQuery

$("#tb1").prop('disabled', true);  //for jQuery 1.6+
$("#tb1").attr('disabled', 'disabled'); //for jQuery 1.5 and below

Re-enable textbox using jQuery

$("#tb1").prop('disabled', false); //for jQuery 1.6+
$("#tb1").removeAttr('disabled'); //for jQuery 1.5 and below

Disable button using jQuery

$("#btn1").prop('disabled', true);  //for jQuery 1.6+
$("#btn1").attr('disabled', 'disabled'); //for jQuery 1.5 and below

Re-enable button using jQuery

$("#btn1").prop('disabled', false); //for jQuery 1.6+
$("#btn1").removeAttr('disabled'); //for jQuery 1.5 and below

You can also disable radio button or checkbox using jQuery in the same way.

In this way you can disable the input fields using jQuery. Let me no if it helped you through comments section. Feel free to share any information.

For more posts on jQuery please visit: jQuery

Read more...

get current window url in javascript

You can get the url of the current window using javascript.

To get the current window url, use the below javascript:

var url = window.location.href;

The above javascript code gives the full url of the window.

To get the current window url using jquery, use the below code:

var url = $(location).attr('href');

To get the origin of the url use the following javascript code:

var origin = window.location.origin;

To get the pathname use:

var pathname = window.location.pathname;

To get the current window protocol use:

var origin = window.location.protocol;

To get the port number of the current window use:

var port = window.location.port;

To Reload the current page using javascript use:

window.location.reload();


In this way you can get the url of the current window using javascript.

For more posts regaring please visit : Javascript

Read more...

Get selected radio button value using JQuery

Using JQuery, we can get the selected radio button value. Lets see how we can do this..

Consider you have a list of Radio Buttons in your form like below

<form id="form1">
    <input type="radio" name="myRadio" value="1" /> 1 <br />
    <input type="radio" name="myRadio" value="2" /> 2 <br />
    <input type="radio" name="myRadio" value="3" /> 3 <br />
</form>

JQuery code to get the selected radio button value is

$('#form1 input').on('change', function () {
        var value = ('input[type="radio"]:checked').val();
        alert(value);
    });

 or you can also use the following code

$('#form1 input').on('change', function () {
        var value = ('input[name="myRadio"]:checked').val();
        alert(value);
    });

When a user selects the radio button, then JQuery's .change() event gets called. And when this event is raised, we are storing the value of the selected radio button in a javascript variable.

For live example look at this fiddle: http://jsfiddle.net/codingsolver/MsYqx/

In this way we can get the selected radio button value using JQuery.

For more posts on JQuery please visit: JQuery

Read more...

Call a controller from another controller in AngularJS

Whenever you want to share some data between AngularJS controllers or whenever you want to pass some data from one controller to other controller, then you can communicate between controllers in multiple ways.

By Sharing a Service:

You can share a common service between two controllers.

consider you have the following service called 'myService' which returns an array like below.

var myApp = angular.module('myApp', []);
 
myApp.factory('myService', function () {
    return []; //return an array
});

Now you can use this service in your AngularJS controllers like below

function FirstController(myService) {
    //your code here
}
 
function SecondController(myService) {
    //your code here
}

you can also define methods in the service and you can call those methods from controllers.

By Emitting an Event ($emit):

You can dispatch an event using $emit from one controller and you can listen to that event using $on from other controller.

Example:

function FirstController($scope) {
    $scope.$on('someEvent', function (event, args) {
    });
    // this is another controller or even directive
}
 
function SecondController($scope) {
    $scope.$emit('someEvent', args);
}

here orgs means Optional set of arguments which will be passed onto the event listeners.

In this way you can communicate between the controllers in AngularJS.

For more posts on angularJS visit: AngularJS

Read more...