How reloadAfterSubmit working in jqGrid 0

This reloadAfterSubmit attribute always confusing with data type. I have seen so many post related to reloadAfterSubmit not working like that in jqGrid forum and stackoverflow posts. Here I gave explanation about reload process in jqGrid.

• jqGrid using AJAX to post data to Server Side (add, edit, delete). So, our page will not get refresh.
• jqGrid reloadAfterSubmit : true will again load our data source to jqGrid.
• So, If we set reloadAfterSubmit : true for JSON or XML dynamic data source, it will work. We can see updated data in jqGrid. Because, jqGrid again will get the updated data source from dynamic JSON or XML data type (data source).
• If we set reloadAfterSubmit : true for local data, It will also work. But, We can't see any updated data in jqGrid. Because, our local data is static till we manually refresh our complete page. So, this reloadAfterSubmit : true will again load our declared local data.

So,

• For local data data type, we should set reloadAfterSubmit : false.
• For, JSON or XML data type, we should set reloadAfterSubmit : true.

Read More

24 jQuery UI themes 0

Here we listed 24 jQuery UI themes... Click on the names to get raw code of themes.

• Black tie
• Blitzer 
• Cupertino
• Dark Hive
• Dot luv
• Egg plant
• Excite bike
• Flick
• Hot Sneaks
• Humanity
• Le frog
• Mint Choc
• Overcast
• Pepper grinder 
• Redmond 
• Smoothness 
• South Street 
• Start 
• Sunny 
• Swanky purse
• Trontastic
• UI Darkness
• UI Lightness
• Vader 

 Click...! Download...!! Enjoy... !!!

Read More

Uncaught TypeError: Cannot read property 'integer' of undefined - jqGrid 0

This sounds "Language supporting file is missing".

* One get the error message typically if one don't included required language file grid.locale-xx.js (for example grid.locale-en.js).

* You can Include it before jquery.jqGrid.min.js or jquery.jqGrid.src.js. See the example of the usage of jqGrid in Documentation

* If you don't have that file, Click Here to download.

Have any doubt? Feel free to comment here!!!

Related post : jqGrid "reloadGrid" using Local Data (JSON Object)

Read More

Jquery - check if at least one checkbox is checked 2

     In some situation we need at least one user input in check box to submit form. In that case, we should check if at least one check box is checked. So, we can simply check that condition in .click event listener of check box.

     Here we are going to enable Submit Form button at least any one of check box is checked.

$("input[type='checkbox']").click(function () {
    $("input[type='submit']").attr(
        "disabled", !$("input[type='checkbox']").is(":checked"));
});

     From the above code  !$("input[type='checkbox']").is(":checked") will return switched value of boolean out put. 
i.e.,
If $("input[type='checkbox']").is(":checked") return true, output will be false.
If $("input[type='checkbox']").is(":checked") return false, output will be true.

     Because, if any one of the check box is checked, It will return true. So, we need change button's disabled attribute to false. For that we are using ! to change true to false and false to true .

Here is the DEMO.

Have any doubt, feel free to comment here!

Read More

Reverse DOM element 1

We can Reverse DOM elements. All we need is to use .reverse() the DOM elements.

Here I used Parent Child structure in HTML. You can use ul li to create parent - child structure.

See In the above code, the div contain .parent class is the parent div. Those divs contain .child class are child divs.

We used .reverse() to reverse the child div order and append it to parent div.
Here is the working DEMO

Read More

Shuffle DOM element using jquery 1

Source from James Padolsey.  In this post, I just Created a Demo using his code.

$.fn.shuffle = function () {

        var allElems = this.get(),
            getRandom = function (max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function () {
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
            });

        this.each(function (i) {
            $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);
    };

Usage of Code.

$('selector').shuffle();

Here is the DEMO,
You can find pure javascript way also from his article

Read More

How to stop jquery imageslider on mouse hover 0

Jake Rocheleau designed a very nice jQuery image rotators with description  plug-in.

He missed to instruct how to stop this animation. Here I got the STACKOVERFLOW post. And answered to that question.

Question: How to stop jquery imageslider on mouse hover.

Simply we need to find the correct selector. And .clearInterval() on .mouseover() event listener. Then reset the slide time in setInterval() in .mouseout() event listener.

like this below code,

$('.image_thumb ul li').on("mouseover",function(){
  clearInterval(intervalID);
});

$('.image_thumb ul li').on("mouseout",function(){
  intervalID = setInterval(cycleImage, slidetime);
});

 Here is my STACKOVERFLOW answer post.

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

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

How to change the order of div (DOM element) using jquery 6

Thank you for asking me this question, Vicky. I'm going to explain the way I solved your issue here...

Question :

i want from this fiddle is if the user clicks button 3 then button 1 then button 5 ..... the divs should display in this order DIV 3 > DIV 1 > DIV 5 , But its displaying as DIV 1>DIV 3>DIV5

Answer :

To achieve this task we need detach() method of jQuery. I have already posted about this detach() method in one of previous my another article. You can find it here.

When i tried to solve this issue i searched in web, most of them tried to solve it using javascript array and created those div's dynamically from javascript during click event of buttons.

But, we can solve it in a much simple way using jQuery's detach() method.

The fiddle which is given in the question section is totally hard coded.

   $("#but1").click(function () {  
     $("#f1").show();  
   });  
   $("#but2").click(function () {  
     $("#f2").show();  
   });  
   $("#but3").click(function () {  
     $("#f3").show();  
   });  
   $("#but4").click(function () {  
     $("#f4").show();  
   });  
   $("#but5").click(function () {  
     $("#f5").show();  
   });  

Previously those div's are hidden using css display : none property.

So, I assigned btn css class for those buttons in html part and then I changed that code like the one given below.

   $('.btn').click(function () {  
     var clicked = $(this).attr('id');  
     var clicked_id = clicked.substr(clicked.length - 1);  
     $('#f' + clicked_id).detach().appendTo('#filterpanel').show();  
   });  

You can now see, how I used jQuery's detach() method to detach the element from the DOM tree and append it to #filterpanel div. By this method, the detached DOM element will insert it as a last child of #filterpanel div.

Here you can fine the resultant fiddle DEMO.

Read More

How to use detach() method (.detach() vs .remove()) 1

We can easily achieve this task using jquery detach() method.

.detach()

.detach() method more over equal to .remove() method in jquery. The only difference is,

• .detach() method returns DOM element node & remove DOM element from DOM tree.
• .remove() method completely remove DOM element from DOM tree.

Using that returned DOM elements node, we can reinsert DOM element in a DOM tree.

definition from jquery api

"The .detach() method is the same as .remove(),except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time."

 If we want to insert removed element, we should use .detach() method. otherwise we can simply use .remove() method.

$('selector').detach();

The above line will just remove the DOM element from our DOM tree. We should get the return value in variable for future insertion.

var detached =  $('selector').detach();

Variable detached contains the DOM node of removed DOM element.

If we want reinsert removed element, We can use like this,

$('selector').append(detached);

We can use .insertBefore(), .insertAfter(), .prepend() to replace append() method.



Here you can find the DEMO

Related Post How to change order of div (DOM element) (Recommended)

Read More