Jquery

How to read TD value using jquery ?

Posted by 30 August, 2013 (0) Comment

Use jQuery to read TD values on click…

<script>
    $(document).ready(function() {
        $('.myROW').click(function() { $(this).find('td').each( function() { console.log($(this).html()); }) })
    });
</script>
 
<table width="1">
    <tr class="myROW">
        <td>PHP</td>
        <td>MYSQL</td>
        <td>Linux</td>
        <td>Apache</td>
        <td>Node.js</td>
    </tr>
</table>
Share
Categories : Jquery Tags :

How to prevent form submission by pressing entering key?

Posted by 6 August, 2013 (0) Comment

Stop form submission by pressing enter key.
this code will prevent form posting by pressing enter key or save time accidental form submission.

 
<form id="my_form_id_here">
All form element and your code here.
</form>
 
 
<script>
    $(document).ready(function(){
        jQuery.each($("#my_form_id_here").find('input'), function(){
            $(this).bind('keypress keydown keyup', function(e){
                if(e.keyCode == 13) { e.preventDefault(); }
            });
        });
    });
</script>
Share
Categories : Jquery Tags :

How to make a JSON object with PHP array for jQuery autocomplete?

Posted by 29 July, 2013 (0) Comment

This php code creates JSON object like ” availableTags “

	var availableTags = [
	{key: "1",value: "NAME 1"},{key: "2",value: "NAME 2"},{key: "3",value: "NAME 3"},{key: "4",value: "NAME 4"},{key: "5",value: "NAME 5"}
	 ];

$Acc_Name_List is your PHP array which have key and value. You can manipulate as you want, make function or add into your class.

            var availableTags = [
                <?Php
                foreach ($Acc_Name_List as $key=>$value_name)
                {
                  if ($key != 0 && $key != "" && $value_name != "")
                  {
                   $list_key = "key: ". '"'.$key.'"';
                   $list_value = "value: ". '"'.$value_name.'"';
                   // $string .= $list_value.',';
                     $string .="{". $list_key.','.$list_value."},";
                  }
                }
                $string = substr($string, 0, -1);
               // echo $result;
                echo $string;
                ?>
Share
Categories : Jquery Tags :

JQuery – how to get a key and value with autocomplete?

Posted by 29 July, 2013 (0) Comment

Jquery autocomplet is easy but when you have to get the key of the array and store into the database or just you want to get it’s a bit tricky.
I have used the jquery UI autocomplete feature with JSON object which you can create with given PHP code.
As soon as you choose a list of the values, key automatically gets populated into another hidden field. For sake of understanding I made it text field.
You can do whatever you want with that id!!

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 
<script>
 
  $(function() {
  	var availableTags = [
	{key: "1",value: "NAME 1"},{key: "2",value: "NAME 2"},{key: "3",value: "NAME 3"},{key: "4",value: "NAME 4"},{key: "5",value: "NAME 5"}
	 ];
 
    $( "#project-name" ).autocomplete({
      minLength: 0,
      source: availableTags,
      focus: function( event, ui ) {
        $( "#project-name" ).val( ui.item.value );
        return false;
      },
      select: function( event, ui ) {
        $( "#project-name" ).val( ui.item.value );
        $( "#project-id" ).val( ui.item.key );
 
        return false;
      } 
	  });
 
  });
 
	</script>
 
<form action="search" method="post" >
<input id="project-name" name="project2" id="searchbox"/>
<input  type="text" id="project-id" />
</form>
Share
Categories : JavaScript,Jquery Tags :

How to pass dropdown value to text box ?

Posted by 16 July, 2013 (0) Comment

I had a situation where requirement was to pass select box value to another text field. Using jQuery it is very easy.

See the code below.

<input id="operational_name"  type="text" value="" name="operational_name">
 
<select id="account_name" name="account_name2">
    <option value="1">YAHOO</option>
    <option value="2">PANASONIC</option>
    <option value="3">Google</option>
</select>
 
 
<script type="text/javascript">
    $(document).ready(function(){
        $("#account_name").live("change", function() {
            $("#operational_name").val($(this).find("option:selected").attr("value"));
 
        });
    });
</script>
Share
Categories : JavaScript,Jquery Tags :

How to pass dropdown name to text box ?

Posted by 16 July, 2013 (0) Comment

Select a dropdown name and pass value to another text field is very easy using jquery.

<input id="operational_name1"  type="text" value="" name="operational_name">
 
<select id="account_name1" name="account_name3">
    <option value="1">PANAAIR</option>
    <option value="2">PANASONIC AVIONICS CORP.</option>
    <option value="3">ZOOM AIRLINES</option>
</select>
 
 
 
<script type="text/javascript">
    $(document).ready(function(){
        $("#account_name1").live("change", function() {
           $('#operational_name1').val($(this).find(":selected").text());
        });
    });
</script>
Share
Categories : JavaScript,Jquery Tags :

How to select all check boxes with one click ?

Posted by 29 November, 2012 (1) Comment

Selecting multiple items from a list to process them or delete them is just one like of jquery program.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
<fieldset>
    <div><input type="checkbox" class="checkall"> Check all</div>
 
    <div><input type="checkbox"> Checkbox 1</div>
    <div><input type="checkbox"> Checkbox 2</div>
    <div><input type="checkbox"> Checkbox 3</div>
</fieldset>
 
 
<script>
$(document).ready(function(){
        $('.checkall').click(function () {
            $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
        });
});
</script>

Here is another version which does not use fieldset

    <div><input type="checkbox" class="checkall" id="select_all"> Check all</div>
 
    <div><input type="checkbox" class="case"> Checkbox 1</div>
    <div><input type="checkbox" class="case"> Checkbox 2</div>
    <div><input type="checkbox" class="case"> Checkbox 3</div>
 
 
<SCRIPT language="javascript">
$(function(){
 
    // add multiple select / deselect functionality
    $("#select_all").click(function () {
          $('.case').attr('checked', this.checked);
    });
 
    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){
 
        if($(".case").length == $(".case:checked").length) {
            $("#select_all").attr("checked", "checked");
        } else {
            $("#select_all").removeAttr("checked");
        }
 
    });
});
</SCRIPT>
Share
Categories : Jquery Tags :

How to pass select box drop down value to multiple text boxes?

Posted by 29 November, 2012 (3) Comment

This code allow you to select dropdown value to multiple text boxes which have same name or class.
Very useful if you are creating price table and want to pass data to next page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
<select id="name" name="name">
<option value="" selected="selected">Please select...One Option</option>
<option value="Om">Om</option>
<option value="Jyoti">Jyoti</option>
<option value="Lal">Lal</option>
</select>
 <input type="text" class="phonnumber" name="phonenumber" value="" readonly="readonly">
<input type="text" class="phonnumber" name="phonenumber" value="" readonly="readonly">
<script type="text/javascript">
 $(document).ready(function(){
	$("#name").live("change", function() {
	  $(".phonnumber").val($(this).find("option:selected").attr("value"));
	});
});
</script>
You can pass select drop down value to one text box without using jQuery.
<script type="text/javascript">
    function explain(value){
      document.getElementById("fanpage_value").value=document.getElementById("list011").value;
    }
</script>
 
    <select id="list011" name="atk" class="but" onChange="explain(this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
 
 <form id="myform" method="post">What would you like to select
    <input id="fanpage_value" value="" disabled="disabled" class="but" size="50" />
      <input id="fanpage_value" value="" disabled="disabled" class="but" size="50" />
    <input type="submit" name="attack" value="POST!!" class="but" />
    </form>
Share
Categories : Jquery Tags :

How to close colorbox when clicking on a link?

Posted by 25 July, 2012 (1) Comment

Colorbox is very cool js plug-in which is used by many developers.

I was creating a facebook app and had situation where i wanted to close Colorbox/popup and open new page which was not suppose to open in Colorbox.

I was searching and found really simple code which can be used in several ways with any php technology stuff.

View Code JAVASCRIPT
<a onclick="parent.$.fn.colorbox.close();" href="http://www.phpmind.com" target="_top">PHPMIND.COM</a> This is good for normal site
 
<a onclick="parent.$.fn.colorbox.close();" href="http://www.phpmind.com" target="_parent">PHPMIND.COM</a> This works when we have Iframe like in facebook apps
Share
Categories : Colorbox,Jquery Tags :

Best PHP Jquery Plugins.

Posted by 17 September, 2010 (1) Comment

jQuery Cheat Sheet

 

Click on Image to Enlarge
Form Validation File upload Form – Select Box stuff
jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV – form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.
Ajax File Upload.
jQUploader.
Multiple File Upload plugin.
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.
jQuery Combobox.
jQuery controlled dependent (or Cascadign) Select List.
Multiple Selects.
Select box manipulation.
Select Combo Plugin.
jQuery – LinkedSelect
Auto-populate multiple select boxes.
Choose Plugin (Select Replacement).
Form Basics, Input Fields, Checkboxes etc. Time, Date and Color Picker Rating Plugins
jQuery Form Plugin.
jQuery-Form.
jLook Nice Forms.
jNice.
Ping Plugin.
Toggle Form Text.
ToggleVal.
jQuery Field Plugin.
jQuery Formín Field plugin.
jQuery Checkbox manipulation.
jTagging.
jQuery labelcheck.
Overlabel.
3 state radio buttons.
ShiftCheckbox jQuery Plugin.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.
jQuery UI Datepicker.
jQuery date picker plugin.
jQuery Time Picker.
Time Picker.
ClickPick.
TimePicker.
Farbtastic jQuery Color Picker Plugin.
Color Picker by intelliance.fr.
jQuery Star Rating Plugin.
jQuery Star Rater.
Content rater with asp.net, ajax and jQuery.
Half-Star Rating Plugin.
Search Plugins Inline Edit & Editors Audio, Video, Flash, SVG, etc
jQuery Suggest.
jQuery Autocomplete.
jQuery Autocomplete Mod.
jQuery Autocomplete by AjaxDaddy.
jQuery Autocomplete Plugin with HTML formatting.
jQuery Autocompleter.
AutoCompleter (Tutorial with PHP&MySQL).
quick Search jQuery Plugin.
jTagEditor.
WYMeditor.
jQuery jFrame.
Jeditable – edit in place plugin for jQuery.
jQuery editable.
jQuery Disable Text Select Plugin.
Edit in Place with Ajax using jQuery.
jQuery Plugin – Another In-Place Editor.
TableEditor.
tEditable – in place table editing for jQuery.
jMedia – accessible multi-media embedding.
JBEdit – Ajax online Video Editor.
jQuery MP3 Plugin.
jQuery Media Plugin.
jQuery Flash Plugin.
Embed QuickTime.
SVG Integration.
Photos/Images/Galleries Google Map Games
ThickBox.
jQuery lightBox plugin.
jQuery Image Strip.
jQuery slideViewer.
jQuery jqGalScroll 2.0.
jQuery – jqGalViewII.
jQuery – jqGalViewIII.
jQuery Photo Slider.
jQuery Thumbs – easily create thumbnails.
jQuery jQIR Image Replacement.
jCarousel Lite.
jQPanView.
jCarousel.
Interface Imagebox.
Image Gallery using jQuery, Interface & Reflactions.
simple jQuery Gallery.
jQuery Gallery Module.
EO Gallery.
jQuery ScrollShow.
jQuery Cycle Plugin.
jQuery Flickr.
jQuery Lazy Load Images Plugin.
Zoomi – Zoomable Thumbnails.
jQuery Crop – crop any image on the fly.
Image Reflection.
jQuery Plugin googlemaps.
jMaps jQuery Maps Framework.
jQmaps.
jQuery & Google Maps.
jQuery Maps Interface forr Google and Yahoo maps.
jQuery J Maps – by Tane Piper.
Tetris with jQuery.
jQuery Chess.
Mad Libs Word Game.
jQuery Puzzle.
jQuery Solar System (not a game but awesome jQuery Stuff).
Tables, Grids etc. Text and Links Menus, Navigations
UI/Tablesorter.
jQuery ingrid.
jQuery Grid Plugin.
Table Filter – awesome!.
TableEditor.
jQuery Tree Tables.
Expandable ìDetailî Table Rows.
Sortable Table ColdFusion Costum Tag with jQuery UI.
jQuery Bubble.
TableSorter.
Scrollable HTML Table.
jQuery column Manager Plugin.
jQuery tableHover Plugin.
jQuery columnHover Plugin.
jQuery Grid.
TableSorter plugin for jQuery.
tEditable – in place table editing for jQuery.
jQuery charToTable Plugin.
jQuery Grid Column Sizing.
jQuery Grid Row Sizing.
jQuery Spoiler plugin.
Text Highlighting.
Disable Text Select Plugin.
jQuery Newsticker.
Auto line-height Plugin.
Textgrad – a text gradient plugin.
LinkLook – a link thumbnail preview.
pager jQuery Plugin.
shortKeys jQuery Plugin.
jQuery Biggerlink.
jQuery Ajax Link Checker.
jQuery Tabs Plugin – awesome! . [demo nested tabs.]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin).
jQuery idTabs.
jdMenu – Hierarchical Menu Plugin for jQuery.
jQuery SuckerFish Style.
jQuery Plugin Treeview.
treeView Basic.
FastFind Menu.
Sliding Menu.
Lava Lamp jQuery Menu.
jQuery iconDock.
jVariations Control Panel.
ContextMenu plugin.
clickMenu.
CSS Dock Menu.
jQuery Pop-up Menu Tutorial.
Sliding Menu.
Charts, Presentation etc. Border, Corners, Background Tooltips
jQuery Wizard Plugin .
jQuery Chart Plugin.
Bar Chart.
jQuery Corner.
jQuery Curvy Corner.
Nifty jQuery Corner.
Transparent Corners.
jQuery Corner Gallery.
Gradient Plugin.
jQuery Plugin – Tooltip.
jTip – The jQuery Tool Tip.
clueTip.
BetterTip.
Flash Tooltips using jQuery.
ToolTip.
Accordions, Slide and Toggle stuff Browserstuff DOM, Ajax and other jQuery plugins
jQuery Plugin Accordion.
jQuery Accordion Plugin Horizontal Way.
haccordion – a simple horizontal accordion plugin for jQuery.
Horizontal Accordion by portalzine.de.
HoverAccordion.
Accordion Example from fmarcia.info.
jQuery Accordion Example.
jQuery Demo – Expandable Sidebar Menu.
Sliding Panels for jQuery.
jQuery ToggleElements.
Coda Slider.
jCarousel.
Accesible News Slider Plugin.
Showing and Hiding code Examples.
jQuery Easing Plugin.
jQuery Portlets.
AutoScroll.
Innerfade.
Wresize – IE Resize event Fix Plugin.
jQuery ifixpng.
jQuery pngFix.
Link Scrubber – removes the dotted line onfocus from links.
jQuery Perciformes – the entire suckerfish familly under one roof.
Background Iframe.
QinIE – for proper display of Q tags in IE.
jQuery Accessibility Plugin.
jQuery MouseWheel Plugin.

Alert, Prompt, Confirm Windows

jQuery Impromptu.
jQuery Confirm Plugin.
jqModal.
SimpleModal.

FlyDOM.
jQuery Dimenion Plugin.
jQuery Loggin.
Metadata – extract metadata from classes, attributes, elements.
Super-tiny Client-Side Include Javascript jQuery Plugin.
Undo Made Easy with Ajax.
JHeartbeat – periodically poll the server.
Lazy Load Plugin.
Live Query.
jQuery Timers.
jQuery Share it – display social bookmarking icons.
jQuery serverCookieJar.
jQuery autoSave.
jQuery Puffer.
jQuery iFrame Plugin.
Cookie Plugin for jQuery.
jQuery Spy – awesome plugin.
Effect Delay Trick.
jQuick – a quick tag creator for jQuery.
Metaobjects
.
elementReady.
Drag and Drop XML XSL JSON Feeds CSS
UI/Draggables.
EasyDrag jQuery Plugin.
jQuery Portlets.
jqDnR – drag, drop resize.
Drag Demos.
XSLT Plugin.
jQuery Ajax call and result XML parsing.
xmlObjectifier – Converts XML DOM to JSON.
jQuery XSL Transform.
jQuery Taconite – multiple Dom updates.
RSS/ATOM Feed Parser Plugin.
jQuery Google Feed Plugin.
jQuery Style Switcher.
JSS – Javascript StyleSheets.
jQuery Rule – creation/manipulation of CSS Rules.
jPrintArea.
Share
Categories : Jquery Tags :