jquery – purabtech.in

Jquery form validation with modal dialog box with custom messages

I used the model dialog box, In that form I want to use the jquery form validation. code for Jquery form validation with modal dialog box with custom messages.

Jquery form validation with modal dialog box with custom messages

I used the following HTML code:

01<form id="form1" name="form1">
02Field 1: <input id="field1" type="text" class="required" />
03</form>
04 
05<div>
06<input id="btn" type="button" value="Validate" />
07</div>
08<div>
09<input id="dialogbtn" type="button" value="Open Dialog" />
10</div>
11 
12<div id="dialog-form" title="Create new user">
13<form id="form2">
14 
15<label for="name">Name</label>
16<input type="text" name="name" id="name" required="true" />
17<br/>
18<label for="email">Email</label>
19<input type="text" name="email" id="email" required="true" email="true"/>
20<br/>
21<label for="password">Password</label>
22<input type="password" name="password" id="password"/>
23 
24</form>
25</div>

following is the javascript code:

01$(function() {
02//simple example 1
03//click event for first button
04$('#btn').click(function() {
05$("#form1").valid(); //validate form 1
06});
07 
08//example to validate inside a dialog box
09 
10//dialogopen button click event
11$('#dialogbtn').click(function() {
12$( "#dialog-form" ).dialog( "open" );
13});
14 
15//code for dialog
16$( "#dialog-form" ).dialog({
17autoOpen: false,
18height: 300,
19width: 350,
20modal: true,
21buttons: {
22"Save": function() { //on click of save button of dialog
23if($('#form2').valid()){ //call valid for form2 and show the errors
24//alert('submit form'); //only if the form is valid submit the form
25$( this ).dialog( "close" );
26}
27},
28Cancel: function() {
29$( this ).dialog( "close" );
30}
31}
32 
33});
34});

After this i wanted to added the custom error messages.

I used the following code:

01jQuery(function ($) {
02$("#form2").validate({
03errorLabelContainer: '#errors',
04messages: {
05email: {
06required: "Please enter an email address",
07email: "Please enter a valid email address"
08},
09name: {
10required: "Please enter your name"
11}
12},
13submitHandler: function () {
14return false;
15}
16});
17});

Load jQuery library from Google CDN

WordPress itself uses the jquery in all wordpress themes and loads automatically. But it is always good to load the jquery library through google CDN. It saves your sites bandwidth. Many people already written about same so here I am just putting the method.

Load jQuery library from Google CDN

Load the jQuery library from Google CDN is always good for seo and better performance of site. WordPress itself uses the jquery in all wordpress themes and loads automatically.

For more libraries you can visit the following URL:
https://developers.google.com/speed/libraries/devguide

What you need is, just copy and paste the following code into your functions.php file.

1function jquery_from_google_cdn() {
2   if (!is_admin()) {
3      wp_deregister_script('jquery');
4      wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '1.11.1');
5      wp_enqueue_script('jquery');
6   }
7}
8add_action('init', 'jquery_from_google_cdn');

Load jQuery in wordpress footer section will be best

Many latest framework are loading all javascript in footer. They reduce the page loading the errors. But wordpress load the jquery and other javascript in header.

loading javascript libraries in footer will be always best for every web or mobile application. Here in this article, I will show to Load jQuery in wordpress footer section.
But using following code you can load your javascripts and jquery in footer area. You just need to copy and paste the following code into the functions.php file.

Load jQuery in wordpress footer section

1function wpai_add_jquery_in_footer( &$scripts) {
2    if ( ! is_admin() )
3        $scripts->add_data( 'jquery', 'group', 1 );
4}
5add_action( 'wp_default_scripts', 'wpai_add_jquery_in_footer' );

After doing the this you js scripts will load in footer. This js will load in footer for only normal users, Not for admin user.

Load jQuery in wordpress footer section will be best

Best five jquery wordpress slider plugins

In every second wordpress sites we used the slider or slideshow. Sliders are very important in wordpress sites. There are many requirements about different types of sliders. Here I collected some very popular jquery wordpress slider plugins. Slider plugins are required in very second wordpress websites. I tested the following wordpress plugins and it found great features..

Best five jquery wordpress slider plugins

jQuery Slider

