Disable multiple buttons using jQuery - javascript

I have a Razor foreach loop in my MVC view which will generate a number of table rows containing buttons:
#foreach (var item in Model)
{
<tr>
<td>#item.Id</td>
<td>
<button id="btn" class="button btn-primary" type="button" onclick="location.href='#Url.Action("RunSingleTest", "Home", new {testName=#item.Test_type, id=#item.Id})'"> Run Test</button>
<img id="loading" src="img/ajax-loader.gif" alt="" style="display:none;" />
</td>
</tr>
}
I want to disable button on click and show loading spinner, however this doesn't work the way I do. (it works in my other page when there's single button)
this is my script:
$(function () {
$('#btn').click(function () {
$('#btn').attr("disabled", "true");
$('#loading').show();
});
});
How to make it work in foreach?

Don't use id, use class. $('#btn') will return only the first element that has this id, even if there are more.

Make sure the id's of your elements are unique. According to the html standard you can not have duplicated id's.
I changed your code a bit to fit the snippet and to work better.
Using prop() instead of attr() because it support properties a lot better.
Added an iteration number to the id's in the loop.
Added class to the loading element for a common jQuery/Css selector
used $(this) selector to get the current clicked buttons. Because of this had to use the sublings() function to get the corresponding <img> element.
$(document).ready(function() {
$('.button').on('click', function () {
$(this).prop("disabled", true);
$(this).siblings('.loading').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>
<button id="btn1" class="button btn-primary" type="button"> Run Test</button>
<img id="loading1" class="loading" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" style="display:none;" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<button id="btn2" class="button btn-primary" type="button"> Run Test</button>
<img id="loading2" class="loading" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" style="display:none;" />
</td>
</tr>
<tr>
<td>3</td>
<td>
<button id="btn3" class="button btn-primary" type="button"> Run Test</button>
<img id="loading3" class="loading" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" style="display:none;" />
</td>
</tr>
</table>

Having multiple buttons (or any other HTML element) with the same ID is not valid HTML. IDs are meant to be unique identifiers of the element - after all, if they weren't they'd no longer be fit to call an "ID"!
Consequently, your "click" handler will only ever be bound to the first element which has that ID. JavaScript is only expecting one matching element, and will not even consider all the others.
You need to use classes instead:
$('.button').click(function () {
will bind to all buttons with the "button" CSS class.
You can then use $(this) to get hold of the current button. You'll need to traverse the DOM to get the nearest "loading" element (which also needs to use ca class instead of an ID).
Also you should use .prop() to set the "disabled" property (note, not attribute!) instead of .attr() as documented here: http://api.jquery.com/attr/
If we add all that together we get something like:
$(function () {
$('.button').click(function () {
$(this).prop("disabled", true);
$(this).siblings('.loading').show();
});
});
in the jQuery, and
#foreach (var item in Model)
{
<tr>
<td>#item.Id</td>
<td>
<button class="button btn-primary" type="button"> Run Test</button>
<img class="loading" src="img/ajax-loader.gif" alt="" style="display:none;" />
</td>
</tr>
}
BTW in your code you seem to have a jQuery "click" function and an inline "onclick" event handler. This is not good from a maintainability perspective - better to choose a style and stick to it. Also since your "onclick" navigates the user to another page, all other changes you do in the jQuery handler will be lost immediately in any case. I have removed it in the example above, as it's unclear what is purpose really is, or if it's needed.

Try the below code to disable the button.
$(function () {
$('#btn').click(function () {
$(this).prop("disabled",true);
$('#loading').show();
});
});

You can still trigger it by the id's of the buttons, but it has to be done this way:
$('[id^=btn]').click(function () {
$(this).prop("disabled", "true");
$(this).siblings('#loading').show();
});
That will allow the individual button to be disabled when it's clicked and also only show the image that is in relation to the button clicked.

Related

Calling JQuery's html() function twice in one method does not work

My goal is to replace the contents of two table rows on a button click. I attempted this using JQuery's html function, but I cannot seem to call that function twice in the same method call. I tested the following in jsFiddle:
HTML:
<table>
<tr>
<td class='textToReplace'>I want to be replaced with an input!</td>
<td class='theButton'><input type="button" id="test" value="make editable"/></td>
</tr>
</table>
JQuery:
$(document).on('click', "#test", function(e) {
$(e.target).closest("td").html('<input type="button" value="cancel edit"/>');
$(e.target).closest("tr").find('td.textToReplace').html('<input type="text" value="I am now editable!"/>');
});
Please note that in practice the table I'm working with will be an unknown number of rows, which is why I'm using classes and jquery selectors to drill through the dom. Either line of the method works fine in isolation, but in trying to call both, it will only execute the first line. Is there a restriction on calling .html() or am I simply missing something?
Calling .html() replaces the entire DOM subtree with new elements parsed from the HTML.
This means that the old subtree, including e.target, is no longer in the document and is has no such ancestor.
You have two options:
1) Simply change the order
$(document).on('click', "#test", function(e) {
$(e.target).closest("tr").find('td.textToReplace').html('<input type="text" value="I am now editable!"/>');
$(e.target).closest("td").html('<input type="button" value="cancel edit"/>');
});
2) Set the parent element before changing the dom:
$(document).on('click', "#test", function(e) {
var elem = $(e.target).closest("tr");
$(e.target).closest("td").html('<input type="button" value="cancel edit"/>');
$(elem).find('td.textToReplace').html('<input type="text" value="I am now editable!"/>');
});

Activating td button using JavaScript

I have the following function, which is used to expand and collapse child tr rows from parent rows within a table, and also changes the text style of a tr to normal:
$( document ).ready(function() {
$('.parent').on('click', function(){
$(this).next('.child').toggle();
$(this).css('font-weight', 'normal');
<<< ADD COMMAND TO TOGGLE BUTTON HERE >>>
});
});
I also have the following hidden button within each tr, which I want to submit when a tr is clicked:
<button type="submit" name="read-button" formmethod="POST" value="{{ message.message_id }}" style="display: none;"></button>
Which command should I include alongside the JavaScript function, in order to achieve this? I believe it will be one of the following (provided by this answer), however I've only been using JS for a few days so I'm not sure how to include these in my code:
document.getElementById('read-button').submit();
changeAction('read-button','loginForm');
document.forms['read-button'].submit();
Sample html:
<form method=['POST']>
<table>
<tr class="parent">
<td>
<button type="submit" name="read-button" formmethod="POST" value="{{ message.message_id }}" style="display: none;"></button>
<a>Heres a cell</a>
</td>
<td>
<a>
Heres one more cell
<a>
</td>
</tr>
<tr class="child">
<td>
<a>
Some hidden info
</a>
</td>
<td>
<a>
More hidden info
</a>
</td>
</tr>
<table>
</form>
To answer the specific question of how to trigger a button within a td via clicking on the tr:
$('.parent').on('click', function() {
$(this).find("button").click();
that can be improved by giving the button a class (incase you add additional buttons in future), eg:
<button class='readbutton' ..`
then
$('.parent').on('click', function() {
$(this).find("button.readbutton").click();
In this scenario, it seems that you don't need a hidden button as you can call the functionality of the hidden button directly.
So rather than:
$("button").click(handleClick);
use
$('.parent').on('click', function() {
.. other functionality ...
handleClick();
as you're new to js, note the difference between handleClick and handleClick() - with () it calls the function, without it passes it as a function variable.
$("button").click(handleClick);
is the same as
$("button").click(function() { handleClick(); });
If you're trying to submit a form, then you would use $(form).submit() - but there's no form in the code as pointed out in the comments and an ajax call would seem more appropriate here than submitting a form.
Finally, consider using classes rather than setting the css directly as adding/removing classes it quite simple in jquery eg for your tr click event add:
$(this).addClass("selected").siblings().removeClass("selected");

How to modify a dynamically created content using jQuery

Firstly a bit of background: I'm modifying Drupal's backend (Node creation form) to dynamically add an html to a dynamically created element.
So, this is not a strictly Drupal question, as I believe what I want to know is within the realm of jQuery rather than Drupal.
In my form, I have a repeater (initially I have 1 textarea element, when I click on 'Add more' I'll have 2 textarea elements, and so on).
What I'd like to achieve is, trigger an event (hide elements, add others) when the 'Add more' button is clicked.
So I wrote this:
(function($) {
'use strict';
$(document).ready(function() {
var $container = $('#edit-field-updates tbody .draggable td div.form-item');
$container.find('textarea').hide();
var select = '<select><option value="template_1">Template One</option><option value="template_2">Template Two</option><option value="custom">Custom</option></select>';
$container.append(select);
$('html').click(function (event) {
$container.find('textarea').hide();
$container.append(select);
});
});
})(jQuery);
Note that the I achieve what I want on page load, which is to modify the element. The problem appears when the user click on 'Add more' to add more items.
PS: Ideally I'd like to post the original code that generates the repeater however I still haven't found it yet. This admin theme is based on the Rubik theme, but its a child theme developed internally by someone who's left so can't figure it out where it is.
I've also tried:
...
$('html').on('click', 'input', function (event) {
alert('OI');
$container.find('textarea').hide();
$container.append(select);
});
...
Which does trigger the alert when I click on the page for the second time (I click on 'Add more', then click again anywhere on the page. I guess because I used 'html' rather than a element), however when I used a specific element rather than 'html' it didn't work.
Any ideas?
EDIT:
I've also tried:
$('#edit-field-updates-und-add-more').click(function() {
$container.find('textarea').hide();
$container.append(select);
});
Which didn't work. Here's the html:
<div class="field-type-text-long field-name-field-updates field-widget-text-textarea form-wrapper" id="edit-field-updates"><div id="field-updates-add-more-wrapper"><div class="form-item"><table id="field-updates-values" class="field-multiple-table sticky-enabled">
<thead><tr><th colspan="2" class="field-label"><label>Updates </label></th><th>Order</th> </tr></thead>
<tbody>
<tr class="draggable odd"><td class="field-multiple-drag"></td><td><div class="form-item form-type-textarea form-item-field-updates-und-0-value">
<div class="form-textarea-wrapper resizable"><textarea class="text-full form-textarea" name="field_updates[und][0][value]" id="edit-field-updates-und-0-value" cols="60" rows="5"></textarea></div>
</div>
</td><td class="delta-order"><div class="form-item form-type-select form-item-field-updates-und-0--weight">
<label class="element-invisible" for="edit-field-updates-und-0-weight">Weight for row 1 </label>
<select class="field_updates-delta-order form-select" id="edit-field-updates-und-0-weight" name="field_updates[und][0][_weight]"><option value="0" selected="selected">0</option></select>
</div>
</td> </tr>
</tbody>
</table>
<div class="clearfix"><input class="field-add-more-submit button-add form-submit" type="submit" id="edit-field-updates-und-add-more" name="field_updates_add_more" value="Add another item"></div></div></div></div>
Use...
$("#AddMoreButton").click(function() {
Your Code Here
});
To add the click event only onto the button rather then the whole page. You can wrap that button .click() function with a document.ready() function so that the click event is set on the button when the page loads.
$(document).ready(function() {
$("#AddMoreButton").click(function() {
Your Code Here
});
});
When you set...
$('html').on('click', 'input', function (event) {...
It causes the entire HTML doc to have the click event set on it.
Things to note: #AddMoreButton corresponds to the ID set on the button so it would look like this.
<button id="AddMoreButton">Add More</button>

How can I add "tags" to a search field using Jquery

I have some tags (tagbutton) in a table, each tag has its own id, what I want to achieve is when the user clicks on the tag, a hidden input is created in the form with the value of the div (or tag) that has been clicked on. I also want the clicked div to be copied in the tagselected div.
I have no idea how to do that on jquery. Thank you very much in advance for your help.
<table> <tr>
<td> <div class="tagbutton" id="jazz"> Jazz </div> </td>
<td> <div class="tagbutton" id="classical"> Classical </div> </td>
<td> <div class="tagbutton" id="R&B"> R&B </div> </td>
</tr> </table>
<div id="tagselected"> </div>
<form> <input type="text"> <button ="submit"> Submit </button> </form>
Here is the javascript function that I have to copy the div, however when I clicked on it the entire table is copied
$('#jazz').click(function () {
$('.tagbutton').clone().insertAfter("#tagselected");
});
This code is wrong:
$('#jazz').click(function () {
$('.tagbutton').clone().insertAfter("#tagselected");
});
The problem with this code is that you are retrieving all the items with class tagbutton on the whole page. If your click function is on the item you want then you should be able to just use this to access the clicked item.
so something like :
$(this).clone().insertAfter("#tagselected");
This code is not tested and is just the simple change of the initial jQuery selector.
I assume the problem you have with the hidden fields is the same - that you were selcting all tags instead of just the one you clicked so hopefully this will solve that problem too.

Best way to pass parameters from server objects to JavaScript

I render a View with a table in it. Each row of the table is an object that could be edited. So, the last column of this table has a bunch of "EDIT" buttons. When one of these EDIT buttons is clicked, JavaScript function must pick up the Id of the object represented by current row. Ultimately, I would like to end up with a clean HTML: no "onclick", "onmouseover" attributes and no custom made-up attributes. Below I have 2 examples that I'm not thrilled with. Any good ideas?
Example 1:
View.aspx
<td>
<input type="button" value="EDIT" onclick="JSFunction(<%: ObjectId %>)" />
</td>
JavaScript
function JSFunction(id)
{
//some code that does whatever with id
}
Example 2:
View.aspx
<td>
<input type="button" value="EDIT" customAttribute="<%: ObjectId %>" />
</td>
JavaScript
$('input[type=button]').click(function() {
var id = this.attr('customAttribute');
//some code that does whatever with id
});
P.S. If you could come up with a better question title, please share as well :)
One way I handled this in the past is to use the html5 data-attribute. Which is picked up by versions of jQuery 1.4.3 and above.
<table>
<tr class="row" data-rowInfo='{"Id": "1", "Name": "Jon"}'>
<td>
Row Id 1
</td>
<td>
<input type="button" value="Edit"/>
</td>
</tr>
<tr class="row" data-rowInfo='{"Id": "2", "Name": "Mark"}'>
<td>
Row Id 2
</td>
<td>
<input type="button" value="Edit"/>
</td>
</tr>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
Then in your jquery you can do the following:
$("input[type=button]").click(function(){
var rowInfo = $(this).parents("tr.row").data("rowInfo");
//Do something with rowInfo.Id;
});
By using the data attribute you can have a rich json object that could contain more information than just an attribute. Plus you only have to declare one data-attribute to hold all relevant information.
Example of this working on jsfiddle.
The way I do it is I have the server render the id to the <tr> tag, you could either make up your own attribute or store it in the id attribute. Then if you have a edit button inside a td you just write jQuery to find the id stored in the <tr> tag.
html:
<tr myId="1">
<td>
<input type="button" value="EDIT" />
</td>
</tr>
jQuery:
$(function() {
$("input[type=button]").click(function() {
var id = $(this).parent().attr("myId");
});
});
Although I usually assign a class of "edit" to my edit buttons rather than selecting them by their type (as I have a save button on the page).
I would use the jQuery metadata plugin as then data can be embedded in a number of different ways onto any element. The usual way is to add it to the class like this:
<input type="button" class="button { objectId : <%: ObjectId %> }" />

Categories

Resources