Entries Tagged as 'jQuery'
Passing additional data to CALLBACK function of jQuery.ajax
Posted by Pritesh on December 30, 2011 |
|
Now a days we can not imagine web application with AJAX and jQuery make stuff lot easier to us. We normally need to use ajax call to update web content asyncronously. $.ajax is really simple to use, well I haven't write this post to advertise $.ajax but to explain how we can pass our custom arguments to its callback function.
$.ajax callback function have three default parameter 1. Content 2.Status 3. HTTPResponse object and in most of the case this are enough information in case you want to alert user or display message on particular dom object.
Enable/disable link button in jquery Mobile
Posted by Vikas on June 10, 2011 |
|
Hi,
I am developing mobile application, where I use jquery Mobile.
Buttons can be created by input tag, button tag and even link tag. See examples:
Scroll to UI element in jquery mobile framework
Posted by Vikas on June 09, 2011 |
|
Hi,
I am using jquery mobile framework for last couple of weeks.
Recently it was required to scroll a page to my listview item.
Jquery mobile has a method called $.mobile.silentScroll().
jQuery multiple selection
Posted by Bharat Patel on April 22, 2011 |
|
Hello Friends,
Today, I am very glad to announce finally I have made jQuery multi selection plug-in. I am really thankful to my one of friend who gives me such a nice idea and also thanks to Mr. Pritesh Patel who provides guideline to do better.
Now, in your mind one question arise. What is jQuery multi selection plug-in? jQuery multi selection plug-in is such a very useful plug-in and simple to use.
Features of jQuery Multi Selection Plug-in:
- It's fully ajax base.
- Dynamically load all data.
- No need to refresh page.
- You can edit data once selection.
- Pre-populate selection in edit mode.
- Preview and edit selection once selection.
Documentation
| Options | Required * | How to Use |
| Level | Yes |
Specify level in number. How many steps you want to go for selection. |
| Urlpath | Yes |
Pass file path according to level. Ex: {'DATA':['filepath1','filepath2','filepath3']}. You need to just pass file path which returns query data in JSON format. Ex : {"COLUMNS":["COLUMN1","COLUMN1"],"DATA":[[VALUE1,"VALUE1"],[VALUE2,”VALUE2”]]} |
| Title | Yes |
Pass title according to level. Ex: {'DATA':['title1','title2','title3']}. If you don’t want to insert title, just leave blank {'DATA':['','Title2','']}. |
| Maxselection | No |
Maxselection options is used for validate data on each level. If you want to validate data of any one level then leave other blank. Ex: {'DATA':[2,3,]} In Level 1 you can select only 2 option and so on. |
| valueField | Yes |
Yes You have to pass value field name which are used for posting data. Ex: {'DATA':['id1','id2','id3']} to store selected data on each level. |
| Render | Yes | Yes Just pass div id name where you want to render data. |
| Editable | No |
Default : 1 If you do not want to pre-selection data accordingly values then just pass 0. |
How to use
Step 1 : Put jQuery, jQuery.jMultiSelect.js and css in your page.
Step 2 : Bind jMultiSelect with your element on jQuery on load.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jQuery.jMultiSelect.js"></script>
<link rel="stylesheet" rev="stylesheet" href="css/jQuery.jMultiSelect.css" />
<script type="text/javascript">
jQuery(function(){
jQuery('#data').jMultiSelect({
level : 3,
urlpath : {'DATA':['PATH1','PATH2','PATH3']},
title : {'DATA':['title1','title1','title1']},
maxselection : {'DATA':[2,2,2]},
valueField : {'DATA':['ID1','ID2','ID3']},
render : 'dataInfo'
});
});
</script>
Step 3 : Make a div to render data in it.
<input type="hidden" name="ID1" value="" />
<input type="hidden" name="ID2" value="" />
<input type="hidden" name="ID2" value="" />
<br />
<a id="data" href="#">Click To Load Data</a>
<div id="dataInfo" />
Step 4 : Run your page in browser.
Note : You can get value by url in each level as name "VALUE". You can play with "VALUE" variable in your database query. and one more thing you have to use minimum two field in each level database query. first one for id value and other for label.
Source Code By iSummation Technologies Pvt. Ltd is licensed under a Creative Commons Attribution-Share Alike 2.5 India License.
Mobile theme and theme switcher for Mango Blog.
Posted by Pritesh on April 13, 2011 |
|
Since couple of days I was reviewing jQuery Mobile and really impress with work it make it easy for us. Now it was time to create practical implementation of it. Since long time I was looking for mobile theme for our blog but didn't find any and I believe it is because of Mango Blog doesn't allow us to switch theme (skin) on request also looking into code I realise that all skin related information stored at Application level and changing for any visitor will affect everyone who visit blog.
To make Mango blog for mobile device compatible I created one theme using jQuery Mobile and plugin to change theme whenever request come from mobile device.
jQuery Enable/Disable Specific date
Posted by Bharat Patel on November 20, 2010 |
|
Hello Friends,
In web application most of people use jQuery,
jQuery UI and jQuery Plug-ins. Why not? First of all it's free and it
reduces no. of code. Any way what i want to say is today one of my
client wanted to download data according to date. i.e. Data generated on
specific date. Date will be increase day by day so I thought what I
need to do? Suddenly, there is a click in mind jQuery UI Datepicker has
ability to enable/disable date so I just googled for that and got the
code. I really thank TutorBoy.com
as they have done this beauty of a code. Let's see below code how to
enable/disable date using jQuery UI datepicker. I hope it may be helpful
for you.
jQuery code and syntax guidelines for improved code performance
Posted by Nirav Patel on May 28, 2010 |
|
If you want to publish your jQuery plugins following jQuery core code writing guidelines is a good idea. Here is the some of the guidelines.
- Do NOT append an element to the DOM in your loop.
- Don't use string concatenation, instead use array's join() method for a very long strings.
- Don't use "string".match() for RegExp, instead use .test() or .exec()
- Local variables are declared and initialized on one line just below the function declaration with no extra line:
- All strings are in double quotes " ", not single quotes ' ':
- The last but not least, variable naming uses camelCase.
Virtual Fix Table Header JQuery
Posted by Bharat Patel on May 15, 2010 |
|
Hello Friends,
There are so many ways to fix table header. We can fix table header row and rest of content of table will have overflow scroll css set so that a scroll bar appears if page content is higher than page size. We have developed virtual fix table header jQuery plugins. It will copy table header automatically. The TABLE TR ,for which we want to fix position,should have an id specified. Have a look at the code for better understanding. I hope you may like it.
<table> <tr id="fixHeader"> <td>No</td> <td>Name</td> ................ </tr> <tr> <td>No</td> <td>Name</td> ................ </tr> <tr> <td>No</td> <td>Name</td> ................ </tr> ................ </table>
After creating table you need to call jVirtualFixHeader plugin on jquery onload function. The code looks like this;
jQuery(function(){
jQuery('#fixHeader').jVirtualFixHeader();
});
Clear values of all form elements using jQuery
Posted by Akash Bavlecha on April 29, 2010 |
|
Hello friends,
I always wanted to have one common function to reset all form elements. Please have a look at jQuery code that does the same thing. It finds out all element of form and loops over it and reset them. I hope this thing will be helpful specifically where there are many search fields and you need to reset them frequently.
function resetFormElements(frm){
$(frm).find(':input').each(function() {
switch(this.type){
case 'password':
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
Note : I noticed that some time in IE selectbox is not getting cleared. So you can modify script and put
'$(this).attr("selectedIndex",0);' for 'select-one' case. It will work in both IE and mozilla.
Correct Method to check if a Javascript function is Exists or not
Posted by Nirav Patel on April 27, 2010 |
|
Hi everyone,
Sometime you might want to call a function in Javascript but check whether the function exists or not before calling it. You can test if a function exists in Javascript by simply testing for the name of it in an if() condition.
But Note that you can't test for the function name by itself.
This will work but if the function doesn't exist the Javascript will error out.
if(some_function_name)
{}
The Correct method is Like this
if(window.some_function_name)
{}
It's a method of the window object so you need to test for window.some_function_name like so, where some_function_name is the name of the function you wish to test for.
Recent Comments