jQuery Get Url Parameter

Or you can use below code to get Url Parameter
 GetUrlKeyValue

jQuery textbox keydown event

Onclick change url using jquery

slide toggle from right to left and left to right using jquery

jQuery animate right to left

jquery dom change event listener

Use below code, run.
Go to html, remove one element...you will see the log.

Ref: http://www.bennadel.com/blog/1623-ask-ben-detecting-when-dom-elements-have-been-removed-with-jquery.htm

jquery query string parameters

jquery query string parameters


https://Myapp/home.aspx?ID=1&Sno=2


<script>
$(document).ready(function () {
var vars = [], hash;
var q = document.URL.split('?')[1];
//alert(q);
if (q != undefined) {
q = q.split('&');
for (var i = 0; i < q.length; i++) {
hash = q[i].split('=');
vars.push(hash[1]);
vars[hash[0]] = hash[1];
}
}
alert(vars['ID']);
alert(vars['Sno']);
});
</script>

jQuery Mega Menu

jQuery Mega Menu
Download:
jkmegamenu.css
jkmegamenu.js
from below site.
http://www.javascriptkit.com/script/script2/jkmegamenu.shtml
Add below code to your html page.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />
<script type="text/javascript" src="jkmegamenu.js">
/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
//jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
jkmegamenu.definemenu("megaanchor", "megamenu1", "click")
</script>
</head>
<body>
<!--Mega Menu Anchor-->
<a href="http://www.javascriptkit.com" id="megaanchor">Tech Links</a>
<!--Mega Drop Down Menu HTML. Retain given CSS classes-->
<div id="megamenu1" class="megamenu">
<div class="column">
<h3>Web Development</h3>
<ul>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
</ul>
</div>
<div class="column">
<h3>News Related</h3>
<ul>
<li><a href="http://www.cnn.com/">CNN</a></li>
<li><a href="http://www.msnbc.com">MSNBC</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
</ul>
</div>
<div class="column">
<h3>Technology</h3>
<ul>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
</ul>
</div>
<br style="clear: left" /> <!--Break after 3rd column. Move this if desired-->
<div class="column">
<h3>Web Development</h3>
<ul>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
</ul>
</div>
<div class="column">
<h3>News Related</h3>
<ul>
<li><a href="http://www.cnn.com/">CNN</a></li>
<li><a href="http://www.msnbc.com">MSNBC</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
</ul>
</div>
<div class="column">
<h3>Technology</h3>
<ul>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
</ul>
</div>
</div>
</body>
</html>

Enable and disable checbox using jQuery

Enable and disable checbox using jQuery

$('button').click(function(){
var i = $('input');

if ( i.is('[disabled]') )
i.attr('disabled',false)
else
i.attr('disabled',true);
})

http://jsfiddle.net/gaby/pxKcR/2/

string replace with placeholder javascript

string replace with placeholder javascript

var replacements = {
“%NAME%”: “Mike”,
“%AGE%”: “26″,
“%EVENT%”: “20″
},
str = ‘My Name is %NAME% and my age is %AGE%, the following %TOKEN% is invalid.’;

str = str.replace(/%\w+%/g, function(all) {
return replacements[all] || all;
});

document.body.innerHTML = str;

Some more examples related to replace regular expression

        var country = "india india INDIA .";

        alert(country.replace('india', 'US'));

        alert(country.replace(/india/g, 'US'));

        alert(country.replace(/india/gi, 'US'));

        alert(country.replace(/\./g, 'US'));

Add Dynamic table in jQuery

Add Dynamic table in jQuery

Script
---------
var html = [], $list = $('#myList');

html.push('<div>');
$list.find('li').each(function() {
html.push('<ul><li>' + $(this).text() + '<li></ul>');
});
html.push('</div>');
$list.replaceWith(html.join(''));

Html

<ul id="myList">
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>

$ is not defined

$ is not defined

First this you need check whether jQuery reference has loaded or not.
If not add jQuery reference with correct path.

Another reason:

Make sure all java script code is being run inside a code block such as:

$(document).ready(function () {
  //your code here
});


This will ensure that your code is being loaded after jQuery has been initialized.

Getting SharePoint List items using jQuery

Getting SharePoint List items using jQuery

Create a list name: FAQs

Add some data.

Copy below code in  a .txt file

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {alert('1');
var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>FAQs</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";

$.ajax({
url: "_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});
});

function processResult(xData, status) {alert('2');
$(xData.responseXML).find("z\\:row").each(function() {
var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
$("#tasksUL").append(liHtml);
});
}
</script>

<ul id="tasksUL"/>

Upload .txt file in to sharepoint server

go to any page.

Insert content editor web part

Edit web part

provide .txt link at: To link to a text file, type a URL.

Save

you will get list items.