Category Archives: jquery snippets

.getSript – jquery loaded event

[javascript]
$(document).ready(function()
{
$(‘.table’).tableAddCounter();
$.getScript(“http://code.jquery.com/ui/1.9.2/jquery-ui.js”).done(function(script, textStatus) {
$(‘tbody’).sortable();
$(“.alert-info”).alert(‘close’);
$(“.alert-success”).show();
});
});
[/javascript]

UI Dialog Positioning

jQuery UI dialog positioning – Stack Overflow

[javascript]
$(".mytext").mouseover(function() {
var width = 250;
var height = 270;
var posX = $(this).offset().left – $(document).scrollLeft() – width + $(this).outerWidth();
var posY = $(this).offset().top – $(document).scrollTop() + $(this).outerHeight();
$("#dialog").dialog({width:width, height:height ,position:[posX, posY]});
}
[/javascript]

JQuery: How to get value of ckecked checkbox

JQuery: How to get value of ckecked checkbox

[javascript]
function getCheckedId()
{
var allVals = [];
$("input[type='checkbox']:checked").each(function() { allVals.push($(this).val());
});

if( ! allVals ) return false;

len = allVals.length;

if( len == 0) return 0;

if (len >1) {
alert("More than one vehicle selected. Only one will be processed. ");
}

return allVals[0];
}

[/javascript]

JQuery Mobile Framework: How to turn off the Ajax processing the links and form

  	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  	
  	    <script type="text/javascript" >

    		$(document).bind("mobileinit", function(){
			$.mobile.ajaxEnabled = false;								
		});

    </script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

The order of code inserting is important.
The AJAX disabling code must prior to initializing the mobile framework.

JQuery using :not

[javascript]

$(‘#seoform input:not(#submit_id_form)’).val(”);

[/javascript]

or

[javascript]

$(‘#seoform input’).not(‘#submit_id_form’).val(”);

[/javascript]

How to set div to center of the screen

<div id='div_id'>
Blah! Blah!
</div>

To set the div above to the center we can use next JQuery code.

jQuery.fn.center = function () {
    var w = $(window);
    this.css("position","fixed");
    this.css("top",w.height()/2-this.height()/2 + "px");
    this.css("left",w.width()/2-this.width()/2  + "px");
    return this;
}
$("#div_id").center();

JQuery: working with select options

We are going to start with the next simple html code

[html]

[/html]

How to get selected value

[javascript]
$(‘#opt option:selected’).val();
[/javascript]

How to get selected text

[javascript]
$(‘#opt option:selected’).text();
[/javascript]

How to set option by value

[javascript]
$(‘select#opt option[value=1]‘).attr(‘selected’,'selected’);
[/javascript]

If we need to set selected option by variable consider next code

[javascript]
var index = 1;
$(‘select#opt option[value=' + index +']‘).attr(‘selected’,'selected’);
[/javascript]

Next code might be applied if we need to set selected option by index

[javascript]
var content=”Boys”;
$(‘#opt option:contains(“‘+content+’”)’).attr(‘selected’,'selected’);
[/javascript]

Result: first option will be selected

One more piece of code to review:
[javascript]
$(‘select#optn_status option[value=4]‘).attr(‘disabled’, ‘disabled’);
[/javascript]