I wonder whether someone can help me please.
The extract of script below enables a user to delete records from a table, linked to a mySQL database.
<script type="text/javascript">
$(document).ready(function(){
$('form.delete').submit(function(e){
e.preventDefault();
var elem = $(this).closest('.delete');
var lid = $(this).serialize();
$.confirm({
'title' : 'Delete Confirmation',
'message' : 'If you delete this Location, all associated Find records will also be deleted. <br /><br />They cannot be restored at a later time! Do you wish to continue?',
'buttons' : {
'Yes' : {
'class' : 'blue',
'action': function(){
//elem.slideUp();
$.ajax({
url: 'deletelocation.php',
type: 'POST',
data: lid,
success: function(response) {
console.log('success', response);
setTimeout(function() {
$('body').fadeOut(400, function(){
location.reload();
setTimeout(function(){
$('body').fadeIn(400);
}, 500);
window.scrollTo(x-coord, y-coord);
});
}, 2000);
},
error: function() {
console.log('error')
}
});
}
},
'No' : {
'class' : 'gray',
'action': function(){} // Nothing to do in this case. You can as well omit the action property.
}
}
});
});
})
</script>
I can manage to get the 'Delete Confirmation' message working and the actual deletion of the record, but I'm having a little difficulty in adding a 'Fade out' as the deletion takes place and then a 'Fade in' upon page reload.
I've read a number of posts and from these I came up with the following which I've integrated into the above :
setTimeout(function() {
$('body').fadeOut(400, function(){
location.reload();
setTimeout(function(){
$('body').fadeIn(400);
}, 500);
window.scrollTo(x-coord, y-coord);
});
}, 2000);
However this doesn't work, and I'm not sure why. I just wondered where someone may be able to take a look at this please and let me know where I'm going wrong.
Many thanks and kind regards
The script after location.reload() does not executed because the page is reload.
You can add a flag in your url (#reload) and at start of page's load, you can do
$('body').hide().fadeIn() if you find the flag.
You can't have a javascript action set to occur after the location.reload().
location.reload() will reload the page, and anything left in the JS stack at the time the page reloaded will be lost.
You would need to add the body fadeIn as a function to the page itself, perhaps if there is a particular url param? So rather than reloading the page, you would be navigating to the same page, plus a specified querystring, such as ?reload=true, or to a specific anchor, such as #myAnchor
firstly thank you very much for your help. I have however realised where my problem lay. I had the JavaScript after the body section of my page. I've now moved this to the beginning of my script before the form, and it works fine. Kind regards
Related
I have managed to implement jquery.cookie in another project with fancyapp with no problems; e.g. tested modal fires once, and to make it fire again I just delete the cookie and it will propagate again (see below).
UPDATE
Here is the example where it works;
If you go to this page: http://avonexampleone.antonio-p-ortiz.com/prior.html click the banner, the modal will fire in the subsequent page and honor the expiration i.e. j.cookie('visited', 'yes', {expires: 1}); wont fire again till a day, And if you clear your cookies and test again the modal will fire. All as expected.
However, I have the same code in another project (jekyll blog), and it appears to work once in a while when tested.
Could there be some weird privacy concern or some setting in jekyll which would prevent this?
Any help would be appreciated!
HTML:
<a id="clickbanner" href="/assets/images/beauty_for_a_purpose/Beauty_for_a_Purpose_Sheri_Card_EN.jpg" rel="gallery"></
JS:
var j = jQuery.noConflict();
j(document).ready(function() {
function openFancybox() {
setTimeout(function() {
j("#clickbanner").trigger('click');
}, 500);
};
var visited = j.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
};
j.cookie('visited', 'yes', {
expires: 1
});
j("#clickbanner").click(function() {
j.fancybox({
href: this.href,
type: "image",
maxWidth: 750,
maxHeight: 502
});
return false;
});
});
It turns out the problem derived from the script tag path not being properly configured. As you can see in the image below, the pages are nested in folders and would need to be marked accordingly to get to the scripts.
So <script type="text/javascript" src="../../../assets/javascript/ya_jquery.fancybox.ready.function.js"></script> as an example did the trick!
Strange thing was, I wasn't getting an error in the console saying I was missing the scripts.
Beginning developer here, making a website using wordpress as a platform. I would like the user to be able to click an upvote button and upvote a post without refreshing the page. I figure I should probably use javascript to highlight the button once clicked as well as change the vote number. However, I am having trouble figuring out how to run a php script (to update the database) without refreshing the page.
Thanks in advance,
sample upvote php for posts add this to your functions file....
add_action('wp_ajax_upvote', 'upvote');
add_action('wp_ajax_nopriv_upvote', 'upvote');
function upvote() {
$postid= $_POST['id'];
$direction = $_POST['direction'];
$votes= get_post_meta($postid, '_votes', true);
if($direction='down') {
$votes--;
} else {
$votes++;
}
update_post_meta($postid, '_votes', $votes);
echo $votes;
exit();
}
The above needs security like any form submit of $_POST variables. Dont leave these out in your code!!
jQuery Code
jQuery(document).ready(function($){
$('.arrow').click(function(){ //if your upvote has class arrow?
//you need someway of passing postid to here!
//if you want up / downvote -- logic needed here, if not remove direction from below!
$.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: {
action: 'upvote',
id: id,
direction: direction //remove if not needed
},
success: function (output) { //do something with returned data
console.log(output);
jQuery('#postupvote').text(output); //write to correct id - maybe use postid in the id of the vote count on the page e.g. id="vote23" jQuery('#vote'+postid)
}
});
});
})
google wordpress ajax for more information
I am using the tooltipster plugin tool where I got gantt chart drawn with some td given id.
So, which ever id is defined and the mouse over it will get ajax data and show accordingly.
Below is snippet of my codes. Issue here is that the tool tip only appear after few times I mouse the td. Thereafter, it works fine.
I can see, in my debug window, that ajax page is called and following error:
Tooltipster: one or more tooltips are already attached to this element: ignoring. Use the "multiple" option to attach more tooltips. jquery.tooltipster.min.js:1
$(document).ready(function () {
$('td[id]').tooltipster({
// content: 'Loading...',
functionBefore: function(origin, continueTooltip) {
// We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
continueTooltip();
var idval=0;
// Next, we want to check if our data has already been cached
//if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'GET',
url: 'getDetails.php',
data:idval,
success: function(data) {
// Update our tooltip content with our returned data and cache it
//alert("Data is : "+data);
var finalData = 'Total Data : 300 <br> Total Completed : 200';
//alert("DATA");
//origin.tooltipster: $('<span>testst<strong>This text is in bold case !</strong></span>')
origin.tooltipster({
content: finalData,
multiple: true,
contentAsHTML: true
});
//origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
}
});
//}
}
});
});
The Tooltipster plugin really should be initialised before all of this. Using the mouseenter enter to trigger it's initialisation every time a user hover's over a <td> element is not great practice and is the root problem to your issue. Ideally you would want to break it down into the following:
Find your <td> elements with id's defined.
Apply tooltipster to these elements.
Let tooltipster handle everything from there.
1. Finding your <td> elements
With the magic of jQuery you can fetch these with a clever use of selectors rather than querying a larger set with your initial implementation, gathered from the answers within the StackOverflow thread here, jquery get only all html elements with ids, we get:
$('td[id]')
This will fetch you all <td> elements with an id defined, be warned this could be a bit slow if you have an extensive table. Alternatively you can select, then apply a filter to narrow down your set:
$('td').filter(function(){
return $(this).attr('id') !== undefined;
});
Both will essentially do the same!
2. Applying tooltipster to these elements
I've not done much here since you had a lot of commented out code, so I've kept it the same, with some minor tweaks, here is my version of the "working code":
$('td[id]').tooltipster({
// content: 'Loading...',
functionBefore: function(origin, continueTooltip) {
// We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
continueTooltip();
// Next, we want to check if our data has already been cached
//if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'GET',
url: 'getDetails.php',
data: $(this).attr('id'),
success: function(data) {
// Update our tooltip content with our returned data and cache it
//alert("Data is : "+data);
var finalData = 'Total Data : 300 <br> Total Completed : 200';
//alert("DATA");
//origin.tooltipster: $('<span>testst<strong>This text is in bold case !</strong></span>')
origin.tooltipster({
content: finalData,
multiple: true,
contentAsHTML: true
});
//origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
}
});
//}
}
});
3. Letting tooltipster handle everything from here
Tooltipster (when intialised) is triggered by default when hovering over an element, this means your functionBefore will be run before this "hover" event, causing your AJAX request to be run each time, there is no need to do anything more thereafter :D
I hope this helps! :)
You can use this code :
var tooltipInstance;
$("body").on('mouseover', 'td[id]:not(.tooltipstered)', function(){
tooltipInstance = $(this).tooltipster({
//your code ...
});
tooltipInstance.tooltipster('open');
});
I am working on a comments system and I have made it nice with jQuery, I have a problem. I made it fetch the DB stuff every 2000 miliseconds (2 seconds). And here is the problem, when a user clicks "report comment" another div with a message will show, but after the 2 seconds it disappears, and I'm assuming it's because the setInterval is refreshing the content.
But here is what I've done.
NOTE: I put this part of the code within the while() function in PHP so it loops with all the other comments, and I've assigned them with a uniqueID.
<script type="test/javascript">
$("#<?= $lc['uniqueid']; ?>").click(function() {
$("#report<?= $lc['uniqueid']; ?>").fadeIn();
});
</script>
And here is the script where it refreshes the content ext, (it's on the bottom of my webpage by the way)
setInterval(function() {
$.get('serverinfo.php?showcomments=<?= $id; ?>', function(data) {
$('#showcomments').html(data);
});
}, 2000);
So if anyone would know how to ignore the div that shows up when a user clicks report to be removed, I'd appreciate it! thank you.
A possible solution is conditional update of your content. ie, when user clicks "report comment" add a line
$('#showcomments').addClass("comment-active");
Then make your update conditional:
setInterval(function () {
$.get('serverinfo.php?showcomments=<?= $id; ?>', function (data) {
if (!$('#showcomments').hasClass("comment-active")) {
$('#showcomments').html(data);
}
});
}, 2000);
And to add, of course, delete the class when the report comment is closed.
$('#showcomments').removeClass("comment-active");
I am writing a function to dynamically load jQuery UI accordian leaves with content. I know (think) the AJAX part works as I lifted it from another working AJAX loader I have, but the function as a whole does not work.
The code:
function load_leaf(link){
var link = link;
$.ajax({
cache : false,
type : 'POST',
async: false,
url : 'includes/'+ link +'.php?'+ new Date().getTime(),
dataType : 'text',
data: {
owner : '$user_id'
},
success: function(msg){
$("#" + link).html(msg);
console.log('Can\'t see me in Chrome, but ok in firefox !')
},
error: function() {
console.log($.makeArray(arguments));
},
complete: function() {
console.log($.makeArray(arguments));
}
});
};
$(function(){
$('.accordian').click(function(){
var link = this.getAttribute("link");
load_leaf(link);
});
});
For whatever reason this does not work. The break point seems to be this line
$("#" + link).html(msg);
Specifically the selector, as a hard coded selector works perfectly. The link variable is correctly filled i know this as i can alert the value correctly. The link is not the problem as i replaced the whole ajax function with a simple add class and it a still did not work, it also broke at the selector.
EDIT:
This is the div as printed by php:
<h3 class="accordian" id="'.$tab_id.'" link="'.$tab_link.'" >
'.$tab_name.'
</h3>
<div id="'.$tab_link.'"><p>Hi</p></div>
The html for the first one is:
<h3 class="accordian" id="accordian_manage.php" link="accordian_manage.php" >Manage Images</h3><div id="accordian_manage.php"><p>Hi</p></div>
Your ID has a period . in it, which jQuery interprets as a chained class selector.
You can either change your link/IDs, or use this hack:
$("[id='" + link + "']");
Live demo
I guess your problem is with Jquery is not finding the div to load the msg..Post the accordion div so that i could give you the proper selector