CodeCloudy

Azure | .Net | JQuery | Javascript | Umbraco

Javascript/JQuery/json/

on January 17, 2017
  1. Get size of json object
 type="text/javascript">

  var myObject = {'name':'Kasun', 'address':'columbo','age': '29'}

  var count = Object.keys(myObject).length;

  console.log(count);

2. Trying to pass in a boolean C# variable to a javascript variable and set it to true

myjavascript( <%= MyBooleanVariableInCSharp.ToString().ToLower() %> );

You may also want to try:

isFollowing: '@(Model.IsFollowing)' === '@true'

and an ever better way is to use:

isFollowing: @Json.Encode(Model.IsFollowing)

3. Make the page scroll a bit after page load or button click of a Url with HASH #.

Note: the link can be either “/#” or “#” depending on the link, change below accrodingly. or you can change it to handle it as well.

    
        // The function actually applying the offset
        function offsetAnchor() {
            if (location.hash.length !== 0) {
                window.scrollTo(window.scrollX, window.scrollY - 50);
            }
        }

        // Captures click events of all  elements with href starting with #
        $(document).on('click', 'a[href^="/#"]', function (event) {
            // Click events are captured before hashchanges. Timeout
            // causes offsetAnchor to be called after the page jump.
            window.setTimeout(function () {
                offsetAnchor();
            }, 1000);
        });

        // Set the offset when entering page with hash present in the url
        window.setTimeout(offsetAnchor, 1000);
    

4. make a loading element at any given time

My note: ajaxStart, ajaxStop won’t work in all environment. they might be overridden already. so we can call success and fails with

when posting/action starts – $body.addClass(“loading”);

when actions ends – $body.removeClass(“loading”);

Below is an copy: 

You could do this various different ways. It could be a subtle as a small status on the page saying “Loading…”, or as loud as an entire element graying out the page while the new data is loading. The approach I’m taking below will show you how to accomplish both methods.

The Setup

Let’s start by getting us a nice “loading” animation from http://ajaxload.info I’ll be using enter image description here

Let’s create an element that we can show/hide anytime we’re making an ajax request:

class="modal">

The CSS

Next let’s give it some flair:

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

And finally, the jQuery

Alright, on to the jQuery. This next part is actually really simple:

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

That’s it! We’re attaching some events to the body element anytime the ajaxStart or ajaxStopevents are fired. When an ajax event starts, we add the “loading” class to the body. and when events are done, we remove the “loading” class from the body.

See it in action: http://jsfiddle.net/VpDUG/4952/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: