I want to hide a button until other button is getting submitted.
ex. button1 is hidden.
button 2 visible
if(button2 submitted)
button 1 get visible.
can you tell a method to do that??
I'm rather new to jQuery, but I believe this may work:
HTML:
<form id="someform">
...
</form>
JS:
$(function() {
$('#button1').hide();
}
$('#someform').submit(function() {
$('#button2').show();
}
Try this:
$('#button1').bind('click', function() {
$(this).hide();
$('#button2).show();
});
$('#button2').bind('click, function() {
$(this).hide();
$('#button1).show()
});
Related
When click on datepicker (http://www.eyecon.ro/bootstrap-datepicker/), his SHOW event fires, but the modal's SHOW.BS.MODAL fires too. Whhere is a problem?
$(document).ready(function() {
$('#ArrDate')
.datepicker()
.on("show", function(event){
alert("Q");
});
$("#dlg3000to3100")
.on('show.bs.modal', function (event) {
alert("W");
});
$("#dlg3000to3100")
.modal("show");
});
exampleExample
Thanks
It seems to be a bug (or feature?) of the datepicker. What you can do is to prevent the show.bs.modal event reaching the dialog.
$('#ArrDate').on('show.bs.modal', function (event) {
event.stopPropagation();
});
This will detect the event at the datepicker level and stop the event propagation, so show.bs.modal will not 'bubble up' to the dialog.
Another work around is to swap the show.bs.modal with shown.bs.modal on modal event.
modal.on('shown.bs.modal', function (event) {
// Do something
});
however if it is not possible to swap show with shown or hide with hidden use the namespace check
modal.on('show.bs.modal', function(e) {
if (e.namespace === 'bs.modal') {
// Do something
}
});
Had a similar issue, caused by the datepicker watching for a show event.
One option is to use the shown event on the modal but this is not ideal in all cases
$('#dlg3000to3100').on('shown.bs.modal', function (event) {
// modal code in here
});
A more elegant solution is to check the namespace of the event
$('#dlg3000to3100').on('show.bs.modal', function (event) {
if(event.namespace !== 'bs.modal') return;
// modal code in here
});
https://jsfiddle.net/bzh75tww/
I have a button which when clicked the first time it will load another html page.
When it is clicked the second time it will empty a div of the loaded page.
However, for some reason the loaded content keeps reappearing after the second click....
CSS:
#boatdiv {
width: 100%;
}
.clicked {}
HTML
<button id="load"></button>
<div id="boatdiv"></div>
jQuery
$(document).ready(function() {
$.ajaxSetup ({
cache: false
});
var loadURL = "AjaxLoad_injection.html";
$("#load").on("click", function() {
if(!($(this).hasClass("clicked"))){ //checks if button has NOT been clicked
$("#boatdiv").html("<p>loading...</p>").load(loadURL);
}
else {
$("#boatdiv").empty();
}
$("#boatdiv").toggleClass("clicked");
}
);
}); // end ready
What's going on?
You test $(#load) but toggle $("boatdiv").
Try :
$("#load").on("click", function() {
if(!($(this).hasClass("clicked"))){ //checks if button has NOT been clicked
$("#boatdiv").html("<p>loading...</p>").load(loadURL);
}
else {
$("#boatdiv").empty();
}
$(this).toggleClass("clicked");
});
You are toggling class on wrong element. You want it to toggle on the element being clicked. Same as code I gave you in last post.
Simple to walk through it, you are testing this... so need to toglle the class on this
Use
$(this).togglClass('clicked')
Remember that ajax calls are asynchronous. You may be clicking the button a second time before the ajax call has returned.
You could disable the button during the ajax call, like this:
$('#load').on('click', function() {
if (!$(this).hasClass("clicked")) {
$('#load').attr('disabled', true);
$("#boatdiv").html("<p>loading...</p>").load(loadURL, function() {
$('#load').attr('disabled', false);
});
} else {
$('#boatdiv').empty();
}
//$('#boatdiv').toggleClass("clicked");
$('#load').toggleClass("clicked");
});
The button is disabled before the ajax call. A callback function is passed as a second parameter to the "load()" function. It will be called when the ajax call returns. It will re-enable the button.
EDIT: I missed that the wrong element was getting the class toggled, but I still think you want to disable the button during the ajax call or things can get messed up.
i'm changing a innter html of a dom element with a button. And when button is clicked i want to fire another controller function. Something like that. ... But is not working :).
$scope.addBtn = function() {
$('domtarget').html('<button ng-click="removeButton();"></button>');
}
$scope.removeBtn = function() {
$('domtarget').html('');
}
Please suggest fix :)
Do not modify DOM inside your controller, ever.
<div ng-show="showMe"></div>
<button ng-click="showMe = !showMe;anotherAction()">Switch</button>
<button ng-click="someOtherAction()">Switch2</button>
.
function SomeCtrl($scope) {
$scope.showMe=true;
$scope.anotherAction = function () {
alert("gotcha");
};
$scope.someOtherAction = function () {
$scope.showMe = !$scope.showMe;
$scope.anotherAction();
};
}
For hiding/showing an element conditionally, use ng-show or ng-hide.
For firing an event on click, use ng-click
How to check if a button is clicked or not in prototype JavaScript?
$('activateButton').observe('click', function(event) {
alert(hi);
});
The code above is not working.
With this button:
<button id="mybutton">Click Me</button>
Use this:
$('mybutton').observe('click', function () {
alert('Hi');
});
Tested and works, here.
You might want to encase it in a document.observe('dom:loaded', function () { }) thingy, to prevent it executing before your page loads.
Also, just an explanation:
The single dollar sign in Prototype selects an element by its id. The .observe function is very similar to jQuery's .on function, in that it is for binding an event handler to an element.
Also, if you need it to be a permanent 'button already clicked' thingy, try this:
$('mybutton').observe('click', function () {
var clicked = true;
window.clicked = clicked;
});
And then, if you want to test if the button has been clicked, then you can do this:
if (clicked) {
// Button clicked
} else {
// Button not clicked
}
This may help if you are trying to make a form, in which you don't want the user clicking multiple times.
How one may do it in jQuery, just for a reference:
$('#mybutton').on('click', function () {
alert('Hi');
});
Note that, the jQuery code mentioned above could also be shortened to:
$('#mybutton').click(function () {
alert('Hi');
});
jQuery is better in Prototype, in that it combines the usage of Prototype's $ and $$ functions into a single function, $. That is not just able to select elements via their id, but also by other possible css selection methods.
How one may do it with plain JavaScript:
document.getElementById('mybutton').onclick = function () {
alert('Hi');
}
Just for a complete reference, in case you need it.
$('body').delegate('.activateButton', 'click', function(e){
alert('HI');
});
Here's what I've made so far:
// somewhere in the page code...
<img alt="" src="images/frame.png" onclick="uploadImage()" />
I have created a jQuery script:
// in the head section of the page...
<script type="text/javascript">
$('#uploadContactImage').dialog({
title: 'Change contact image',
buttons: {
"Upload new image": function() {
$(this).dialog("close");
},
"Remove current image": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
</script>
Finally, I have a javascript file with the empty function:
function uploadImage() {
}
The use case should be: User clicks the image, the dialog pops up. Based on the button the user has clicked, certain functions should be called.
Please note that my image tag is generated through AJAX, i.e. the jQuery script is not connected to it. That's the first problem.
The second problem is that I don't know how to call the jQuery script to actually display the dialog.
The third and the last problem is that I don't know how to handle the choice the user makes.
As you must have concluded by now, I am a complete newbie when it comes to jQuery. Can you help me out to get started? Thanks.
Boris,
This is quite simple to do. Firstly, I would not use an onClick event as jQuery has much better ways to manage this. Instead, it should look as follows:
HTML:
<img alt="" src="images/frame.png" id="imageUpload" />
jQuery:
$('img#imageUpload').dialog({
title: 'Change contact image',
buttons: {
"Upload new image": function() {
$(this).dialog("close");
},
"Remove current image": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
First you'll need some hook, or path, to select the image element. Second, since it's added to the page after the document load you'll need to attach the event listener after the response.
select the element
So if you have control of the html returned via ajax add an id to it and select it trivially with jquery:
<img alt="" src="images/frame.png" onclick="uploadImage()" id="pickME" />
...and someplace in the ajax callback...
$("#pickME").click(...
If you can't add the id you'll have to drill down to it by starting from the wrapping element and looking for the img descendant.
attach the event
you can't attach the click event when the document is "ready" because the ajax hasn't inserted it into the document yet. So the thing here is to add the event handler after the img is inserted into the document. So you need to catch that event so you know when its time to add your click event.
ajax(...
success: function(data){
...stuff data into document...
$("#pickME").click(function(){
...attach the dialog to the element...
you might be out of your depth ;-)