Friday, November 30, 2012

Hyperlink clicks doing page refresh in JQuery

Hyperlink clicks doing page refresh in JQuery

Normally if you have multiple Ajax calls and Hyperlink action on the same page then you will face multiple call issues, when you clicks on hyperlink same time another Ajax call action trigger and create the issues, you have to prevent those call using ‘stopPropogation’ and ‘preventDefault’, see below example

Following code will refresh page when you click on “Click Here”

$("CallFunctionToOpenWindow(event)’>" Click Here "");

Try following way to write same code, this will prevent server call which will not refresh the page


anchor.click(function (event) {
    CallFunctionToOpenWindow (event);
    event.stopPropagation();
    event.preventDefault();
});       

CallFunctionToOpenWindow(): you can write simple custom function to do the action on hyperlink click.

Image Background Position not working in Firefox, CSS Style Sheet

Image Background Position not working in Firefox, CSS Style Sheet

If you are facing issues to set Image background position with following style sheet class
display: inline-block;
border: none;
background-image: url(/images/MockIcon.png);
background-repeat: no-repeat;
background-position-x: 50px;
background-position-y: 5px;
vertical-align: middle;

 Try following style sheet class which will work in all the Browsers (Chrome, IE and Firefox)
display: inline-block;
border: none;
background-image: url(/images/MockIcon.png);
background-repeat: no-repeat;
background-position: left 50px top 5px;
vertical-align: middle;