Please find below code for prevent anchor tag onclick
$(document).ready(function()
{
a.click(function(e)
{
e.preventDefault();
});
});jQuery
jQuery validation for multiple file upload
Please find below code It’s allowed only png, jpg, jpeg and pdf files and upload upto 3 files and not more than 10MB
jQuery(‘input[name=”file[]”]’).change(function(){
var tot_size=0;
var count_files = jQuery(this).get(0).files.length;
for (var i = 0; i < jQuery(this).get(0).files.length; ++i) {
var file_size=jQuery(this).get(0).files[i].size;
tot_size = tot_size+file_size;
}
for (var i = 0; i < jQuery(this).get(0).files.length; ++i) {
var file1=jQuery(this).get(0).files[i].name;
if(!/(\.png|\.jpg|\.jpeg|\.pdf)$/i.test(file1))
{
jQuery(‘input[type=”submit”]’).attr(‘disabled’,’disabled’);
jQuery(“.file_error”).text(“”);
jQuery(this).css(“border”, “1px solid #c00”);
var err_var=true;
}else{
jQuery(“.file_error”).text(“Only png, jpg, jpeg and pdf files are allowed (Upload upto 3 files and 10MB).”);
jQuery(‘input[type=”submit”]’).removeAttr(‘disabled’,’disabled’);
jQuery(this).css(“border”, “1px solid #ddd”);
var err_var=false;
}
}
if(err_var==false){
if(tot_size < 10485760 && count_files < 4){
jQuery(“.file_error”).text(“Only png, jpg, jpeg and pdf files are allowed (Upload upto 3 files and 10MB).”);
jQuery(‘input[type=”submit”]’).removeAttr(‘disabled’,’disabled’);
jQuery(this).css(“border”, “1px solid #ddd”);
}else{
jQuery(‘input[type=”submit”]’).attr(‘disabled’,’disabled’);
jQuery(“.file_error”).text(“”);
jQuery(this).css(“border”, “1px solid #c00”);
}
}
});
Smooth Scroll using jQuery
Please find below code for smooth scroll
$(document).ready(function(){
$(“a”).on(‘click’, function(event) {
if (this.hash !== “”) {
event.preventDefault();
var hash = this.hash;
$(‘html, body’).animate({
scrollTop: $(hash).offset().top
}, 1800, function(){
window.location.hash = hash;
});
}
});
});
Ajax call in wordpress functions.php using jQuery
/* Paste below code in header.php or footer.php */
jQuery.ajax({
type: “POST”,
url: “<?php echo admin_url( ‘admin-ajax.php’ ); ?>”,
data:{
action: “my_action”,
“date”: date,
“month”: month,
“year”: year
},
}).success(function(result){
alert(result);
});
/* Paste below code in functions.php */
add_action( ‘wp_ajax_my_action’, ‘my_action_callback’ );
add_action( ‘wp_ajax_nopriv_my_action’, ‘my_action_callback’ );
function my_action_callback(){
global $wpdb;
$events = $wpdb->get_results(“SELECT ID, title FROM table_name”);
$data = “<ul>”;
foreach($events as $evt){
$data .= “<li>”;
$data .= ‘<a href=”#” target=”_blank”>’.$evt->title.'</a>’;
$data .= “</li>”;
}
$data .= “</ul>”;
echo $data; exit;
}
Hide & Refresh iframe using jQuery
/* Hide iframe using jQuery */
jQuery(‘#iframe’, window.parent.document).hide();
/* Refresh iframe using jQuery */
jQuery(‘#iframe’,window.parent.document).attr(‘src’,jQuery(‘#iframe’,window.parent.document).attr(‘src’));
jQuery datepicker options and errors with WordPress
//Error
jQuery(…).datepicker is not a function
//Solution
var $j = jQuery.noConflict();
$j( “.date_picker” ).datepicker({
});
Some of options
https://jqueryui.com/datepicker/#dropdown-month-year
//Show year and months
changeMonth: true,
changeYear: true
//Desable previous dates
minDate: 0
Date picker in wordpress admin dashboard
window.location in javascript
Please find below code…
//Get current page url
var curr_url = window.location.href
//Get hostname
var host_name = window.location.hostname
//Display the path name of the current URL
var path_name = window.location.pathname
//Get protocol of URL return http:// or https://
var proto = window.location.protocol;
//Get parameters from URL
var x = location.search;
Result:
?email=someone@example.com
jQuery animate scrolltop working in Chrome but not in Mozilla
Sometimes below code not work in Mozilla
// Animation to top
$(‘html,body’).animate({scrollTop:0}, ‘slow’);
Reasons:
Check html, body “overflow” in CSS
remove below CSS
html, body{
overflow: hidden;
}
Global Ajax Event Handlers
.ajaxError()
Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.
.ajaxSend()
Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.
.ajaxStart()
Register a handler to be called when the first Ajax request begins. This is an Ajax Event.
.ajaxStop()
Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.
.ajaxSuccess()
Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event.
Example:
jQuery(document).ajaxSuccess(function() {
alert(‘success’);
});
Working with API with PHP & jQuery
/*jQuery Code*/
$.ajax({
type: ‘POST’,
url: re_url,
data:{“property”: “value”},
}).success(function(result){
$(“.data_div”).html(result);
});
/*PHP code*/
$url = “API URL”;
$doump_values = file_get_contents($url);
$json = json_decode($new_results);
echo “Value: “.$json->property;
AviWeb 