This is a highly customizable jQuery Slider plugin. You can set its width, height, pagination and other parameters. You can use it on your post or page using schortcode

JJ NextGen JQuery Slider

The ‘JJ NextGen JQuery Slider’ allows you to create a ‘Nivo slider’ (http://nivo.dev7studios.com/) as a widget or as a shortcode. This plugin uses the ‘NextGen Gallery’ plugin for its images.

Requirements:

NextGen Gallery Plugin (http://wordpress.org/extend/plugins/nextgen-gallery/)

NextGen Gallery Integration:

This plugin uses the original width and height of the image uploaded so make sure the images are the correct dimensions when uploaded.
Alt & Title Text Field: Provide a full url here and the image will link to this. Only works if alt field starts with either of these; /, http, or ftp.
Description Field: Will be used as a caption.

RoundAbout JQuery Slider

This plugin allows you to insert a standard version of the Roundabout jQuery rotating slider into any page or post using a shortcode.

Promotion Slider

Promotion slider is a jQuery slider that makes it easy to insert a simple slideshow, or implement multiple rotating ad zones, on a webpage. Because it is highly-customizable, you are in complete control of what shows on the slider, what shows on your promotion pages and how it all works. A simple options page and straight-forward shortcodes provide great flexibility to the average user, while power users can take advantage of special actions and filters built into the plugin to add their own customizations.

WP Orbit Slider

WP Orbit Slider is based around the jQuery Orbit Slider from the excellent team Zurb. It uses a custom post type for each slide and taxonomies to create slider groups. The restriction is one slider per post/page. Dont fill your pages with sliders. Use one. Make it bold and get your message across!

Captain Slider

This is the Slider Plugin I always wished I had. Simply install the plugin, add some slides & use your slider! It’s that easy.

Features:

Plenty of Settings like animation, speed, etc.
Multiple Sliders
Slider Sorter: Order your slides using drag & drop AJAX.
Responsive
Video Slides
Captions
Slide Links
Shortcode
Free

Simple Nivo Slider

The Simple Nivo Slider plugin provides easy access to Gilbert Pellegrom’s excellent jQuery-based Nivo Slider. The admin panel makes it easy to tweak the most commonly used Nivo Slider options from within WordPress.

Cyclone Slider 2

Cyclone Slider 2 follows the keep it simple mantra. It leverages WordPress’ built-in features. It uses custom post for the slideshow, custom fields to store settings, and media uploader for the images. It also uses a template system that allows developers to easily customize the slideshow to their needs. Its simple yet flexible.

Features:

Very easy to use interface! Blends seamlessly with your WordPress workflow.
Supports image, video, and custom HTML slides.
Powered by Cycle 2, the most flexible jQuery slideshow plugin.
A template system that allows developers to easily customize the slideshows.
Customizable tile transition effects.
Ability to add per-slide transition effects.
Unlimited slideshows.
Unique settings for each slideshow.
Supports random slide order.
Shortcode for displaying slideshows anywhere in your site.
Ability to import images from NextGEN (NextGEN must be installed and active).
Ability to use qTranslate quick tags for slide title and descriptions (qTranslate must be installed and active).
Allows title and alt to be specified for each slide images.
Comes with a widget to display your slideshow easily in widget areas.
It’s totally FREE!

Hope you like the list

Best five jquery wordpress slider plugins

implement jquery UI datepicker in wordpress

wordpress and jquery both are powerful tool. In plugin we need datepicker sometime. In this article i showed how to implement jquery UI datepicker in wordpress

implement jquery UI datepicker in wordpress

Some WP developers use the plugins to add the datepicker in wordpress. But you can add the Jquery datepicker in wordpress. How can use the Jquery UI in your wordpress theme and plugin using following code. For adding the datepicker in theme you need to just add the following code in functions.php file.

[viral-lock message=”Some Source code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]

01add_action( 'init', 'wpapi_date_picker' );
02function wpapi_date_picker() {
03    wp_enqueue_script( 'jquery' );
04    wp_enqueue_script( 'jquery-ui-core' );
05    wp_enqueue_script( 'jquery-datepicker', 'http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.datepicker.js', array('jquery', 'jquery-ui-core' ) );
06}
07 
08add_action( 'wp_footer', 'wpapi_print_scripts');
09function wpapi_print_scripts() {
10    ?>
11<script type="text/javascript">
12    jQuery(document).ready(function() {
13        jQuery('#datepicker').datepicker();
14    })
15</script>
16    <!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php
17}

[/viral-lock]

For showing the datepicker control in theme or plugin use following code.

1<script type="text/javascript">
2jQuery(document).ready(function() {
3    jQuery('#datepicker').datepicker({
4        dateFormat : 'yy-mm-dd'
5    });
6});
7</script>

implement jquery UI datepicker in wordpress

If you have any issue for adding the datepicker control then please add comment or email me.

How to include jquery ui in wordpress

When you enqueue your script, it enqueues for the whole site including admin panel. Using wordpress hook you can include jquery ui in wordpress website. If you don’t want the script in the admin panel, you can only include them for the site in frontend.

How to include jquery ui in wordpress

This following code you need to add in functions.php file.

1function my_add_frontend_scripts() {
2    if( ! is_admin() ) {
3        wp_enqueue_script('jquery');
4        wp_enqueue_script('jquery-ui-core');
5    }
6}
7add_action('init', 'my_add_frontend_scripts');

Then you are able to see the jquery-ui in your wordpress theme.

wordpress comment preview for box comment without plugin

Showing wordpress comment preview for comment box is always good for attracting the visitors. I shown code here for show the comments preview.

wordpress comment preview for comment box

Many times comments preview will be useful for visitors to see how comments will be looking. Using google Jquery or wordpress jquery you can add the comment preview to your wordpress blog. Showing comment preview is always good for attracting the visitors. Many clients demands for this. I shown you the example code over here for show the comments preview.

In this tutorial I am using the wordpress inbuild jquery. First open your header. php file from your theme folder and after head tag following code.

01<?php wp_enqueue_script(</code><code>'jquery'</code><code>); ?>
02<?php if (is_single()) { ?>
03 
04<script type="text/javascript">
05 
06jQuery(document).ready(function(){
07 
08    jQuery("").add("<h3 id='preview-title'>Comment Preview</h3><div id='comment-preview'></div>").appendTo(document.body);
09    jQuery("#comment-preview, #preview-title").insertAfter("#comment");
10 
11    var $comment = '';
12    jQuery('#comment').keyup(function() {
13        $comment = jQuery(this).val();
14        $comment = $comment.replace(/\n\n+/g, '<br /><br />').replace(/\n/g, "<br />");
15        jQuery('#comment-preview').html( $comment );
16    });
17 
18});
19 
20</script>
21<?php } ?>

Then Open Your style.css file from your theme folder put the following code in that file.

1#comment-preview {
2    border: 1px solid #ccc;
3    padding: 5px 15px 15px 15px;
4    }
5h3#preview-title {
6    margin-bottom: 5px
7    }

