Default select issue for JQuery UI 'selectable' - javascript

Below is my JS. When the page loads, I want it to automatically run the function as if its being clicked on. The default selection makes it started selected, but doesn't initiate the function. Any idea on how to make that work?
$(function() {
$( "#selectable" ).selectable({
selected: updatefilters
});
function updatefilters(ev, ui){
// get the selected filters
var template, html;
var pagego;
if(! pagego){
var page = 0;
}
var $selected = $('#selectable').children('.ui-selected');
// create a string that has each filter separated by a pipe ("|")
var filters = $selected.map(function(){return this.id;}).get().join("\|");
$.ajax({
type: "POST",
url: 'updatefilters',
dataType: 'json',
data: { filters: filters, page: page },
success: function(data){
html = "Do Something";
$('#board').html(html);
}
});
}
$('#lets').addClass('ui-selected')
});
Thanks!

Just call the function after declaring it:
$(function() {
$( "#selectable" ).selectable({
selected: updatefilters
});
function updatefilters(ev, ui){
...
}
$('#lets').addClass('ui-selected');
// none of your params are consumed in the function anyways, so you don't need to pass anything
updatefilters();
});

Try to run function in the body tag
<body onload="name_of_function()">

Related

AJAX async:true breaks site on mobile browsers

I am using this function to return search results via AJAX. However, it kills mobile browsers on search. It works if I set it to 'async:false' but this means that I can't have a loading icon.
I cant find anything online to indicate why this would not be working on mobile, when it works fine on desktop.
Any ideas?
(function($) {
$(document).ready(function() {
$("#filter").on('keyup input', function() {
delay(function() {
var input = $('#filter');
var query = input.val();
var content = $('#content')
$.ajax({
type: 'post',
url: myajax.ajaxurl,
async: true,
data: {
action: 'load_search_results',
query: query
},
beforeSend: function() {
input.prop('disabled', true);
content.addClass('loading');
},
success: function(response) {
input.prop('disabled', false);
content.removeClass('loading');
content.html(response);
myPluginsInit();
}
});
return false;
}, 700);
});
});
})(jQuery);
I was able to solve this problem by adding a separate 'loader' div with an ID of loader to my page, and add the loading class to this instead. The code now looks like this:
(function($) {
$(document).ready(function() {
$("#filter").on('keyup input', function(){
delay(function(){
var input = $('#filter');
var query = input.val();
var content = $('#content')
$.ajax({
type : 'post',
url : myajax.ajaxurl,
async: true,
data : {
action : 'load_search_results',
query : query
},
beforeSend: function() {
input.prop('disabled', true);
$('#loader').addClass('loading');
},
success : function( response ) {
input.prop('disabled', false);
$('#loader').removeClass('loading');
content.html( response );
myPluginsInit();
}
});
return false;
}, 700 );
});
});
})( jQuery );
You're problem is still in your keyup input handler. I'm not sure where the function delay is declared (I'm assuming it's some wrapper around setTimeout). However it doesn't really matter.
The issue is that the handler fires for every input and keyup event. The "delay" is inside that. All the "delay" is doing is "waiting" before it makes the ajax call but an ajax call is still being created for every keyup and input event.
This means that a lot of ajax calls are being created and on a mobile platform that's a problem. I'm not exactly certain when (or how often) you need to make the call to the server but to see what I'm talking about just add the line I've included below:
(function($) {
$(document).ready(function() {
$("#filter").on('keyup input', function() {
console.log('handling keyup or input') // add this line and watch them stack up
delay(function() {
var input = $('#filter');
var query = input.val();
var content = $('#content')
$.ajax({
type: 'post',
url: myajax.ajaxurl,
async: true,
data: {
action: 'load_search_results',
query: query
},
beforeSend: function() {
input.prop('disabled', true);
content.addClass('loading');
},
success: function(response) {
input.prop('disabled', false);
content.removeClass('loading');
content.html(response);
myPluginsInit();
}
});
return false;
}, 700);
});
});
})(jQuery);

Refresh a particular div when I click on that div.Without reloading the whole page.I specifically want it using onclick function

$(document).ready(function () {
var j = jQuery.noConflict();
j(document).ready(function () {
j(".refresh").everyTime(2000, function (i) {
j.ajax({
url: "refresh.php",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
})
})
});
j('.refresh').css({
color: ""
});
});
<?php
echo time();
?>
It works for refreshing page after particular time interval .I want this to be working after I click on particular div.
You can place your code in a click handler. Like this:
$(document).ready(function () {
var j = jQuery.noConflict();
j(".refresh").everyTime(2000, refreshDiv)
j('#myDiv').click(refreshDiv);
j('.refresh').css({
color: ""
});
function refreshDiv() {
j.ajax({
url: "refresh.php",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
});
}
});
Note that I extracted the logic in to its own function so it can be called from different parts of your code. I also removed the pointless duplicate DOMReady handler.
This is just a simple one
But you need to modify it
$(document).ready(function(){
$('.refresh').on('click', function(){
$.ajax({
url: "refresh.php",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
});
});
});

jquery onclick runs twice

I have the following javascript when my script is loaded:
var current_selected_note = $('#new_note');
current_selected_note.addClass('hover active');
$('#note-item-lists').on('click', '.list-group-item', function () {
//removes the hover color from the previous selected
current_selected_note.removeClass('hover active');
// sets the currently selected equal to the selected note
current_selected_note = $(this);
// adds the hover active to the currently selected
current_selected_note.addClass('hover active');
//adds the title of the currently selected to the title input field
$('#txt_new_note_title').val($(this).find('Strong').text());
selected_note_id = $(this).get(0).id;
getNote(selected_note_id);
load_comments(selected_note_id);
});
$( "#note-item-lists").find('li').first().trigger( "click" );
Now AFTER this is loaded i click one of my buttons which has the following javascript:
$('#note-item-lists').on('click','.close',function(){
var r = confirm('Are you sure you wish to delete "'+$(this).next('div').find('.new_note_title').text()+'" ?')
if(r == true){
deleteNote($(this));
$( "#note-item-lists").find('li').first().click();
}
})
function deleteNote(button){
var id = button.closest('li').get(0).id;
$.ajax({
type: 'POST',
url: '/solo/ajax_delete',
dataType: 'json',
data: {
id: id
},
success: function (data) {
}
});
button.closest('li').remove();
}
When this happens (i debug it) and the event function is called first 1 time (adding the class correctly) but is then happens immediatly again.
Anyone tried this before?
Try this, It will call one time.
$('#note-item-lists .close').on('click',function(){
alert("Hello");
});
Try using .off()
$('#note-item-lists').on('click', '.list-group-item', function () {
$(this).off(); //add this here

jQuery selectable() post via ajax issue where the selections loop their history before posting

I have a table that a user can select multiple rows. Selected rows have unique ID which is then aggregated into a string and POSTed to a php file. It all works fantastic except I have one problem. If the rows are selected, re-selected a number of times it does not POST the last status of the selection. So when I look into the log this is what I basically see:
14_629_2 view.php:541
14_629_15 view.php:541
14_629_2 view.php:541
14_629_15 view.php:541
14_629_2;14_629_15 view.php:541
14_629_15 view.php:541
This is two rows by the way. So the last state could be both rows selected 14_629_2;14_629_15 view.php:541 , but it would post the 14_629_15 view.php:541 instead, for some reason. It's as if it keeps cache or history of selections made and then loops and dumps everything in one spur.. and sometimes messes up.
I basically need it to keep track of only the current selection, no history.
Code I use:
<script>
$('#t1').selectable({
filter:'tbody tr',
stop: function(event, ui){
var map = $( this ).find( ".ui-selected" ).map(function() {return this.id;}).get().join(";");
// var result = $( "#plate" ).empty().html(map);
$('#batch_send').click(function (){
$(function() {
$.ajax({
url: 'batch_send.php',
type: 'POST',
data: 'variable='+map,
success: function(data) {
$('.display_div').html(map);
console.log(map);
}
});
});
});
}
});
</script>
I'm new to javascript so this must be some obvious mistake...
Solution:
The reason it looped was because the ajax request was in a function.
So I rewrote the code to make it a bit more simple
var map;
$("#t1").selectable({
filter:'tbody tr',
cancel: 'a, #slct_ignore, thead',
stop: function(event, ui) {
map = $(this).find( ".ui-selected" ).map(function() {return this.id;}).get().join(";");
}
});
$("#batch_send").click(function() {
$.ajax({
url: 'batch_send.php',
type: 'POST',
data: 'variable='+map,
success: function(data) {
$("#plate").html(map);
$(".display_div").html(map);
}
});
});

Trouble with jquery ajax and datatables

I am trying to use jquery ajax to get data from a php file. This php file prints a table made from a db query. Once the table is returned to the html page, I wanted to apply datatables styling to the table, but this will not work.
It maybe that I should just use datatables ajax functionality, instead of jquery ajax. I just have three links that a user can click on to call ajax, where not all the links return a printed table.
I suspect it it because of javascript timing, where all the js loads before the table has been output.
I tried using jquery.on(), but could not get it to work with datatables.
I appreciate any help. Sorry if this is confusing.
<script type="text/javascript">
$(document).ready(function() {
// EVENT LISTENER FOR CLICKS
var option_action = "fridge";
var using = "pantry";
$.post("./backend.php", { option: option_action, action: using }, function(data) {
$("#content").html(data);
load_table();
});
// EVENT LISTENER FOR CLICKS
$(".pantry_menu li").click(function() {
alert("CLICK");
//getting data from the html
var option_action = $( this ).attr("name");
var using = "pantry";
$.post("./backend.php", { option: option_action, action: using }, function(data) {
$("#content").html(data);
});
return false;
});
//Mouse action listeners for side bar
$(".pantry_menu li").mouseover(function() {
$(this).css("border-bottom" , "2px solid black");
});
$(".pantry_menu li").mouseout(function() {
$(this).css("border-bottom" , "2px dotted black");
});
$(".fridge_table1").change(function(){
alert("CHANGE");
});
});
function load_table()
{
$('.fridge_table1').dataTable( {
"aaSorting": [[ 4, "desc" ]]
,"bJQueryUI": true
});
}
</script>
In your ajax success function, you can reapply dataTable to the table. For example:
$.ajax({
type: "POST",
url: "ajax.php",
data: {
request: 'something'
},
async: false,
success: function(output)
{
$('#myTableDiv').html(output); //the table is put on screen
$('#myTable').dataTable();
}
});
EDIT due to your update
You need to change the "EVENT LISTENER FOR CLICKS" to call your function that applies dataTables. Change:
$.post("./backend.php", { option: option_action, action: using }, function(data) {
$("#content").html(data);
});
to
$.post("./backend.php", { option: option_action, action: using }, function(data) {
$("#content").html(data);
load_table();
});
You should put the .dataTables() part in the callback of your ajax function
$.ajax{
url: yoururl,
...
success: function(data){
//append the table to the DOm
$('#result').html(data.table)
//call datatables on the new table
$('#newtable').dataTables()
}
otherwise you are trying to transforma table that doesn't exist yet in the DOM

Categories