Posts Tagged ‘JQuery’

JQuery AJAX Timeout Issue

Posted: February 2, 2013 in JQuery
Tags: , , ,

jQuery ajax default timeout is unlimited (=0).

Set/Detect Timeout on JQuery AJAX – http://stackoverflow.com/questions/5225597/set-timeout-for-ajax-jquery

http://stackoverflow.com/questions/4148830/anyone-know-the-jquery-default-timeout-value

Browser will have default timeout which controls the request/ response. For IE Refer – http://support.microsoft.com/kb/181050

Online editor to try html/script/css – http://jsfiddle.net/tSW7M/

<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js&#8221; language=”javascript”></script>
<script language=”javascript”>
$(document).ready(function() {
window.setTimeout(function() {$(‘#box’).removeClass(“box1”).addClass(“boxCls”);}, 5000);

});

</script>
<style type=”text/css”>
.boxCls {
position: absolute;
width: 200px;
height: 200px;
top: 0;
left: 200px;
background-color: white;
border: 10px solid black;
}

.box1 {
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
background-color: yellow;
border: 2px solid red;
float:left;
}
</style>
</head>
<body>
<div id=”box” class=”box1″>Box</div>
</body>
</html>

JSON to C# object to JSON

Posted: September 8, 2011 in C#, Javascript, JQuery, JSON
Tags: , , ,

[DataContract]
public class SearchFilter
{
[DataMember]
public string SearchCol { get; set; }
[DataMember]
public string SearchOp { get; set; }
[DataMember]
public string SearchText { get; set; }
[DataMember]
public int PageNo { get; set; }
}
using System;
using System.IO;
using System.Runtime.Serialization.Json;
using System.Text;
public class JSONHelper
{
public static T Deserialise<T>(string json)
{
T obj = Activator.CreateInstance<T>();
using (MemoryStream ms = new MemoryStream(Encoding.Unicode.GetBytes(json)))
{
DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType());
obj = (T)serializer.ReadObject(ms);
ms.Close();
return obj;
}
}

public static string Serialize<T>(T obj)
{
DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType());
using (MemoryStream ms = new MemoryStream())
{
serializer.WriteObject(ms, obj);
return Encoding.Default.GetString(ms.ToArray());
}
}
}
Usage –

SearchFilter lSearchFilter = JSONHelper.Deserialise<SearchFilter>(“{‘SearchCol’:’Col1′,’SearchOp’:’contains’,’SearchText’:’hi’}”);
lSearchFilter.SearchCol
lSearchFilter.SearchOp

Refer following links in your web pages to get latest version of JQuery files from CDN …

http://code.jquery.com/jquery-latest.js
http://code.jquery.com/jquery-latest.min.js

http://encosia.com/11-keystrokes-that-made-my-jquery-selector-run-10x-faster/

Do you know how to use Firebug’s console effectively?

Execute jQuery/javascript statement at the console, with your page loaded in the browser, and you will instantly see the array of matching elements that are returned. If that result set isn’t correct, press the up-arrow key to retrieve the last command entered, refine the statement, and test it again

It works in conjunction with Firebug’s debugger. When execution is paused, switching to the console tab allows you to interrogate and manipulate the state of the DOM as it was at the time execution was halted. As you step through JavaScript code in the debugger, the execution context of the console remains in sync with the debugger’s.

http://msdn.microsoft.com/en-US/scriptjunkie/hh273390.aspx

1. Centralized event handling

This will be used in cases where we have a number of similar elements or structures on a page that share similar behaviour when a user-action is performed against them.

In JavaScript, there’s a known bubbling effect in the language so that if an element such as a link or button is clicked, that event is bubbled up to the parent, informing them that something lower down the tree has been clicked. We can use this effect to our advantage.

Ex: In following example we can bind click event to ul and can handle every li click separately with out binding different functions directly to each li. This will also improve performance by minimizing the DOM access for binding/unbinding and by avoiding the event handling for each element separately.

<ul>
 <li class=’one’>One</li>
 <li class=’two’>two</li>
 <li class=’three’>three</li>
 <li class=’four’>four</li>
 <li class=’five’>five</li>
</ul>

stateManager = {
    fly: function () {
        var self = this;
        $(‘ul’).unbind().bind(“click”, function (e) {
            var target = $(e.originalTarget || e.srcElement);
            if (target.is(“li.one”)) {
                self.handleLIOne(target[0]);
            }
            else if (target.is(“li.two”)) {
                self.handleLITwo(target[0]);
            }
        });
    },
    handleLIOne: function (elem) {
        //Do your own implementation for first li element click
        alert(elem.innerHTML);
    },
    handleLITwo: function (elem) {
        //Do your own implementation for second li element click
        alert(elem.innerHTML);
    }
}
stateManager.fly();