After that upload the modified files on server. you will see following functionality for your wordpress commnets section.

wordpress comment preview for comment box

If you are not wordpress developer then please dont try this.

Create an Autocomplete Search Field in wordpress

WordPress tutorial for, Create an Autocomplete Search Field in wordpress. In wordpress also you can easily achieve the auto complete search form easily.

Create an Autocomplete Search Field in wordpress

Now auto complete search box is very common for every web projects. Auto complete search functionality you can see in google also. In wordpress also you can easily achieve the auto complete search form easily.

Create an Ajax-based Auto complete Search Field in wordpress

There is very nice Jquery plugin for auto complete. First download the latest version of jQuery , as well as the autocomplete plugin. Now, create a folder in your theme called “javascripts” and copy paste the two files in that folder. Open your header.php from your wordpress theme folder and put following code in that file.

1<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascripts/jquery.js"></script>
2<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascripts/jquery.autocomplete.pack.js"></script>
3<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/javascripts/jquery.autocomplete.css" media="screen" />
4<script type="text/javascript">
5$(document).ready(function(){
6    var data = '<?php global $wpdb; $search_tags = $wpdb->get_results("SELECT name FROM $wpdb->terms"); foreach ($search_tags as $mytag){ echo $mytag->name. " "; } ?>'.split(" ");
7    $("#SEARCH_INPUT_BOX").autocomplete(data);
8})
9</script>

