I have a Jquery Mobile listview with a delete button next to an link in each list item. When I click the delete button, the onclick event fires, the delete function runs but then the href is also followed, even though the button isn't nested within the href. I have added return false to the button to see if that would help but it doesn't! HELP!
Here's the code I'm using to dynamically populate my list....
$('#roomsList').append('<li><img src="img/delete-2x.png" class="delete" onClick="deleteRoom(\'' + currentRow.roomtype + '\',\'' + propertyID + '\'); return false;" />' + currentRow.roomtype + '</li>');
There shouldn't be any problems. Look at this example: http://jsfiddle.net/Gajotres/WEmNG/. I have created it two days ago for someone else but it is similar to your question. Instead of delete button I am showing custom checkbox on a listview. If you click a listview it will forward you to another page but if you click on the custom checkbox it will only activate event on chechbox.
Use my example to create a working delete button on a listview.
This is an example of event I am using on my custom checkbox:
$('.checkBoxLeft').bind('click', function(e) {
if($(this).find('input[type="checkbox"]').is(':checked')){
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').attr('checked' , false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').attr('checked' , true);
}
});
Append both the a and the li to the parent [ put them on the same level]. In this way they it should work easily.
Related
I have some Bootstrap-Buttons, which should show a popover when the button is clicked.
usernameL.onclick = function(e){
$("#" + e.currentTarget.id).popover({html : true});
}
When the website has loaded and I click the button a first time, nothing happens. If I click a second time, the popover opens and it works normal.
What can I do for the popover to appear on the first click?
In your code, first time you click on button the popover start to init only, so until the second click, you see the effect,
I'm not sure about the version popover which you used. As the resource which I have found, they are using the jquery also.
https://github.com/klaas4/jQuery.popover/blob/master/demo.html
You can init the popover first, and then trigger click for it from any button which you want
First approach, bind popover directly into button
$(function(){
$("[name=usernameL]").popover({trigger: 'click'});
});
Second appoach, bind popover from a content div, and show popup from a button click
$("#divcontent").popover({trigger: 'click'});
$("[name=usernameL]").click(function(){$("#divcontent").trigger('click')});
What about this?
usernameL.onclick = function(e){
$("#" + e.currentTarget.id).popover({html : true}).popover('show');
}
try this
usernameL.onclick = function(e){
$("#" + e.currentTarget.id).popover({html : true});//Initializes popover
$("#" + e.currentTarget.id).popover('show');//show popover
}
try the jquery style,
i suppose the button is id usernameL
$('#usernameL').click(function(){
$(this).popover();
});
I'm trying to get my program to create a new button on form submit. I know I've done something wrong but don't know how to fix it. Here is my code:
$("#searches").append('<button id="recent-searches">' + textbox + '</button>')
then later on I have:
$("#recent-searches").on('submit', function() {
I think the second part of the code is where I went wrong. Any help would be awesome.
Thanks!
There is no submit event for a button, did you mean click or submit event on a form?
Try
$("#recent-searches").on('click', function() { // if you are biding this after appending the button.
else
$(document).on('click',"#recent-searches" function() { // if you are binding this prior to appending the button to the DOM. use $("#searches").on(... if that element is available all the time in DOM.
if #searches is a form then you would do:
$("#searches").on('submit', function(){...
You're creating a button #recent-searches which will receive, among others, the event click when you click on it. However it won't fire submit events because those are just for form elements when an input element of type submit is clicked.
So you'd have a form, let's say:
<form id="searches"> ... </form>
Where you are appending the button, maybe this way:
$("#searches").append('<input type="submit" id="recent-searches">' + textbox + '</input>');
, and then you'd do:
$("#searches").on("submit", function (e) { ... });
Or you can also have your button but bind a click event instead like so:
$("#recent-searches").on("click", function (e) { ... });
$("#recent-searches").on('submit', function() {
This is going to bind to the element matching the id recent-searches that event. If the element doesn't exist then jQuery will do nothing. You have to bind the event to the whole document(or to a parent which will contain that element with id recent-searches) and specify the ID, like this:
$(document).on('click', '#recent-changes', function() {
In this case I think that something like this should work:
$('#searches').on('click', '#recent-changes', function() {
Since #recent-changes is appended to that element.
Remember that the submit event is not going to be fired when you click that button, because it is not the submit button, you can use this code:
$("#searches").append('<input type="submit" id="recent-searches" value="' + textbox + '" />');
Is there a way to get the hyperlink name when you click on it using jQuery? I have the following code, I need some jQuery direction:
<a href="#" id="imageClick" name='<%# Eval("fileName1") %>'><asp:Image ID="myImage" name='<%# Eval("fileName1") %>' runat="server" ImageUrl='<%#"~/Image/" + Eval("fileName") %>' /></a>
Basically I would like to return the value of whatever <%# Eval("fileName1") %> is.
Thanks.
EDIT: To be more clear, I have a popup page which contains a listView which that has images and radio buttons. The requirement is if you click on the radio button, it should get the value of that specific choice and close the popup. I'm also passing a value back to the parent window. So this is what I have:
$(document).ready(function () {
$("#form1").change(function () {
var val = "";
if ($('input:radio[name=myRadio]:checked').val()) {
val = $('input:radio[name=myRadio]:checked').val();
}
if (val != "") {
$(window.opener.document).find('#txtLogos').val(val);
// Close the window
window.close();
}
});
});
This works fine when I click on one of the radio buttons. But now they added another requirement that if they click on the images they want the same result (Obviously without disrupting the functionality that the radio button has).
You can just access it using this.name inside your click handler. this here is the Dom element (Don't need jquery to retrieve the element attribute value), so just directly access the name attribute of the element.
$('#imageClick').click(function(){
alert(this.name);
});
Edit
Form change will not be triggered if you click on an image; unlike input, select, textarea etc. So you need to trigger form change manually on image click event (to simulate a radio button click triggering the form change event).
Bind a click handler to your images to add class:
$('yourimageselector').click(function(){
$(this).toggleClass('checkedImage'); // Add a class on first click and again clicked on it remove the class to say it is turned off. If you dont want a turn off functionality simply say :
//$(this).addClass('checkedImage'); //or if this is the only class then this.className = 'checkedImage' classList is not yet supported in all browsers.
$('yourform').change(); //as this is image it wont trigger form change event so you need to manually trigger form's change event (only for input, select, textarea etc form change will be triggered).
});
And in your form event:
$("#form1").change(function () {
var imgNames= $('.checkedImage')
.map(function(){return this.name; })
.get(); // Will get you all the image names in an array.
//if it is just one image then simply do if($('.checkedImage').length > 0) $('.checkedImage')[0].name,
//Code follows
});
Fiddle
this can also work in the event handler of your click :
document.getElementById("new-answer-activity").name
I'm performing a deleting action on a page when the user click on the confirmation button on a twitter bootstrap modal window button.
I have two buttons: one allow the user to cancel the action, and another one to confirm.
When the user clicks on the confirm delete button, when the modal is hidden, I perform my actions, so for example I can show an animation and actually delete the item.
If the user click on few items but his/her choice is the cancel button, when he/she clicks on the item he/she want to delete, the deletion is performed also on the elements where the choice has been to cancel.
Should not the 'hidden' event be detached from the element once it is performed?
I know I can detach the event chaining changing $('#confirmDeleteModal').on('hidden', function() { to $('#confirmDeleteModal').off('hidden').on('hidden', function() { but I really would understand why this happen. Am I missing something?
The code is:
$(document).ready(function(){
$('.delete').on('click', function() {
var itemID = $(this).data('product-id')
$('#confirmDeleteModal').modal('show');
$('#confirmDelete').on('click', function() {
$('#confirmDeleteModal').on('hidden', function() {
// Here I do my stuff to perform deletion
$('#result').append('This method has been called for ' + itemID + ' <br />' )
});
});
});
});
I hope I have exposed clearly my question. I prepared a JS Bin as well: http://jsbin.com/inulaw/5/edit
The problem here is that you are attaching additional listeners to the click and hidden events each time. To fix this, chain the jQuery .off('eventName') method before calling the .on('eventname') again.
Here's your code updated and working great in the JS Bin:
$(document).ready(function(){
$('.delete').on('click', function() {
var itemID = $(this).data('product-id')
$('#confirmDeleteModal').modal('show');
$('#confirmDeleteModal').off('hidden'); // must reset from previous
$('#confirmDelete').off('click').on('click', function() {
$('#confirmDeleteModal').on('hidden', function() {
// Here I do my stuff to perform deletion
$('#result').append('This method has been called for ' + itemID + ' <br />' )
});
});
});
});
EDIT: I moved the $('#confirmDeleteModal').off('hidden'); to above the click event so it resets whether or not the confirm is clicked.
I have a div named "What".
If the user clicks on it, it changes from text into a textarea input.
$('.What').click(function() {
$(this).empty().html('<textarea name="X">' + $(this).text() + '</textarea>');
$(this).find('textarea').select();
});
You can see that I also select the newly created textarea.
If the user clicks into the textarea, nothing happens.
Q: How can I allow the user to click into the newly created textarea field to position the cursor where they want to? I suspect it has something to do with using a live event to prevent bubbling.
The problem is, that your click handler does not disappear after you replace the content of your div with a textarea. So every click on the textarea bubbles up the the "What"-div and triggers your event handler again, which re-apppends the textarea.
You have to make sure that clicks on the textarea do not trigger your handler. An easy way to do this is jquery's one-function, which unbinds your event handler after it has been called once.
Another issue with you fetch the content of your div after you empty it, so the default value of your textarea will always be an empty string. This can be fixed by fetching the content first. The corrected code now looks like this
$('.What').one('click',function() {
var content = $(this).text();
$(this).empty().html('<textarea name="X">' + content + '</textarea>');
$(this).find('textarea').focus();
});
See an example here: http://jsfiddle.net/xszUS/
Use:
$('.What').click(function() {
$(this).empty().html('<textarea name="X">' + $(this).text() + '</textarea>');
$(this).find('textarea').focus();
});
In short, use .focus() not .select()
If you want to react to the user clicking/tabbing out of the textarea that is called blur
Try this
$('.What').click(function() {
var text = $(this).text();
$(this).empty().html('<textarea name="X">' + text + '</textarea>');
$(this).find('textarea').select();
$(this).unbind('click');
});
Checked it here: http://jsfiddle.net/Hy5ZB/