I have codes :
HTML :
<div class="modal-footer" >
<button type="button" class="btn btn-sm btn-default" id="mybutton" style="background-color: #367E2D; color:white; opacity: 1" onclick="chooseme();">OK</button>
</div>
Javascript :
('#mybutton').click(chooseme('123'));
Purpose :
I want to change onClick event from chooseme() to chooseme('123') using Javascript
And the result of the code above is :
chooseme('123') executed immediately (not when the button clicked)
Question is : Anyone can explain what's wrong with my code? and what is
the correct implementation to reach the purpose above?
I assume from the syntax that you're using jQuery. When binding events to named functions in JS, you need to pass the function itself to the callback. With your current syntax, you're passing the return value from chooseme() to the click handler. As a result, the function is called immediately on page load.
Wrap the hander inside an anonymous function, and you're good to go:
$('#mybutton').on('click', function() { chooseme('123') });
Related
I have my simple Phonegap app, which is based on tabbed layout. On one of these tabs I have list of tags (more than one). All of these have buttons to edit and delete. Its like this:
<div class="tag-buttons" uid="TAG_ID">
<button class="edit-tag btn btn-default btn-sm">Edit</button>
<button id="aaa" class="remove-tag btn btn-danger btn-sm" onclick="removeTag()">Remove</button>
</div>
Now I want do handle this removeTag() function. So I have in my JS file this function:
function removeTag()
{
//controller.removeTag($(this).parent().attr("uid"));
console.log($(this));
}
Console.log and commented line are only samples. I want to know which button was clicked (I need uid value). All of buttons have this same class. $(this) is returning Window object.
Any ideas?
I had made stupid error. Now everything is working.
I had to change onclick="removeTag()" to onclick="removeTag(this)" and then in JS function was quite good. I changed function declaration to use additional argument like this:
function removeTag(button)
{
var id = $(button).parent().parent().attr("uid");
controller.popTag(id);
}
I have tried couple of ways in jQuery for fading out a modal dialog. Please see what I have got
A sendMessage button with a text area.
<div class="sendmessage">
<textarea class="form-control" rows="2"></textarea>
<br>
<button onClick="infoAlert();" type="button" id="sendMessage" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Send Message</button>
</div>
On click of the send button will call a JavaScript function infoAlert() and the jQuery fading out function is called with in that. The fading out is not happening at all.
My jsfiddle is here. Could some help to figure out the problem?
function infoAlert(){
$(document).ready (function(){
$("sendmessage").click(function(){
$("#myModal").show();
$("#myModal").fadeOut('slow', 0, function(){
$("#myModal").dialog('close');
});
});
});
}
]
[1]:
The first thing I saw in fiddle is you chose 2 bootstrap js files, which will cause the conflict. So, you have to choose one of them, not both.
The second thing is $("sendmessage").click(function(){}). It should be $('.sendmessage').
The third one is your code does not make any sense when you call div#myModal show then hide it. Bootstrap js should take care all the modal show and hide action.
If you opened up your browser debugger console, you will see that there is an error saying:
Uncaught ReferenceError: infoAlert is not defined
Basically, your infoAlert() function needs to be defined within your $(document).ready like this:
$(document).ready (function(){
function infoAlert(){
$("sendmessage").click(function(){
$("#myModal").show();
$("#myModal").fadeOut('slow', 0, function(){
$("#myModal").dialog('close');
});
});
}
});
You can read more about the $.ready() function here.
Since you have already specified the data-toggle="modal" and data-target="#myModal" HTML attributes, you don't need any javascript to achieve the same effect. Take a look at this updated fiddle with all the Javascript removed.
Also, note that in your original fiddle, you don't need to use both Bootstrap 3.2.0 and Bootstrap 2.3.2.
hello I'm having trouble using level 2 DOM to handle events, i've looked around but just don't quite understand how it works, and allways end up doing simple code like:
<element onClick = " some code" > </element>
instead of reaching the element from outside of html code, please help, I know this is an easy topic but just can't make it work...
there is also some css code but its not relevant to my question so here's my code:
<script type="text/javascript">
function rotate( xy , deegrees){
document.getElementById("cube").style.WebkitTransform = " rotate"+xy+"("+deegrees+"deg)";
}
// so this is where its supposed to be but not working
// whats wrong ?
document.getElementById("upp").addEventListener("click", rotate('X', 540), true);
myFunction();
</script>
</head>
<body>
document.getElementById('cube').style.WebkitTransform = 'rotateX(90deg)';
<div id="button_container">
<button id="upp" onMouseOver=" rotate('X',90); "> UP</button>
<button id="downn" onMouseOver = " rotate('X',-90); "> DOWN</button>
<button id="leftt" onMouseOver = " rotate('Y',00); "> LEFT</button>
<button id="rightt" onMouseOver = " rotate('Y',-90); "> RIGHT</button>
</div>
<section class="container">
<div id="cube">
<figure class="front">front</figure>
<figure class="back">back</figure>
<figure class="right">right</figure>
<figure class="left">left</figure>
<figure class="top">top</figure>
<figure class="bottom">bottom</figure>
</div>
</section>
This is a function call:
rotate('X', 540)
It's a function call no matter where it appears, like when you call addEventListener:
document.getElementById("upp").addEventListener("click", rotate('X', 540), true);
Thus, you're passing the result of calling your "rotate" function instead of the function itself:
document.getElementById("upp").addEventListener("click", function() { rotate('X', 540) }, true);
By wrapping the function call in another function, you correctly supply addEventListener() with an event handler to be called when the "click" happens.
In addition to that, you're trying to add the event handler in a script block that appears before the DOM element you're trying to affect. When the script runs, there won't be an element in the DOM with the id you're looking for. Either wrap your event handler setup in a "load" event handler, or move the script block to the end of the <body>.
Your code likely is running before your DOM is applied. Move script tag to bottom of page or use onload function to execute your code after the DOM has completed its load phase.
http://api.jquery.com/ready/
Validate this by ensuring you can log a element you are attempting to get a reference to...
console.log(document.getElementById("upp"));
Should return a DOM element.
I'm a little puzzled by some code I plunked together that doesn't behave quite as I'd expect.
I'm sure I'm doing something wrong (and given the late hour here, it might be something simple), but I'm looking for some clarity on why this happens.
I'm using:
jQuery 1.10.2
Knockout 2.3.0
Bootstrap 3.0.3
The Problem
I define a function in my ViewModel, which sets an observable to a certain value.
This is not called from anywhere else in my code.
I define a data-bind="click: AddAnnouncement" binding on a button that's part of a button group.
When ko.applyBindings(vm) is called, the AddAnnouncement function fires, giving me an undesired result long before I click on anything.
The Code in Question
Can be found in a JSFiddle at: http://jsfiddle.net/SeanKilleen/v8ReS/.
Essentially, I have the following JavaScript code:
var MyNamespace = MyNamespace || {
ViewModel: function(){
'use strict';
var self = this;
self.AddingAnnouncement = ko.observable(false);
self.AddAnnouncement = function(){
self.AddingAnnouncement(true);
};
self.Start = function(){
self.AddingAnnouncement(false);
};
self.Start();
}
};
var vm;
$(document).ready(function(){
'use strict';
vm = new MyNamespace.ViewModel();
ko.applyBindings(vm);
//do something with jQuery? Bind a VM?
});
My binding code is also pretty elementary (I thought):
<div class="container">
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-default"><abbr Title="Announcement" data-bind="click: AddAnnouncement()">A</abbr>
</button>
</div>
</div>
<div class="row" data-bind="visible: AddingAnnouncement() == true">
<h1>Add a new announcement</h1>
</div>
</div>
What I think it's doing
I think the code in question is doing the following:
Defining a namespace called MyNamespace (albeit probably not in the best way; this may be part of the problem?)
Defining a ViewModel object inside the namespace
Giving the ViewModel object an observable called AddingAnnouncment and a function called AddAnnouncement, which sets AddingAnnouncement to true.
Defines a Start method which ensures that AddingAnnouncement is set to false by default;
Calls the Start method as the last step in its initialization.
What am I Missing Here?
I think I'm not grasping some standard behavior of JavaScript or something about the way knockout binds models, but it seems like when applying the bindings, knockout executes all of the functions, even for the click bindings. However, that doesn't make sense to me and so I'm betting I'm wrong.
Someone enlighten me? Thanks!
Whooops! The answer to that question turned out to be right under my nose; indeed, all I had to do was write that entire darn question before I saw it. :)
The problem is with my binding:
<button type="button" class="btn btn-default"><abbr Title="Announcement" data-bind="click: AddAnnouncement()">A</abbr>
Note a very important distinction: AddAnnouncement(). The () matters quite a bit in this case.
When knockout assigns its binding, it does so by directly referencing what you enter. Since I entered AddAnnouncement(), it assigned the binding to the output of the function that had been run once, rather than the function itself which would be executed at a later time.
The best way to do it would have been to use AddAnnouncment, without paranetheses, like this:
<button type="button" class="btn btn-default"><abbr Title="Announcement" data-bind="click: AddAnnouncement">A</abbr>
This does not execute the function upon applying bindings.
While I forgot to avoid such a simple mistake, I hope it saves someone else time in the future. The working JSFiddle can be found at http://jsfiddle.net/SeanKilleen/v8ReS/4/.
We usually confuse when to use parentheses () when we bind View with ViewModel.
As when you bind AddAnnouncement function, you directly bind with function call like AddAnnouncement(). That why the AddAnnouncement function call when you bind using ko.applyBindings even though we didn't click the button, the function call already fire.
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-default">
<abbr Title="Announcement" data-bind="click: AddAnnouncement()">
A
</abbr>
</button>
</div>
</div>
so we change as below
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-default">
<abbr Title="Announcement" data-bind="click: AddAnnouncement">
A
</abbr>
</button>
</div>
</div>
working jsfiddle
Is there any kind of difference between the following two lines of code in javascript:
<button id='btn1' onclick='do_this();'>Button 1</button>;
<button id='btn1' click='do_that();'>Button 2</button>;
//some script later
function do_this()
{
alert('this');
}
function do_that()
{
alert('that');
}
onclick works in javascript, click doesn't. If you want click to work, you might need jQuery.