ajax post to post data to server and get response using jQuery and JSON.

1. Create a page PageName.aspx, create a div on that:
    <div id="target_div_id">  

    </div>

2. Include the jQuery file.
3. call the following javascript function on any event:

function JsonPost(input1, input2, input3, input4) {

        URL = "PageName.aspx/WebMethodName";

    var options = {

        type: "POST",

        contentType: "application/json; charset=utf-8",

        dataType: "json",

        url: URL,

        data: '{input1:"' + input1 + '", input2:"' + input2 + '", input3:"' + input3 + '", input4:"' + input4 + '"}',

        success: function (msg) {

            if (msg.d == 'error')

                alert(msg.d);

            else {

                $('#target_div_id').append(msg.d);

            }

            HideLoader();

        },

        error: function (msg) {

            alert(msg.d);

        }

    };

    $.ajax(options);

}
4. Following web method will automatically called:


    /// <summary>

    /// Create a web method, input parameter must be same as the parameters in our web method.

    /// from here we will have to return the complete html(including html controls, their ids and classes)

    /// </summary>

    /// <param name="input1"></param>

    /// <param name="input2"></param>

    /// <param name="input3"></param>

    /// <param name="input4"></param>

    /// <returns></returns>

    [WebMethod]

    public static string WebMethodName(string input1, string input2, string input3, string input4)

    {

        try

        {

            int j = 10;//some number depending upon our requirement

            StringBuilder sbResult = new StringBuilder();

            for (int i = 0; i < j; i++)

            {

                sbResult.AppendLine("<!--any required html containing controls and ids-->");

            }

            return sbResult.ToString();

        }

        catch (Exception ex)

        {

            return ex.Message;

        }

    }

Casecading dropdown using JQuery.

1) Put the following JavaScript function on the page:

function BindDropDown(dropdown_parent,dropdown_child,selectedVal)

{

if(document.getElementById(dropdown_parent).selectedIndex>0)

{

$.ajax

({

url: "/GetAjaxData.aspx",

data: "type=products&value="+document.getElementById(dropdown_parent).options[document.getElementById(dropdown_parent).selectedIndex].value,

success: function(message1)

{

var selectedindex=0;

var rows1 = message1.split("\n");

var iCount = 0;

document.getElementById(dropdown_child).options.length = 0;

for (iCount = 0; iCount < rows1.length; iCount++)

{

var valu=rows1[iCount].split("|");

if(valu[1].replace(/^\s*/, "").replace(/\s*$/, "")==selectedVal)

selectedindex=iCount;

var oOption = new Option(valu[0],valu[1].replace(/^\s*/, "").replace(/\s*$/, ""));

document.getElementById(dropdown_child).options.add(oOption);

}

document.getElementById(dropdown_child).options[selectedindex].selected=true;

return false;

}

});

}

else

{

document.getElementById(dropdown_child).options.length = 0;

document.getElementById(dropdown_child).options.add(new Option("--Select--", "0"));

}

}

2) Call The Following function on dropdown's selected index change:


 BindProducts('<%=ddlParent.ClientID%>', '<%=ddlChild.ClientID%>', '<%=Id%>')


3) Put the following code on the GetAjaxData.aspx page:

protected void Page_Load(object sender, EventArgs e)

{

ReturnDDLData(Convert.ToInt32(Request.QueryString["value"]));

}

private void ReturnDDLData(Int32 selectedId)

{

Response.Clear();

StringBuilder sbResponse = new StringBuilder();

Collection m_oCollection = new Collection();

m_oCollection.GetCollection(selectedId);

sbResponse.Append(string.Concat("--Select--", "|0", Environment.NewLine));

foreach (Product m_oItem in m_oCollection)

{

sbResponse.Append(string.Concat(m_oItem.Name, "|", m_oItem.ID.Value.ToString().Trim()) + Environment.NewLine);

}

Response.Output.Write(sbResponse.ToString().Substring(0, sbResponse.ToString().LastIndexOf(Environment.NewLine)));

Response.End();

}

Custom Validator in JQuery.Validate

$.validator.addMethod(
"regexName",
function(value, element) {
var check = false;
var re = new RegExp('^[a-zA-Z _0-9.]+$');
return this.optional(element) || re.test(value);
},
"No special characters allowed!"
);


rules: {
LoginName: {
required: true,
regexName:true
},

Open fancybox on Input Click

1)
$(document).ready(function()
{
$("#BTN").click(function()
{
$('test desc').fancybox().click();
});
});

2)

$("#buttontoclick").click(function() {
$('Friendly description').fancybox({
overlayShow: true
}).click();
});

3)

        function OpenPage(id) {
            $('dummy_anchor').fancybox({
                'frameWidth': 420, 'frameHeight': 413 // 'frameHeight': 232
            }).click();
        }

Bravenet Links

Following are the bravenet links containing some JQuery code:

1) http://nitindhiman.bravehost.com/TableChart.htm

2) http://nitindhiman.bravehost.com/dropdown.htm

3) http://nitindhiman.bravehost.com/puzzle.htm

4) http://nitindhiman.bravehost.com/TooltipBubble.htm

5) http://nitindhiman.bravehost.com/horizontalAccordion.htm

6)