Just you need change the search input box id in place of SEARCH_INPUT_BOX.
If you are wordpress developer then only use the above code in header.php file. If you are facing any issue then please write to on support@purabtech.in.

Here are some very useful articles which are related to wordpress Search functionality.

Add a search from in your navigation menu of wordpress theme

Set the style for default search widget

add ajax pagination in wordpress blog

For without refresh the data from home page if you want to show the pages and pagination in wordpress blog than you can use the following code for add ajax pagination in wordpress blog.

add ajax pagination in wordpress blog

With the help of jquery you can easily add the pagination wordpress blog site. You just need to add the following code into header.php file.

[viral-lock message=”Source code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]

01<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php wp_enqueue_script('jquery'); ?>
02<script>
03jQuery(document).ready(function(){
04 // ajax pagination
05 jQuery('#wp_pagination a').live('click', function(){ // if not using wp_pagination, change this to correct ID
06 var link = jQuery(this).attr('href');
07 // #main is the ID of the outer div wrapping your posts
08 jQuery('#main-container').html('<div><h2>Loading...</h2></div>');
09 // #entries is the ID of the inner div wrapping your posts
10 jQuery('#main-container').load(link+' #entries')
11 });
12}); // end ready function
13</script>

[/viral-lock]

just put above code in header.php file in head section. Just make sure that you are putting above code after wp_head function.

If you are not wordpress developer then dont use following code and If you are facing any issue then write to me on support@purabtech.in

smart way to use jquery in wordpress theme

I created many wordpress themes for various purpose and clients. Jquery is common requirement for all the project. That is for menu, slider or validation and for effects. In wordpress adding the Jquery is very easy because wordpress itself uses the Jquery for admin panel. They provided the wordpress api for adding the jquery in wordpress theme files.

smart way to use jquery in wordpress theme

wordpess developers are always looking for wordpress jquery plugin, wordpress include jquery, wordpress jquery ui, wordpress jquery noconflict, wordpress jquery theme, wordpress jquery version, wordpress jquery slider, wordpress jquery not working. Here is the solution

Following is the simplest way to add jquery in wordpress theme.You just need to use the following code in your wordpress theme functions.php file.

1function my_init() {
2 if (!is_admin()) {
3 wp_enqueue_script('jquery');
4 }
5}
6add_action('init', 'my_init');

This way you can easily add the juqery in wordpress theme.

You can add the jquery from google also. Because google also like jquery. You just need to put the following function in your functions.php file.

1function my_init() {
2    if (!is_admin()) {
3 
4        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2');
5 
6    }
7}
8add_action('init', 'my_init');

Main reason adding jquery from google is that will load the jquery faster in your site.

How you can use jquery in your theme.

you can use the jquery anywhere in theme file as follows

1jQuery(function ($) {
2 /* You can safely use $ in this code block to reference jQuery */
3});

For DOM ready function or onload event you can use the juqery as follows.

1jQuery(document).ready(function($) {
2 
3//Your custom code will goes here.
4 
5})

You can use the above function for slider or menu and any effect in your wordpress theme.

If you want to know about more Jquery and wordpress then you can refer following articles.

wordpress and jquery conflicts – How to solve that
100+ jquery and CSS techniques and Tips and tutorials
jquery tips for wordpress theme developers
Fadein and Fadeout effect through javascript
minimize, restore, maximize and hide functionality with javascript without using jquery
Complete Javascript form Validation now easy ( Checkbox, Websites, Email, Maxlength)

If you face any issue using jquery with wordpress then please write comment or email me on support@purabtech.in

Jquery form validation with modal dialog box with custom messages

Share Article:

Load jQuery library from Google CDN

Share Article:

Load jQuery in wordpress footer section

Share Article:

Best five jquery wordpress slider plugins

RoundAbout JQuery Slider

Features:

Share Article:

implement jquery UI datepicker in wordpress

Share Article:

How to include jquery ui in wordpress

Share Article:

wordpress comment preview for comment box

Share Article:

Create an Autocomplete Search Field in wordpress

Here are some very useful articles which are related to wordpress Search functionality.

Share Article:

add ajax pagination in wordpress blog

Share Article:

smart way to use jquery in wordpress theme

How you can use jquery in your theme.

If you want to know about more Jquery and wordpress then you can refer following articles.

Share Article: