Loading jQuery on demand...

There might be situations, where we need to navigate to a new View / Page which does not be part of _layout.cshtml (that is the place where the common includes go). It might help there to check if jQuery is loaded and if not, then it can be included on that page on demand.

An example that worked for me is,

<script type="text/javascript">

    if (typeof jQuery == 'undefined') {
        document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></' + 'script>');
    }

</script>

I got this reference from a website (which I don't remember), but there are many interesting flavors to it available on the web....

Happy coding....

Moving data from one view to another view in MVC

Though there are many ways to handle this situation, I recently had to try the same and ended up using localStorage and it really helped to handle data at various levels of requirements.

Getting to use it is so easy and simple. Just make sure you have HTML5 for schema validation and rest is swift.

When setting up the value, this is what needs to be done :

<script>
   localStorage.setItem("firsttest", "Hello user...");
</script>

When retrieving the value, just do it as below..

<script>
  var testvalue =  localStorage.getItem("firsttest");
</script>

On a quick note, lets see what is localStorage.

   localStorage - These are nothing but Web Storages, replacing the need to use cookies. Web storages are faster and can accomodate up to 5MB of data. If you want to store / retrieve data based on sessions, then the above can be replaced to use sessionStorage instead of localStorage.

Happy coding....

Few simple and effective usages for jQuery......

jQuery is a powerful tool that can enhance our capabilities to deal with data in a better way. Following are few ways to effectively use jQuery within a given application ( I had used it mostly with MVC style of applications).

To update a value within a span tag.

<span id="testspan"></span>

<script>

$("#testspan").text("updating span tag value");

</script>

When you run the app, span tag will be updated with the new value.

To enable and disable a field in UI using jQuery

<input type="text" id="txtField"/>

• To disable, just use -  $("#txtField").attr("disabled", "disabled");
• To enable, $("#txtField").removeAttr("disabled");

To hide and display a field

<input type="text" id="txtField"/>

• To hide, just use $("#txtField").hide()
• To display, use $("#txtField").show()
• To add animation while displaying, try $("#txtField").show("slow")

To check if an element is enabled or disabled

<input type="text" id="sample"/>

jQuery to check enabled / disabled status...

if($('#sample').is(':disabled') == false)
{
    alert("text box is not disabled...");
}

Above line of code will check if it is enabled and if so will given an alert.

To disable a given element

<input type="text" id="sample"/>

$('#sample').prop('disabled', true);

To disable a given element and its children

<div id="divtest">
  <input type="text" value="test" id="text1"/>
   <input type="button" id = "btnTest"/>
</div>

$('#divtest').children().prop('disabled', true);

Above line of code will disable all elements that exists within the div tag.

To check if an element exists

if ($('#dividtest').length > 0)
{
    //element exists
}
else
{
    // no such element exists.
}

To enable a Kendo UI drop down list

A simple usage to enable (or even disable) a given Kendo UI drop down.

$('#kendoddl').data("kendoDropDownList").enable(true);

Similarly, other kendo UI controls can be handled too.

To modify height of a div tag at run time

A very easy and simple way to do this using jQuery is :

<div id="1"></div>
<script>
$("#1").css('height', '400px');
</script>

To know if an element is visible

<div id="1"></div>

<script>
$("#1").is(':visible');
</script>