using jQuery, I am trying to get an action assigned to a button on a form. I have 50 of these forms on a page, but every time I click one link, the form action is run 50 time!!
I ran this to check, and it comes to exactly 50
`i=1
$('.thumbs').click(function(){
console.log(i,"Click Count");
i++;
)};
this has the unhelpful effect of running the AJAX fifty times!!
am I using selectors wrong?
EDIT: full script here
EDIT: Example of one element - There are 50 of these inside a container div.
Are you adding the listener to a submit button? Make sure to return true or false if the form should be submitted or not.
it sounds like it could be one of there two:
1) you've added 50 click listners to one button:
you could try this by adding:
$('.thumbs').unbind();
before you assign a new handler.
If this is the case, you should try to find out why and make sure you only add one.
2) the button default action is the problem:
stop default behavior:
$('.thumbs').click(function(event){
event.preventDefault();
Related
So currently my website works like this; you post an update and through iframe your update gets added to the database and then shown in a list below. But the problem is that when you clicked "Submit" the text you wrote is still shown in the textarea because the website doesn't update completely. I have tried to have "onsubmit" and "onclick" but both remove the content of the textarea before it gets added to the database so it displays an empty message.
What should I do in order to delay it just a second or how do I make it wait for the iframe to "send" data to my PHP-script?
Give your textarea an id and supposing that iframe is an element of the page that contains the textarea you have done the following in the iframe page:
<?php
//code should be done after db add
?>
<script>
o = parent.document.getElementById('textareaID');
o.value = '';
</script>
<?php
//the end of code or something else
?>
You are able to see those demos on jsbin:
http://jsbin.com/ulOyiVo/1 The page with iframe. Supply the textarea with any text and then click on simulate submit link
http://jsbin.com/EyuBeLo/1/ The iframe page
If your only problem is to have a delayed response, you could trigger a setTimeout function to your onClick, with the given setTimeout:
setTimeout(
function() {
alert('hello');
},1250 //in milliseconds
);
You can define a click or a submit event using jQuery and send a request to your server. You can handle the event when the server responded using a callback. In that callback you need to do whatever it is needed to do. Using setTimeout in this case is an unnecessary hack. You will either set up a big time to wait harming the user experience or in case the page responds later than the specified time your page will work unexpectedly. So, instead of that try defining an event.
At the moment I'm working on a project that requires the submission of a form for 'voting' for specific posts. At the moment clicking on the submit button works as it should, although if the button is clicked more than once, it does exactly that - submits the POST variables more than once causing them to be able to 'vote' for the item multiple times in one set of clicks.
I've looked at every jQuery code example I can find to solve this but nothing works. It works to disable the button, but after that the redirection page that grabs the data and runs the queries returns an error as nothing has been submitted. In short, it seems to disable the button but at the same time disable the information from being submitted.
Here's my jQuery code:
$('#vote').submit(function(){
$(this).children($btn).attr('disabled', true);
return true;
});
Any help would be great.
Thanks.
Use jquery .one
Description: Attach a handler to an event for the elements. The handler is executed at most once per element.
$(document).one("click","#vote",function(){
$(this).children($btn).attr('disabled', true);
return true;
});
Probably your best option is to only allow a single submission and adjust the button appearance some other way:
var submitted = false;
$('#vote').submit(function(){
if(submitted) {
// cancel additional submits
return false;
}
submitted = true;
$(this).children($btn).val('Please wait...');
});
you could add an click event. Instead of using submit button use a button click event.
the code might look like this
$($button).click(function(){
$(this).attr("disabled","disabled");
$($form).submit();
});
Jquery's on and off can be used here.
for example after submission,you can completely disable the click by
$('#vote').off('click');
and then switch it back if you want by
$('#vote').on('click');
I've the following problem...
My application uses the php, smarty templates and jQuery.
Inside the smarty template there is defined a form with POST method.
The action parameter of the form is defined as follows:
action={if isset($search_place)} {link->somePhpFunction($search_place) {/if}
...because I need to change the action depending on the POSTED parameter.
The input (text) with the "search_place" name is defined inside the form.
The submit button is linked to the jQuery function, as I need to perform some actions on the client side (value check, autocomplete, etc.).
When the button is clicked, I need to
The problem is that when I post the form by the jQuery button, the form will not take the
When the button is clicked then the jQuery handler is called where some checks/corrections are performed and then the page with the form is displayed.
The problem is, that before defining the action parametr from the form the search_place variable in not known and the php function is not called at all.
I've also tried to set a cookie in the button handler and to set the form action to the {$smarty.cookies.search_place} value but the problem changed into another one - the form allway performes action of the previous button click so it is necessary to click the button TWO TIMES to get the correct results.
It is also necessary to mention that there is no way to transfer the needed action parameter to the jQuery event handler as the php function selects the correct one from the large table in database. If this is possible, then it would be easy to change the action parameter from the jQuery function...
The only way I know is to use AJAX to get the right parametr and assign the correct action parametr from the button event handler but it is not the right solution for me as many of my site visitors have not the browser javascipt enabled.
The solution could be also to perform (programmaticaly) one more click on the button from the jQuery event handler but I don't know how to do it...
Any help or idea how to solve this issue will be greatly appreciated...
Thank you in advance. JaM
Try the following:
<form onsubmit="return validationFunction()">
and let this function validate the data and return true if correct and false if not.
now for the js. don't call something like
$("#someForm").submit();
instead use:
if(validationFunction()){
$("#someForm").submit();
}
Update
finally if your validationFunction will do some server-side work
Then instead some variable like
var formSubmitted = false;
then onSubmit return false; and set the formSubmitted to true, and do your ajax call, and when the ajax call is done, check the formSubmitted if it's true then submit the form if not then show some error...
First I want to say that the code in jsfiddle works exactly as I'm expecting. However, when I try to insert it in my page, it does not work.
I am using
get.ajax
To move html with php a mysql data into a div named #latest-divs. I have a form with an
input#search
button that gets
val()
when
.bind('input property...)
and checks if there is exact match in the child divs of #latest-divs. I call these child elements
#latestblock
If there is exact match, then the event should execute, which, as I mentioned above, works in the jsfiddle but dies on my site. I have attempted everything I could think of:
Load in php file
Load from head
Load from body
Load with and without "CDATA"
Change my jquery version
My site is codefault (dot) org.
The jsfiddle link is http://jsfiddle.net/gAnyM/10/.
As of right now, I am loading the second part (random positioning of divs) from script/latest-topics.php and the first part in head, from index.php.
are you sure you have it inside a:
$(document).ready( function() {
// code here
});
?
The dom needs to be ready before you bind things
jsfiddle adds this for you automatically
Try another kind of event
$('input#search').bind('change keyup', function()
Im looking for a way to have a form in cakephp that the user can add and remove form fields before submitting, After having a look around and asking on the cake IRC the answer seems to be to use Jquery but after hours of looking around i cannot work out how to do it.
The one example i have of this in cake i found at - http://www.mail-archive.com/cake-php#googlegroups.com/msg61061.html but after my best efforts i cannot get this code to work correctly ( i think its calling controllers / models that the doesn't list in the example)
I also found a straight jquery example (http://mohdshaiful.wordpress.com/2007/05/31/form-elements-generation-using-jquery/) which does what i would like my form to do but i cannot work out how to use the cakephp form helper with it to get it working correctly and to get the naming correct. (obviously the $form helper is php so i cant generate anything with that after the browser has loaded).
I an new to cake and have never used jQuery and i am absolutely stumped with how to do this so if anyone has a cakephp example they have working or can point me in the right direction of what i need to complete this it would be very much appreciated.
Thanks in advance
I would take the straight jquery route, personally. I suppose you could have PHP generate the code for jquery to insert (that way you could use the form helper), but it adds complexity without gaining anything.
Since the form helper just generates html, take a look at the html you want generated. Suppose you want something to "add another field", that when clicked, will add another field in the html. Your html to be added will be something like:
<input type="text" name="data[User][field][0]" />
Now, to use jquery to insert it, I'd do something like binding the function add_field to the click event on the link.
$(document).ready( function() {
$("#link_id").click( 'add_field' );
var field_count = 1;
} );
function add_field()
{
var f = $("#div_addfield");
f.append( '<input type="text" name="data[User][field][' + field_count + ']" />' );
field_count++;
}
Of course, if a user leaves this page w/o submitting and returns, they lose their progress, but I think this is about the basics of what you're trying to accomplish.
This was my approach to remove elements:
In the view, I had this:
echo $form->input('extrapicture1uploaddeleted', array('value' => 0));
The logic I followed was that value 0 meant, not deleted yet, and value 1 meant deleted, following a boolean logic.
That was a regular input element but with CSS I used the 'display: none' property because I did not want users to see that in the form. Then what I did was that then users clicked the "Delete" button to remove an input element to upload a picture, there was a confirmation message, and when confirming, the value of the input element hidden with CSS would change from 0 to 1:
$("#deleteextrapicture1").click(
function() {
if (confirm('Do you want to delete this picture?')) {
$('#extrapicture1upload').hide();
// This is for an input element that contains a boolean value where 0 means not deleted, and 1 means deleted.
$('#DealExtrapicture1uploaddeleted').attr('value', '1');
}
// This is used so that the link does not attempt to take users to another URL when clicked.
return false;
}
);
In the controller, the condition $this->data['Deal']['extrapicture1uploaddeleted']!='1' means that extra picture 1 has not been deleted (deleting the upload button with JavaScript). $this->data['Deal']['extrapicture1uploaddeleted']=='1' means that the picture was deleted.
I tried to use an input hidden element and change its value with JavaScript the way I explained above, but I was getting a blackhole error from CakePHP Security. Apparently it was not allowing me to change the value of input elements with JavaScript and then submit the form. But when I used regular input elements (not hidden), I could change their values with JavaScript and submit the form without problems. My approach was to use regular input elements and hide them with CSS, since using input hidden elements was throwing the blackhole error when changing their values with JavaScript and then submitting the form.
Hopefully the way I did it could give some light as a possible approach to remove form fields in CakePHP using JavaScript.