When I make a selction on the calendar and add an event, it sends the info to my PHP script and the event is placed in the database as expected. Great!
The problem is when I select another date and add the event (without refresh), it adds the event twice in the MYSQL database. Not Great!
This perpetually adds up with the increasing clicks until a refresh is made. Also the "extra" events added have no time placed in the DB except for "0000-00-00 00:00:00", so in turn it appear correct upon output. Am I just missing something simple? What am I doing wrong?
<script>
$(document).ready(function(){
select: function(start, end, allDay){
$("popup").show();
$(".title").focus();
var start = Date.parse(start) / 1000;
var end = Date.parse(end) / 1000;
var allDay = allDay:
$("submitForm").click(function(){
var title = $(".title").val();
var description = $("description").val();
var team_id = <?php echo $id ?>;
if(title != "" || title != " "){
$.post("script.php", {...}, function(){
$(".title").val("");
$(".description").val("");
start = "";
end = "";
title = "";
description = "";
team_id = "";
allDay = "";
calendar.fullCalendar('unselect');
calendar.fullCalendar('refetchEvents');
});
}else{
alert("You must enter a title");
}
$(".popup").hide();
});
}
});
</script>
Obviously this is not the entire JS/Jquery but this is what matters. What am I missing? Thanks in advance. Your help is appreciated!
Here you attach the click event repeatedly when you select a date.
select: function(start, end, allDay){
$("submitForm").click(function(){});
})
So, if your $("popup") exist on document.ready just put this line of code, outside
of the definition of the plugin
Here submit form is found and click event is attached, no matter if the element has display:none property:
$(document).ready(function() {
$("submitForm").click(function(){});
$('#calendar').fullCalendar({
select:select: function(start, end, allDay){})
})
})
if you add the $("popup") element, later dynamically in the jQuery script you have to bind the click event, but be careful to put that code somewhere where it will be executed only once.
I guess your click is getting attached on each success. Place your code click function outside your success callback.
I actually had to add a random session id to fix the problem and then clear the id after the post was completed.
You need to use the following in your success function:
$('#save_button').unbind()
So that as per #mehul9595 you remove all the accumulated events bound to the click.
Help from: https://stackoverflow.com/a/9688908/2468603
Related
I am trying to do a next/previous button on my calendar to show the next/previous month.
Ideally, the best thing would be not to refresh the page, but in the first place I don't mind having to refresh the page.
I have got a calendar($m,$y) function in php that let me change the value of my calendar directly in the url. For exemple (it's an image) :
http://localhost/VELO/index1.php?mois=3&year=2019
So basically, in this exemple, I would like my previous button to change the url to ".../index1.php?mois=2&year=2019"
I tried the following code (and many others) from one of the most answered question about this subject but it didn't worked :
<script>
function getQueryVariable(variable) {
var query = url.substring(1);
var vars = query.split('&');
for (var i=0; i<vars.length; i++) {
var pair = vars[i].split('=');
if (pair[0] == variable) {
return pair[1];
}
}
return false;
}
var url = 'http://localhost/VELO/index1.php?mois=3&year=2019'
var mois = getQueryVariable(url, 'mois');
var year = getQueryVariable(url, 'year');
var params = { 'mois':2, 'year':2019};
var new_url = 'http://localhost/VELO/index1.php?' + jQuery.param(params);
// With this in my <body> :
// <button type="button" class="precedent">Prev</button>
</script>
But I am getting the following error :
The requested URL /VELO/new_url was not found on this server
In summary, what I am asking is :
Is the code I am using not appliable in this case ?
Is there an other way to change my url with a button ? (can I use $_GET['month'] ?)
Is it possible to do this without refreshing the page ?
Have your JavaScript listen to an onclick event binded to a button. If you don't want to refresh page you can call that link using ajax. I would recommend using JQuery to help you accomplish this.
I found an answer to my question !
At first, I tried the solution degreerichi sent me but it wasn't working really well.
Here is the first code that is NOT WORKING :
<script> // NOT WORKING
$(function() {
$('.precedent').click(function(e){
e.preventDefault();
var targetUrl = "http://localhost/VELO/index1.php?mois=6";
window.history.pushState(null, null, targetUrl);
setCurrentPage(targetUrl);
});
});
</script>
My problem here (if anyone still want to solve/explain it) is that the url is changing but my calendar is not changing. For instance, when I click on my previous button I have this in my localhost (image). You can see that the url changed but the calendar isn't the one for June (mois=6).
So here is how I solved the problem :
<script> // WORKING
$(function() {
$('.precedent').click(function(e){
e.preventDefault();
var targetUrl = "http://localhost/VELO/index1.php?mois=6";
window.location = targetUrl;
});
});
</script>
In this case my calendar is updating as follow this image.
I have developed a shopping website where i am using ajax to process add to cart and remove from cart. Add to cart is working fine but remove from cart is creating an strange issue. I am able to delete only one record from it and if i want to delete more i need to manually refresh the page and then i would be able to delete only one more. This is so strange and i am unable to find where the bug is.
here is the code :
jQuery('.remove').click(function(data) {
var pi = jQuery(this).attr('name');
var y = jQuery(this).attr('name');
$.ajax({
url: "delcart.php?pid="+pi+"&data="+y,
type: 'GET',
success: function(s){
var $container = $("#content");
// $container.refresh("index.php");
$("#content").load(location.href + " #content");
$("#success2").show().fadeOut(6000);
},
error: function(e){
alert('Error Processing your Request!!');
}
});
});
HTML Button.
<button name="<?php echo $ca['ID'];?>" class="remove close_product color_dark tr_hover">x</button>
this button is into the while loop and each time name property consisting the unique ID of database cart table.
here is the delcart.php :
<?php
include_once "config.php";
$id = $_GET['pid'];
$ip = $_SERVER['REMOTE_ADDR'];
$de = mysqli_query($con,"DELETE from cart where ID='{$id}' and ip='{$ip}'");
?>
can anyone please figure what have i missed or where the bug is. This would be a huge help. Thanks in advance.
Not sure if I have the solution for you but I guess it's worth a shot.
My guess is that your buttons with class remove are located somewhere in div with id of container, correct?
if so, then you "lose" the .click handler when you call the .load function that replaces the content of #container div.
the solution would (could) be to change the .click listener to sth like
$('#some-div-container-that-stays').on("click", ".remove", function(data) {
Or at least try to put an console.log() into the .click action to see if it triggers or not
I have some issues with JQuery.
Code;
$(document).ready(function(){
$("#area_results").click(function(){
$("#areaclickpass2 a").click(function(){
var value = $(this).html();
var input = $('#inf_custom_TESTclubarea');
input.val(value);
$("#area_results").hide(); // hide results after click
});
});
});
The current website is requiring 2 clicks to input the value into a field.
I understand why it's doing this (Best solution I can think of to achieve the outcome), however I was curious whether it is possible to achieve the same result by only using a single click.
Thanks for your time.
Create a variable that counts up with each click and execute your code when that variable equals 2.
$(document).ready(function(){
var click_count = 0;
$("#area_results").click(function(){
click_count++;
if(click_count==2){
var value = $(this).html();
var input = $('#inf_custom_TESTclubarea');
input.val(value);
$("#area_results").hide(); // hide results after click
}
});
});
You are binding a event handler within another event handler. #areaclickpass2 will not be handled unless you click on #area_results first.
Just move $('#areaclickpass2') event binding out of #area_results scope:
$("#area_results").click(function(){
//may not even be necessary to have this
});
$("#areaclickpass2 a").click(function(){
var value = $(this).html();
var input = $('#inf_custom_TESTclubarea');
input.val(value);
$("#area_results").hide(); // hide results after click
});
So I am trying to get this code below to work with updating a price based on an ajax onclick:
$('#main_body li[data-pricefield="special"]').delegate('onclick','change', function(e)
{
var temp = $(this).attr("id").split('_');
var element_id = temp[1];
var pricedef = $(this).data('pricedef');
if(pricedef == null)
{
pricedef = 0;
}
$("#li_" + element_id).data("pricevalue",pricedef);
calculate_total_payment();
});
Things seem to be working ok so far - when I type in the console:
jQuery('#li_273').data('pricevalue');
I do get a value of "1.00" returned which is actually being set here on the onclick command:
'onclick' => 'jQuery(\'#li_273\').data(\'pricevalue\',\'1.00\');',
My question is what is wrong with my first block of code that is stopping this from calculating the price the right way and how do I correct it?
You are using
$('#main_body li[data-pricefield="special"]').delegate('onclick','change', function(e){
// ...
});
but delegate's syntax is .delegate( selector, eventType, handler(eventObject) ) and in this case you should write
$('#main_body').delegate('li[data-pricefield="special"]','click', function(e){
// ...
});
There is no onclick event in jQuery and AFAIK an li doesn't have a change event so if you want to use multiple events then you can use
$('#main_body').delegate('li[data-pricefield="special"]','click another_event', function(e){
// ...
});
Also you can use on instead of delegate.
An Example and Read more.
'onclick', 'change' should be 'click change' in the delegate
EDIT: "$('#main_body li[data-pricefield="special"]').delegate('li','change', function(e) { actually works when you tab out of the field - it adds the $1 to it."
so you should have:
$('#main_body li[data-pricefield="special"]').on('li','click change', function(e) {
and perhaps check
if(pricedef == undefined || pricedef == null){
I'm trying to modify Gaya Design's Tabbed Content (Available Here) to have the current tab persist when the page is reloaded, yet have it change when a new tab is clicked. I've already changed it a little to be able to change default tab by using a PHP GET variable. The current condition of the page I'm working on can be viewed here.
So here's my likely scenario. If you've clicked on the link above, you'll see I'm working on a simple PHP shopping cart. Now when a user clicks an add link, it has to reload the page, and when it does that it resets the tab. So, I'm thinking this should easily be solved with a cookie that updates whenever a new tab is clicked....I'm just not too sure how to go about this. Any thoughts, suggestions, or advice will be greatly appreciated.
Here's my current JS:
var TabbedContent = {
init: function() {
$(".category").click(function() {
var background = $(this).parent().find(".selected");
$(background).stop().animate({
left: $(this).position()['left']
}, {
duration: 350
});
TabbedContent.slideContent($(this));
});
},
slideContent: function(obj) {
var margin = $(obj).parent().parent().find(".sliderContainer").width();
margin = margin * ($(obj).prevAll().size() - 1);
margin = margin * -1;
$(obj).parent().parent().find(".displayContent").stop().animate({
marginLeft: margin + "px"
}, {
duration: 1
});
},
gotab: function( obj ) {
var background = $(obj).parent().find(".selected");
$(background).stop().animate({
left: $(obj).position()['left']
}, {
duration: 1
});
TabbedContent.slideContent( $(obj) );
}
}
$(document).ready(function() {
TabbedContent.init();
});
Here's how a tab is initialized when it is linked to:
<?php
// Load a specific tab if required
if(isset($_GET['tab'])) {
// Array storing possible tab IDs
$tabChoices = array('productsTab', 'specsTab', 'brochuresTab', 'bannersTab', 'kitsTab', 'displaysTab');
$tab = '';
if(in_array($_GET['tab'], $tabChoices)) $tab = $_GET['tab'];
// Default to productsTab if not in array list
else $tab = 'productsTab';
// JS to actually do the switch
echo '<script>$(document).ready(function() {TabbedContent.gotab($("#' . $tab . '"))});</script>';
}
?>
You're painting yourself into a corner by inline scripting a solution. You should always only have one $(document).ready... call in your entire product, in order to avoid order dependent explosions in code, and have a clear point of entry.
That said, you are almost there. Instead of calling a function, assign a value.
echo "<script>var selectedTab=$tab;</script>"
Then during your initialization function, make use of that value. My example is in global scope. There may be a race condition if you try to assign it to a namespace. In that case, try putting that script at the bottom of the page.
One more suggestion, have one and only one function handle all of your animations calls for that object.
Instead of using get/post params you could use hash; creating links like this in the tabs:
<a class="tab_item" href="#one_go" id="one">
And then put this in the javascript:
var gototab = document.location.hash.replace('_go',"")
if(gototab){
$(gototab).each(function(){
var pos = $(this).prevAll(".tab_item").length,
left = pos * $(this).outerWidth(),
margin = pos * $(this).parent().parent().find(".slide_content").width() * -1;
$(this).parent().find('.moving_bg').css('left',left)
$(this).parent().parent().find(".tabslider").css('margin-left',margin)
})
}