I'm having issues making a task tree I have dynamically check boxes. Basically if a top level (parent task) is checked, I would like it to check all of the subtasks (child boxes). I have this working on one of my task trees, but for some reason can't get it to work for my other.
<script>
$(function() {
$.ajaxSetup( { cache: false } );
$('.task-tree').tree({
ui: {
theme_name: 'checkbox'
},
plugins : {
checkbox: { three_state: false }
},
callback: {
onload: function( tree ) {
tree.open_all();
$('.task-tree li a').each( function() {
var taskID = GetIdNum( $(this).attr('id') );
if ( $('#Task' + taskID + 'Enabled').val() == 1 )
{
console.log( $(this).parent() );
jQuery.tree.plugins.checkbox.check( $(this).parent() );
}
});
},
onchange: function( node, tree ) {
var selectedID = GetIdNum( $(node).find('a').attr('id') );
var required = $('#Task' + selectedID + 'Required').val();
console.log( 'REQ --> ' + required );
if ( required == 1 )
{
return false;
}
else
{
$('.task-tree li a').each( function() {
var taskID = GetIdNum( $(this).attr('id') );
console.log( taskID );
$('#Task' + taskID + 'Enabled').val(1);
});
console.log( '----------------------------------------------' );
var unchecked = jQuery.tree.plugins.checkbox.get_unchecked(tree).find('a.not-required');
$(unchecked).each( function(){
var taskID = GetIdNum( $(this).attr('id') );
console.log( taskID );
$('#Task' + taskID + 'Enabled').val(0);
});
console.log( '*************************************************' );
}
}
}
});
});
Let me know if you need any more info about the problem.
Related
I have an issue in a Wordpress installation with a plugin. There is a calendar which you can click on a day (or a range of days) and from ajax calls through admin-ajax.php it calculates product costs.
The problem is that, when I click on a calendar cell, the admin-ajax.php is called twice. The first time for a few milliseconds and canceled immediately. Then automatically, it calls it once again and get the ajax response. When I click for a second time on a calendar cell, the admin-ajax.php is called 3 times. The first two are canceled and only the last one get a response.
I found that the code that is used for this part is the following. However, I cannot find any issue on it, even if I can see those cancelled calls on Developer console.
$('.wc-bookings-booking-form')
.on('change', 'input, select', function() {
var index = $('.wc-bookings-booking-form').index(this);
if ( xhr[index] ) {
xhr[index].abort();
}
$form = $(this).closest('form');
var required_fields = $form.find('input.required_for_calculation');
var filled = true;
$.each( required_fields, function( index, field ) {
var value = $(field).val();
if ( ! value ) {
filled = false;
}
});
if ( ! filled ) {
$form.find('.wc-bookings-booking-cost').hide();
return;
}
$form.find('.wc-bookings-booking-cost').block({message: null, overlayCSS: {background: '#fff', backgroundSize: '16px 16px', opacity: 0.6}}).show();
xhr[index] = $.ajax({
type: 'POST',
url: booking_form_params.ajax_url,
data: {
action: 'wc_bookings_calculate_costs',
form: $form.serialize()
},
success: function( code ) {
if ( code.charAt(0) !== '{' ) {
console.log( code );
code = '{' + code.split(/\{(.+)?/)[1];
}
result = $.parseJSON( code );
if ( result.result == 'ERROR' ) {
$form.find('.wc-bookings-booking-cost').html( result.html );
$form.find('.wc-bookings-booking-cost').unblock();
$form.find('.single_add_to_cart_button').addClass('disabled');
} else if ( result.result == 'SUCCESS' ) {
$form.find('.wc-bookings-booking-cost').html( result.html );
$form.find('.wc-bookings-booking-cost').unblock();
$form.find('.single_add_to_cart_button').removeClass('disabled');
} else {
$form.find('.wc-bookings-booking-cost').hide();
$form.find('.single_add_to_cart_button').addClass('disabled');
console.log( code );
}
},
error: function() {
$form.find('.wc-bookings-booking-cost').hide();
$form.find('.single_add_to_cart_button').addClass('disabled');
},
dataType: "html"
});
})
.each(function(){
var button = $(this).closest('form').find('.single_add_to_cart_button');
button.addClass('disabled');
});
And here is a screenshot from the Dev Console:
EDIT: I think I found the problem, but I am not sure. There is also this part of code which was supposed to not used at all. There is a feature for time on calendar, but it isn't activated. So, this code should not be run.
$('.wc-bookings-booking-form').on( 'date-selected', function() {
show_available_time_blocks( this );
});
var xhr;
function show_available_time_blocks( element ) {
var $form = $(element).closest('form');
var block_picker = $form.find('.block-picker');
var fieldset = $form.find('.wc_bookings_field_start_date');
var year = parseInt( fieldset.find( 'input.booking_date_year' ).val(), 10 );
var month = parseInt( fieldset.find( 'input.booking_date_month' ).val(), 10 );
var day = parseInt( fieldset.find( 'input.booking_date_day' ).val(), 10 );
if ( ! year || ! month || ! day ) {
return;
}
// clear blocks
block_picker.closest('div').find('input').val( '' ).change();
block_picker.closest('div').block({message: null, overlayCSS: {background: '#fff', backgroundSize: '16px 16px', opacity: 0.6}}).show();
// Get blocks via ajax
if ( xhr ) xhr.abort();
xhr = $.ajax({
type: 'POST',
url: booking_form_params.ajax_url,
data: {
action: 'wc_bookings_get_blocks',
form: $form.serialize()
},
success: function( code ) {
block_picker.html( code );
resize_blocks();
block_picker.closest('div').unblock();
},
dataType: "html"
});
}
I am using setInterval and then unable to clearInterval in my code. Please see the code
I am getting the value of complete and it is true and also entering the if statement but clearInterval still not working. I am tired and trying for last 10 hours but not find the bug. I checking the console.log and it is not stopping the interval.
jQuery(document).ready(function() {
var complete = false;
var Interval;
jQuery( "#form" ).submit(function() {
Interval = setInterval(get, 100);
post();
return false;
});
function post(){
var url = "my/url/here";
var data = {
'action': 'action/here',
'name': 'value'
};
jQuery.post(url, data, function(response) {
jQuery("#emails").html(response);
}).done(function() {
//alert( "second success" );
})
.fail(function() {
//alert( "error" );
})
.always(function() {
complete = true;
//alert( "finished" );
});
} // End post()
function get(){
var url = "url/goes/here";
if(complete == true){
clearInterval(Interval);
}
var data = {
'action': 'action/here',
};
jQuery.get(url, data, function(response) {
console.log(response);
jQuery("#progress").html(response);
});
} // End get()
});
here is the original code below. ajax call is working fine but clearInterval() not working
<script type="text/javascript" >
jQuery(document).ready(function() {
jQuery(".juee_emails_row").hide();
var juee_complete = false;
var juee_Interval;
jQuery( "#juee_form" ).submit(function() {
jQuery(".juee_emails_row").show();
juee_Interval = setInterval(juee_get, 100);
juee_post();
return false;
});
function juee_post(){
var data = {
'action': 'juee_get_emails',
'juee_data_option': jQuery('input[name=juee_data_option]:checked', '#juee_form').val()
};
jQuery.post(ajaxurl, data, function(response) {
jQuery("#juee_emails_td").html(response);
}).done(function() {
//alert( "second success" );
})
.fail(function() {
//alert( "error" );
})
.always(function() {
juee_complete = true;
//alert( "finished" );
});
} // End juee_post()
function juee_get(){
if(juee_complete == true){
clearInterval(juee_Interval);
}
var data = {
'action': 'juee_progress',
};
jQuery.get(ajaxurl, data, function(response) {
console.log(response + " email found");
jQuery("#juee_progress_td").html("");
jQuery("#juee_progress_td").html(response);
});
} // End juee_get()
});
</script>
I am trying to validate part of a form, I am stuck on checking the database to see if a company name exists before submitting the form. This is a stripped down demo from the jquery ui modal from with the addition of checking if the company already exists. I am aware of SQL injection and am not doing anything about it just yet. At the moment the form won't submit as I'm missing something, I just don't know what yet.
Any help would be much appreciated.
This is what I have so far
The JS code:
$(function() {
var dialog, form,
company_name = $( "#company_name" ),
tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkCompany( o, n ) {
$.ajax({
type: "POST",
url: "crud.php?act=check",
data: "&company_name=" + o.val(),
success: function(response){
if(response > 0){
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
})
}
function addUser() {
var valid = true;
valid = valid && checkCompany( company_name, "Company Name already exists." );
if ( valid ) {
$.ajax({
type: "POST",
url: "crud.php?act=create",
data: "&company_name=" + company_name.val(),
success: function(data){
}
});
dialog.dialog( "close" );
}
return valid;
}
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 350,
width: 350,
modal: true,
buttons: {
"Create an account": addUser,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
allFields.removeClass( "ui-state-error" );
}
});
form = dialog.find( "form" ).on( "submit", function( event ) {
event.preventDefault();
addUser();
});
$( "#create-user" ).button().on( "click", function() {
dialog.dialog( "open" );
});
});
The php side (crud.php):
include 'connection.php';
$action = $_GET['act'];
if(isset($_POST['company_name'])){
$company_name = $_POST['company_name'];
}
switch($action){
case 'create':
$q = "INSERT INTO company_info (company_name) VALUES
('".$company_name."')";
mysql_query($q);
break;
case 'check':
$result = mysql_query('SELECT company_name FROM company_info WHERE company_name = "'.$company_name.'"');
$num = mysql_num_rows($result);
echo $num;
break;
}
CheckCompany returns nothing. You are returning true or false from success but that goes nowhere.
You need an outer deferred so you can return something from your ajax success, back through checkcompany out to your call.
Basically, checkcompany is called and exits/returns normally. SOme time later, the success function runs but that is independent because it's async. It's not part of your checkcompanmy function.
Ideally, you should trigger an event on ajax success that your element subscribes to.
Examples from comment below:
checkCompany(o,n) {
var retval = false;
$.ajax({
sync : true,
success: function(data) {
retval = true;
}
});
return retval;
}
OR asynch:
checkCompany(o,n) {
$.ajax({
success: function(data) {
$("#ID").trigger('ajsuccess.company');
}
});
}
OR using returned promise:
if (valid) {
checkCompany().done(function() {
do the secondary ajax call in here
}
}
checkCompany(o,n) {
return $.ajax();
}
I'm using this jquery plugin : JQuery Autocomplete. Problem I'm getting json data but it's not appearing on the autocomplete list.
The JQuery code:
$( "#student-id" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "ajax/ajax_admin.php?auto_student=" + $( "#student-id" ).val(),
dataType:"json",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data.students, function( item ) {
return {
label: item.id +" , "+ item.name,
value: item.id
}
}));
}
});
},
minLength: 2,
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
The PHP Script is :
public function load_ajax_student_list($val)
{
$val = "%".$val."%";
$stmt = $this->conn->prepare("select * from student where studentAiubId like :value limit 0,5");
$stmt->bindValue(':value', $val);
$stmt->execute();
if($stmt->rowCount() < 1)
echo "";
else
{
$result = $stmt->fetchAll();
$output = array();
foreach($result as $row)
{
if($row['mname']=="")
$name = $row['fname']." ".$row['lname'];
else
$name = $row['fname']." ".$row['mname']." ".$row['lname'];
$data["name"] = $name;
$data["id"] = $row['studentAiubId'];
$output["students"][] = $data;
}
echo json_encode($output);
}
}
If the call goes like this: ajax/ajax_admin.php?auto_student=10
The produced data from PHP script is :
{
"students": [
{"name":"Moh Mamun Sardar","id":"10-15987-1"},
{"name":"Rehan Ahmed","id":"10-12451-2"},
{"name":"Abid Hassan","id":"10-15412-1"},
{"name":"Abir Islam","id":"10-11245-1"}
]
}
But Nothing showing on autocomplete. What I'm doing wrong?
try something like this
$.map( data.students, function(item ) {
return {
label: item.name,
value: item.id
});
it is minlength not minLength see casing
You have forgotten the "appendTo" property. In this propery you have to specify the selector of the element you wish the information to be appended to like this
appendTo: '.class' or appendTo: '#id'
You have to add this property to the initialization of the autocomplete as a sibling of source and etc ...
I am trying to make auto complater working in wordpress.
Here is my php code
function autocompleteCallback() {
global $wpdb; // this is how you get access to the database
//$whatever = $_POST['search_string'];
$name=$_POST['search_string'];
// echo'hiii'. $name='a';
$employee=$wpdb->get_results("SELECT `user_login` FROM wp_users WHERE user_login LIKE '$name%' ");
foreach($employee as $key=> $value){
$myarr[]=array('val' => $value->user_login);
}
//wp_reset_query();
echo json_encode($myarr);
die(); // this is required to return a proper result
}
add_action('wp_ajax_autocompleteCallback', 'autocompleteCallback');
add_action('wp_ajax_nopriv_autocompleteCallback', 'autocompleteCallback');
Here is my jquery
$(function() {
//function log( message ) {
// $( "<div>" ).text( message ).prependTo( "#log" );
// $( "#log" ).scrollTop( 0 );
// }
//alert('huii');
$("#se").autocomplete({
//dataType: "json",
source: function( request, response ) {
$.ajax({
url: './wp-admin/admin-ajax.php',
dataType: "json",
data: {
action: 'autocompleteCallback',
search_string:'a',
// term: $(options.fieldName).val()
},
success: function( data ) {
//alert(data);
alert('huii');
response( $.map( data.results, function( item ) {
return {
alert('hi');
label: item.val,
///value: item.title,
//url: item.url
}
}));
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR, textStatus, errorThrown);
}
});
},
minLength: 1,
//select: function( event, ui ) {
// log( ui.item ?
// "Selected: " + ui.item.value + " aka " + ui.item.id :
// "Nothing selected, input was " + this.value );
// }
// select: function( event, ui ) {
// log( ui.item ?
// "Selected: " + ui.item.value + " aka " + ui.item.id :
// "Nothing selected, input was " + this.value );
// }
});
});
However, I could make this work in normal html, php web site where I passe source as a string. I can't figure where I have done mistake when I use function for source tag.
html code
<input id ="se" type="text" name="test" width="20" />
Why you dont just use this awesome plugin: SearchAutocomplete