I can set action on click for html button. But I need to set action only on FIRST click. Is there any way to do this? The button is radio in form. Some javascript maybe?
What's important - the radio button still might be changed. But action has to be done only once.
This doesn't work
function myfunction(i){
oForm = document.forms["myform"];
if(oForm.elements["field"+i].checked)
alert("action done earlier");
else
action
}
The cleanest solution is probably to use removeEventListener to... remove the event listener :
var myButton = document.getElementById('someId');
var handler = function(){
// doSomething
myButton.removeEventListener('click',handler);
}
myButton.addEventListener('click', handler);
(to make it cleaner, you could wrap this in an IIFE, as in the example below)
Demonstration
Check out the jQuery .one() event handler.
$("#my-button").one('click', function() {
/* Do something at most once */
});
If you preffer jQuery, You can use jQuery unbind
$("button").click(function(){
/* some content */
$(this).unbind('click');
});
Html
<button> Some content </button>
You could use a property to disable the button once it has been clicked, adding
disabled="disabled"
to the button once clicked ?
To resolve this problem I have used jQuery.on as well as jQuery.off - see my code on jsfiddle!
$(document).ready(function() {
var button = $('#my-button');
function onClick() {
alert('clicked');
button.off('click', onClick);
};
button.on('click', onClick);
});
http://jsfiddle.net/VxRyn/
Related
I have this jquery
$(".waitingTime .button").click(function () {
alert("Ema");
});
I have a a tag like this:
Can I do the same href action in the jquery function?
Many Thanks
yes this is possible and has nothing to do with Laravel.
There are different possibilities. If your query is embedded within the same laravel view, you put the URL directly in your jQuery code, for example like this:
$(".waitingTime .button").click(function () {
window.location.href = "{{URL::to('restaurants/20')}}"
});
But I think the best option is to add the URL on your button tag as a data attribute and then let jquery go to that URL. That way you can make your buttons more dynamic and have more capsulated code.
One example might be:
<div class="waitingTime">
<button class="button link-button" data-href="{{URL::to('restaurants/20')}}">
Click me
</button>
</div>
$(".link-button").click(function () {
window.location.href = $(this).data('href');
});
That way you can always give a button with the class link-button a data-href attribute with the URL you want to open when the button is clicked and don't have to add additional jquery.
Just output php in your javascript
$(".waitingTime .button").click(function () {
window.location.href = "<?php echo URL::to('restaurants/20'); ?>";
});
if need variable from js can use this
if(data.cookies == 0){
location.replace("{{ route('delivery') }}?id="+id);
}
I have very limited knowledge with scripts so I hope you guys can help me with a simple solution to a small problem that I have...
I'm using the following jquery function to refresh a div with new content when a link is clicked
<script>
$(function() {
$("#myButton").click(function() {
$("#loaddiv").fadeOut('slow').load("reload.php").fadeIn("slow");
});
});
</script>
My problem is, I need to send 2 variables to the reload.php page to use in a mysql query (I have no idea how to accomplish that), also I need to make multiple links work with this function, at the moment I have multiples links with the same id and only the first link works so I guess I must associate different ids to the function in order for this to work, how can I do that?
here's the page where i'm using this: http://www.emulegion.info/teste/games/game.php
You may want to use document ready instead of function on your first line as this will make sure the code is not executed until the full page (and all elements) have loaded.
You can then use the callback functions of the fade and load to perform actions in a timely manner.
additional variables you can add after the .php, these can then be read in your reload.php file as $var1 = $_GET['var1'];
Do make sure to sanitize these though for security.
<script type="text/javascript">
// execute when document is ready
$(document).ready(function() {
// add click handler to your button
$("#myButton").click(function() {
// fade div out
$("#loaddiv").fadeOut('slow',function(){
// load new content
$("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){
// content has finished loading, fade div in.
$("#loaddiv").fadeIn('slow');
}); // end load content
}); // end fade div out
}); // end add click to button
}); // end document ready
</script>
For different variables you could add a HTML5 style variable to your button.
<input type="button" id="myButton" data-var1="foo" data-var2="bar" />
You can retrieve this when the button is clicked:
// add click handler to your button
$("#myButton").click(function() {
// get vars to use
var var1 = $(this).data('var1');
var var2 = $(this).data('var2');
...
load("reload.php?var1="+var1+"&var2="+var2
if you have multiple buttons/links I would use class instead of id "myButton". that way you can apply the function to all buttons with the above script. Just replace "#myButton" for ".myButton"
First, you should use .on('click', function() or .live('click', function() to resolve your one click issue.
You'll want to do something like:
<script>
$(function() {
$("#myButton").on('click', function() {
var a = 'somthing';
var b = 'something_else';
$.post('url.php', {param1: a, param2: b}, function(data) {
//data = url.php response
if(data != '') {
$("#loaddiv").fadeOut('slow').html(data).fadeIn("slow");
}
});
});
});
</script>
Then you can just put var_dump($_POST); in url.php to find out what data is being sent.
Try creating a function that would accept parameters that you want.
Like:
$(document).ready(function(){
$('.link').click(function(){
reload(p1,p2);
});
});
function reload(param1, param2){
$("#loaddiv").fadeOut('slow').load("reload.php?param1="+param1+"¶m2="+param2).fadeIn("slow");
}
But by doing the above code your reload.php should be using $GET. Also you need to use class names for your links instead of id.
<script type="text/javascript">
// execute when document is ready
**$(document).ready(function() {**
**$("#myButton").click(function() {**
**$("#loaddiv").fadeOut('slow',function(){**
**$("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){**
// content has finished loading, fade div in.
$("#loaddiv").fadeIn('slow');
});
});
});
});
</script>
$("#myButton").click(function() {
// get vars to use
var var1 = $(this).data('var1');
var var2 = $(this).data('var2');
Hi everyone i'm searching for a little help.
I have a php page, in this page i have some ajax calls that return a divs...
in one of this div i have a button, if this button will click i have to remove the entire div where button is..
here's my code, not working now :(
$(document).ready(function() {
$("#tutn").live('click',function(e){
$("#first_time",e).remove() ;
e.preventDefault() ;
});});
Where id="first_time" is a div called with ajax... and this is my problem .. because the div doen't remove even if i click on the button....
In others world i have to remove the father of the div where button is
this is the html code
<div id="first_time">
<div class="ft_info">
<input type="button" name="tutn" id="tutn" class="tutbtn" value="no" />
</div>
</div>
If you're certain the div exists and its ID is first_time, just do
$('#first_time').remove();
The second parameter is supposed to be an existing DOM node, the starting point where jQuery will begin selecting elements. You appear to be passing the event object, which isn't what jQuery is expecting.
Furthermore, there is no need to pass a second parameter to an ID selector, as the ID must be unique within the document.
A final note on style: Don't put spaces before semi-colons, and don't "save space" by nesting multiple closing }) pairs. This is gross:
$(document).ready(function() {
$("#tutn").live('click',function(e){
$("#first_time",e).remove() ;
e.preventDefault() ;
});});
There are certain well excepted coding standards that you must adopt if you want to be taken seriously:
$(document).ready(function () {
$("#tutn").live('click', function (e) {
$("#first_time",e).remove();
e.preventDefault();
});
});
You can't select the div#first_time from the context e.
Just change $("#first_time",e).remove() ; to $("#first_time").remove() ;
Just one small change should fix it...
$(document).ready(function() {
$("#tutn").live('click',function(e){
$("#first_time").remove() ;
e.preventDefault() ;
});
});
I just removed the ,e from the remove selector as it's wrong.
Your mistake is in line 3:
$("#first_time").remove() ;
The e is wrong there. I wonder that you do not get an js-error.
but i also would recommend to use parent().
$(document).ready(function() {
$("#tutn").live('click',function(e){
$(this).parent().parent().remove();
});
});
You have to use parent() two times to get $('#first_time').
And I would not use ID's. I would solve the problem with classes.
As another option, you can remove the button's "grandparent" with two chained calls to the parent() method on $(this), where this is the button element.
$(document).ready(function() {
$("#tutn").live('click',function(e){
e.preventDefault() ;
$(this).parent().parent().remove();
});});
If you want to remove the div with id first_time you can do:
$(document).ready(function () {
$("#tutn").live('click', function (e) {
$("#first_time").remove();
});
});
But if the id is a dynamically changing one then you can do:
$(document).ready(function () {
$("#tutn").live('click', function (e) {
$(this).parent().parent().remove();
});
});
<script type="text/javascript">
$(document).ready(function(){
$('#feedback').hide('');
$('a#1').click(function(){
$('#feedback').toggle('');
});
});
</script>
It doesn't toggle the feedback div, but if you use show instead of toggle the script works.
I would suggest setting it differently (below is demonstration):
<a id="test" href="#" onclick="test(this.rel)" rel="1">Click me</a><br/>
<input type="button" onclick="change()" value="Change"/>
function test(val) {
console.log(val);
}
function change() {
document.getElementById('test').rel = Math.floor(Math.random()*11);
}
http://jsfiddle.net/CD7Uj/
Using the rel attribute, you can update the value that is used by your onclick function handler, so that you could have:
addplaylist('$watch',this.rel);
And use another function to change it.
You can't; it's generated on the server side. What you can do is replace the click handler once the page has been loaded, although it'd be easier if the anchor tag had an id... if it's worth it.
Easier yet, create a function that just delegates to the original function:
function addplaylist(watch, val) {
originalAddplaylist(watch, '2');
}
(Better yet, change it on the server side.)
In a PHP page i have several rows of one table like this
echo '<tr><td>Click</td></tr>';
The $id is dynamically generated from a database
So I want to define the function in jQuery but to pass the parameter to the jQuery function.
For each button I click there will be another parameter passed
Why not use the ID as an identifier for the link like this:
Click me
In jQuery you can bind to the onclick event like this:
// Execute on load
$(document).ready(function(){
// Bind to click
$('a.myjquerylink').click(function(){
// Get the id
var id = $(this).attr('id');
// Do something with the id.
doSomething(id);
});
});
What exactly do you want to do ?
Here's a sample function (it's not using jQuery!) to alert the user that the linked has been pressed and to stop propagating the event, so that it doesn't jump to another page on click
<script type="text/javascript">
function myFunction( param ) {
alert('The button with the id ' + param + ' has been pressed!');
return false;
}
</script>
Well in a dirty way you can assign your id's in rel tag like this:
echo '<tr><td>Click</td></tr>';
than you can search for mybutton class in jquery an add events to it:
$("a.mylink").click(function(){
alert($(this).attr('rel'));
});
So in this case $(this).attr('rel') should be your ID.
As other poster started saying, bind a function to an event. Say you assign a css class to your a tags to make it easier:
echo '<tr><td><a class="specialLinks" href="#" onclick="myFunction('.$id.')">Click</a></td></tr>';
Then you would bind to your class like this:
$('.specialLink').bind('click', function() {
this.preventDefault();
alert($(this.attr("id"));
});
you need to modify your html a bit:
echo '<tr><td><a class="someclass" href="#" id='".$id.'">Click</a></td></tr>';
then you can call it by it's class in JQuery and do what you want:
"$(this)" will be a reference to the clicked item.
$(".someclass").live('click',function(e){ e.preventDefault(); alert($(this).text())});