im trying to get the closest id whena button is clicked to send it in an ajax request. But ive been struggling achiving so.
The HTML part is this one (cshtml)
<div id="modifyCar_#car.Id" class="modifyCar">
<!--Delete car button-->
<div>
<button type="button" class="btn btn-secondary btn-sm bg-danger" id="btnDeleteCar" name="btnDeleteCar">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
im trying to extract the #car.Id part
The JS part is this:
id: $(this).closest("div").find(".modifyCar").attr("id"),
Consider the following.
$(function() {
$(".btn").click(function() {
var myId = $(this).closest(".modifyCar").attr("id");
console.log(myId);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modifyCar_#car.Id" class="modifyCar">
<!--Delete car button-->
<div>
<button type="button" class="btn btn-secondary btn-sm bg-danger" id="btnDeleteCar" name="btnDeleteCar"><i class="fas fa-trash-alt"></i></button>
</div>
</div>
.closest() can accept a selector, like a Class name. Your Code will stop at the Parent DIV Element, as that matches the closest "div" selector.
Related
I am trying to attach an .on() click method to elements that I create dynamically. These elements each have a Bootstrap popover in them which acts as a menu with options for each element. The popovers are also created dynamically.
To make the menu work, I assign a unique number to each element and when an option from the menu is clicked, that unique number is extracted as a way to match the menu and it's options to the element. That way when I click the 'delete' option, it knows which element to delete.
However when I create multiple elements and try to extract the unique number, I only get the number of the first element.
HTML:
<div class="scenario-group" id="scenario-group-0">
<div class="scenario-list" id="scenario-list-0">Egypt</div>
<div style="display:none;" name="0" id="scenario-options-box-0" class="scenario-options-box" scn-box="0">
<button type="button" id="show-btn" class="scenario-option-btn btn-light" btn-box="0">Show</button>
<button type="button" id="rename-btn" class="scenario-option-btn btn-light" btn-box="0">Rename</button>
<button type="button" id="delete-btn" class="scenario-option-btn btn-light" btn-box="0">Delete</button>
</div>
<div>
<a tabindex="0" role="button" style="left:22px; top:2px;" name="0" class="scenario-btn" id="scenario-options-btn-0" scn-box-btn="0" data-toggle="popover" data-placement="left" data-trigger="focus" data-original-title="" title="">
<i style="color:#444444;" class="fas fa-caret-down" aria-hidden="true"></i>
</a>
</div>
<div class="scenario-group" id="scenario-group-1">
<div class="scenario-list" id="scenario-list-1">Nigeria</div>
<div style="display:none;" name="1" id="scenario-options-box-1" class="scenario-options-box" scn-box="1">
<button type="button" id="show-btn" class="scenario-option-btn btn-light" btn-box="1">Show</button>
<button type="button" id="rename-btn" class="scenario-option-btn btn-light" btn-box="1">Rename</button>
<button type="button" id="delete-btn" class="scenario-option-btn btn-light" btn-box="1">Delete</button>
</div>
<div>
<a tabindex="0" role="button" style="left:22px; top:2px;" name="1" class="scenario-btn" id="scenario-options-btn-1" scn-box-btn="1" data-toggle="popover" data-placement="left" data-trigger="focus" data-original-title="" title="">
<i style="color:#444444;" class="fas fa-caret-down" aria-hidden="true"></i>
</a>
</div>
JQuery:
$(document).on('click',".scenario-option-btn", function() {
var btnVal = $(this).text();
var btnID = $(this).attr("btn-box")
var scnID = $("#scenario-list-" + btnID + "").text();
})
The return values for btnVal are correct, however the value for btnID will always return 0 and I am struggling to see why.
Is this the correct way to assign event handlers to multiple dynamically created elements?
Any help would be appreciated. Thanks!
I'm having trouble showing more than one button active to the user when using the bootstrap button class. I have two rows of buttons - I want the user to be able to select one value from each of the rows, and I want both selected buttons to show as active so that user can easily see the choices they selected. Currently, if the user selects one button, it becomes highlighted, but once they select another button from another row, the second button is then highlighted, but the first button no longer displays as active to the user.
So I have:
<div class="btn-group text-center">
<button type="button" class="btn btn-primary" value="row 1 choice 1" />
<button type="button" class="btn btn-primary" value="row 1 choice 2" />
</div>
<div class="btn-group text-center">
<button type="button" class="btn btn-primary" value="row 2 choice 1" />
<button type="button" class="btn btn-primary" value="row 2 choice 2" />
</div>
The user is directed to select one option from the first and second row and I just want both buttons to show they are active (by being indicating the darker color) once they are selected, instead of just one being able to be active at a time.
You first have to remove the class "active" from all the buttons and then add the "active" class to the pushed button:
<script>
$(".btn-primary").click(function () {
$(btn-primary").removeClass("active");
$(this).addClass("active");
});
</script>
You could just set the active class on them when they are clicked like this:
/* Latest compiled and minified CSS included as External Resource*/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
margin: 10px;
}
<div class="btn-group text-center">
<button type="button" class="btn btn-primary active" value="row 1 choice 1" />
<button type="button" class="btn btn-primary" value="row 1 choice 2" />
</div>
<div class="btn-group text-center">
<button type="button" class="btn btn-primary" value="row 2 choice 1" />
<button type="button" class="btn btn-primary active" value="row 2 choice 2" />
</div>
You need to toggle an active class on your buttons. Also there are problem around using a button element becuase they have default behavior when clicking them which messes the styling up. I have changed them to anchor tags and it works perfectly.
<div class="btn-group text-center">
<a class="btn btn-primary" data-value="row 1 choice 1"></a>
<a class="btn btn-primary" data-value="row 1 choice 2"></a>
</div>
<div class="btn-group text-center">
<a class="btn btn-primary" data-value="row 2 choice 1"></a>
<a class="btn btn-primary" data-value="row 2 choice 2"></a>
</div>
<script>
$(".btn-primary").click(function () {
$(this).toggleClass("active")
});
</script>
If you need to retrieve values from your anchor tags with javascript you can use html 5 data attribute as I have done:
html:
<a id="btn4" class="btn btn-primary" data-value="row 2 choice 2"></a>
Js:
$("#btn4").data("value")
<div class="row">
<div class="col-md-8">
<h3 >
<button type=submit class="btn btn-primary btn-lg btn-block" .button><a href = "mrequest.php">make a request</button>
</h3>
</div>
</div>
<div class="row">
<div class="col-md-8"> <h3>
<button type=submit class="btn btn-primary btn-lg btn-block" .button><a href = "mviewreq.php">view requests</button>
</h3>
</div>
</div>
<div class="row">
<div class="col-md-8"> <h3>
<button type=submit class="btn btn-primary btn-active btn-lg btn-block" .button><a href = "mviewstaff.php">Quotation requests</button>
</h3>
</div>
How can I change the button to active when some particular button is clicked , and i also want to use same thing on the navigation tabs too. and make it active too, please can some post any jquery or some thing like that so I can use it. I have searched on internet about it but i am unable to understand it
Add a bootstrap Active class using jquery
<button id="btn1" type=submit class="btn btn-primary btn-lg btn-block" .button>
$('#btn1').on('click', function (e) {
$('#btn1').each(function () {
$(this).addClass('active');
})
});
This works well with the navigation , if you replace the ElementId with li.
Can you please take a look at this demo and let me know why the
$(".onealert").on("click",function(){
alert("You clicked on A");
});
is not functioning?
here is the code I have :
<div class="the-box">
<div class="pull-right btn-group btn-group-sm" id="downloadSelect">
<button type="button" class="btn btn-default">1</button>
<button href="#" class="trigger btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
</div>
<div class="head hide">Alphabet Select</div>
<div class="content hide">
<div class="form-group">
<div class="btn-group btn-group-sm">
<button type="button" id="1Download" class="btn btn-default onealert">A</button>
<button type="button" id="2Download" class="btn btn-default">B</button>
<button type="button" id="3Download" class="btn btn-default">C</button>
</div>
</div>
</div>
</div>
I am not getting any error message too!
Thanks
That's because Bootstrap builds new markup for the little dialog as it appears, using the hidden markup as a template only, which means it's dynamic content that didn't exist when you added the event handler, and you'll need a delegated handler
$('.the-box').on("click", ".onealert", function(){
alert("You clicked on A");
});
FIDDLE
I need to get the value of the value attribute of the button element and write this value into another modal.
I have a loop in my PHP which writes the following HTML:
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="1">Confirm</button>
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="2">Confirm</button>
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="3">Confirm</button>
When I click on a button it shows a modal with two buttons, one to continue and one to cancel. I want store the value of the value attribute of the first button in the href attribute of the "continue" button in the second modal.
My modal:
<div class="modal-body">
<div class="text-center">
<div class="i-circle danger"><i class="fa fa-times"></i></div>
<h4>Are you sure?!</h4>
<p>If yes click on Continue!</p>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a href="IWANTGETIDHERE">
<button type="button" class="btn btn-danger" data-dismiss="modal">Continue</button>
</a>
</div>
</div>
</div>
Here is a demo of my modal.
Using jQuery:
$(document).ready(function() {
$('.btn').click(function() {
alert($(this).attr("value"));
});
});
Instead of alert, use:
$('.modal-footer a').attr("href", $(this).attr("value"));
See the JSFiddle
Using Pure Javascript
document.getElementById('btn').onclick = function() {
document.getElementById('link').setAttribute('href', this.value);
}
See the JSFiddle
button = document.getElementById("buttonID");
button.onclick = function(){
document.getElementsByClassName("class")[0].href = document.getElementById("buttonID").value
}
If you are looking for no dependancies.
You may try this, add a data-customId attribute and remove the value from all of your buttons:
<button data-customId="1" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn">Confirm</button>
<button data-customId="2" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn">Confirm</button>
<button data-customId="3" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" >Confirm</button>
Also, add an id to your modal div like:
<div id='confirmAction' class="modal-body">
<!-- Markup -->
</div>
Then register a handler for bootstrap show event:
$('#confirmAction').on('show.bs.modal', function (e) {
$id = $(e.relatedTarget).attr('data-customId'); // Get the customId
$(this).find('a:first').attr('href', $id);
});