jqGrid "reloadGrid" using Local Data (JSON Object) 0

In jqGrid they are using .trigger('reloadGrid'); to reload the grid like below,

$('#gridID').trigger('reloadGrid');

If you are using Local data, you should mention your Local Json Data in jqGrid's
setGridParam property and you can use jqGrid's loadComplete event handler to do this like below,

loadComplete: function () {
    jQuery("#grid1")
        .jqGrid('setGridParam', {
        datatype: 'local',
        data: dynaData2 //json object
    })
        .trigger("reloadGrid");
}

See this Stackoverflow answer post.

And also read this jqGrid Documentation

Read More

Hide/Show A Div After A Few Seconds repeatedly 2

We can achieve using javascript's setInterval() and setTimeout() method.

setInterval(function() { 
    $("#myDiv").hide(); 
    setTimeout(function() {     
       $("#myDiv").show(); 
    },1000);//hide timing
},3000); //show timing

Here is the DEMO

Read More

How to print html tags as plain text in html page using javascript 0

In this post i'm going to share how to print html tags as plain text in html page using javascript.

browser read < (greater than) and > (lesser than) symbols as for html tags. So, if we use these symbols in plain text, browser will consider it as a html tags.

So we need to replace < with & l t ; and >with & g t ; to print HTML tags as a Plain Text.

If you feel hard to write your code with these changes, leave it. Use this below javascript function to convert html tags to plain text.

Here is the javascript function

HERE YOU CAN FIND THE DEMO

Read More

simple single page layout with html and jquery 0

From this post we are going to learn how to create a single page website layout using only html and jquery.

All we need is your favorite code editor and jQuery library file.

We are going to use html div tags to separate the pages as sections.  Here we are using fixed header to show the section links.

just separate your various page contents in various section divs and header content within header div.

In css we just assign, size of the div. I mean size of the page. In header page link, we need to mention the section id to bring it to top when user click on that page.

Then we can write our javascript code like below.

var from = $("#header").height();
$(document).ready(function () {
    $(".link:first").css("top", from + 'px');
});
$(".jumper").on("click", function (e) {
    e.preventDefault();
    $("body, html").animate({
        scrollTop: $($(this).attr('href')).offset().top - from
    });
});

Here we are using jQuery method .animate() to scroll

the page. In this we are using scrollTop attribute to scroll the clicked section to the top of the page.

In the above code we used minus some value in scrollTop attribute of .animate() method. Because in this example we are using fixed header. If we use scrollTop attribute like below,

scrollTop: $($(this).attr('href')).offset().top

top of our section div contents will hide behind header div. So, we get the height of header div using,

var from = $("#header").height();

and reduce it from the top like this,

 scrollTop: $($(this).attr('href')).offset().top - from

By this, our section div content will display below to header div.

have you seen this line in the above code? could you guess why we using this?

$(".link:first").css("top", from + 'px'); 

 Already I told, we are using fixed header for menu. So, the first section div will hide behind that header div. For that, we get the header div's height and assign that height value to first section div.
For example, if

var from = $("#header").height();

return 85 to variable from, when we use this below code in document ready,

$(".link:first").css("top", from + 'px');

our first section div's css looks like,

.link:first {
   top:85px;
}

Here is the DEMO

Read More

How to change event cell color in jquery fullcalendar (arshaw fullcalendar) 1

To do this, we need to use .fc-day[data-date="Y-m-d"]

In arshaw fullcalendar they used .fc-day class for date cells. they used data attributes to store date in cell.

In this plugin event dates are stored in time stamp format. So, all we need is, change the timestamp formatted date into Y-m-d format and assign that date to .fc-day class element's data-date attribute.

don't go anywhere to find timestamp to Y-m-d format converter code.

Here I placed that code for you. You just need to enter your event in function argument. It will return date in Y-m-d format.

function getEventDate(event) { var dateobj = event.start;
date = dateobj.getFullYear()+'-'+dateobj.getMonth()+1+'-'+dateobj.getDate();
return date;
}

Then in eventRender function we can change the cell color of the event date.

eventRender: function (event, element, view) {
//to change color of the event with respect to response
$('.fc-day[data-date="' + getEventDate(event) + '"]').addClass("orange");

from the above code, you can add the class to the selected event date.

In CSS style

. orange {box-shadow:inset 0 0 10px orange}

Read More