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);
});
Related
I have problem as below:
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn active" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
$("#active-all").click(function(){
$('.btn').toggleClass('active');
});
I have added active class to button whenever I click active-all button. I found this active class still exist to every tab that I have those HTML button. So that I want refresh that div every time I clicked tab.
I try with jQuery load() and reload() but this seems not solving my problem.
UDATE
I have added active class to button when I clicked active-all button. I found this active class still exist even I go forward or backward to another page. So that I want to find a way refresh that div every time I go forward or backward to another page.
Need something like this?
$(".btn").click(function(){
if (this.id === 'active-all') {
$(".btn", $(this).parent()).toggleClass('active');
}
});
.active {
background-color: #4CAF50;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstTab">
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
</div>
<div id="secondTab">
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
</div>
I've this html code
<button class="btn btn-warning slider__button--primary" type="button" data-toggle="modal" data-target="#myModal" data-name="product name">more...</button>
When I click on this button, I want to open a bootstrap 4 modal, and pass this Name to 'h3' tag in the modal.
<div class="modal-body">
<div class="row">
<h3></h3>
</div>
<button type="button" id="subscribe" class="btn btn-warning mx-3 my-sm-2 ml-sm-0 ml-md-0 px-md-3" value="products/details">subscribe now</button>
</div>
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var name = button.data('name')
var modal = $(this)
modal.find('.modal-body h3').val(name)
})
How can I pass data to h3 element??
I have a button which when clicked opens up a modal, and the content to show in the modal is based on the data-attributes passed to the button.
My button,
<button class="btn btn-info" data-toggle="modal"
data-target="#someModal" :data-id=item.id :data-name=item.name>
Edit
</button>
In my modal, I have some buttons and when clicked I should call a vuejs function with a parameter, which is the data-attribute.
My modal button,
<div class="modal-footer">
<button type="button" class="btn btn-danger"
#click.prevent="deleteItem()" data-dismiss="modal">
Delete
</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
Here I have to pass a parameter to deleteItem(), and that parameter is the data-id which I get from the button above.
Code for Modal
<div id="deleteModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete</h4>
</div>
<div class="modal-body">
<div class="deleteContent">
Are you Sure you want to delete ?
</div>
<div class="modal-footer">
<button type="button" class="btn actionBtn btn-danger"
#click.prevent="deleteItem()"
data-dismiss="modal">
Delete <span id="footer_action_button"
class='glyphicon glyphicon-trash'> </span>
</button>
<button type="button" class="btn btn-warning"
data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
HTML
<button type="button" #click.prevent="deleteItem()" :data-id="1" data-dismiss="modal">
Delete <span id="footer_action_button" class='glyphicon glyphicon-trash'> </span>
</button>
Vue
methods:{
deleteItem: function(){
var id = event.target.getAttribute('data-id');
console.log(id) // 1
}
}
Here is the demo https://codepen.io/maab16/pen/jONZpVG
I recommend doing a console.log(this) inside a component function, then calling that function on a button click so you can inspect all the properties of the component.
(See the attached image, below, for example output of the above console.log statement.)
This shows you that amongst others, you have access to the $el property holding the DOM element. Which opens up a whole lot of possibilities, such as being able to add the following code to the mounted lifecycle hook of your component:
mounted() {
console.log(this);
this.myAttribute = this.$el.getAttribute('data-attribute-name');
},
And for this example, this.myAttribute would have been defined in (for example) your data property:
// This value gets attributed during an earlier lifecycle hook.
// It will be overridden in the component's mounted() lifecycle hook.
data() {
return {
myAttribute: 'defaultvalue'
}
}
Vue.js (v2) Lifecycle hooks documentation
Example output when executing console.log(this) inside a component:
You can pass the "item.id" like this too:
<button type="button" #click="deleteItem(item.id)">Delete</button>
A simple option will be bind the id to the delete button as well
<button type="button" class="btn btn-danger"
#click.prevent="deleteItem(this)" :data-id=item.id data-dismiss="modal">
Delete
</button>
Hello I hope you can help me with the problem I'm having right now.
I'm trying to execute a code in JS using modals when pressing a button, the thing is, the HTML code who has the button generates itself
Main View page
<tr class="odd">
<td class=" sorting_1">CU</td>
<td class="">Cliente Unico</td><td class="">101</td>
<td class="">
<span id="edit_CU" class="ui-icon ui-icon-pencil" data-toggle="modal" data-target="#modal_edit"></span>
<span id="delete_CU" class="ui-icon ui-icon-trash" data-toggle="modal" data-target="#modal_delete"></span>
</td>
</tr>
In the id="edit_CU" the CU changes when the HTML code is generated, so is not always the same thats also with the id="delete_CU"
When you click in the span icon will trigger the modal and show this:
View page when you click Edit or Delete button
<div id="modal_delete" class="modal fade">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete vertical</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_delete">Yes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="<?php echo base_url('assets/js/helper/func_verticales.js');?>"></script>
In this view page ask the user if they want to delete their information when they click "Yes" it should pop up a message... but it does nothing, someone can give me a hand?
This is the JavaScript
$("#modal_delete").on('show.bs.modal', function(event){
alert("hello");
});
});
if i understand you correctly than you've to delegate the click event
try something like this:
Your button needs some adaption - because i don't see a reason for data-toggle and data-target
<button type="button" class="btn btn-primary">Yes</button>
After that - in your JS Code:
$("button.btn-primary").on("click","#modal_delete",function()
{
alert("hello");
});
Run that alert off your button, not the modal
<button id="modal_delete">Yes</button>
$("#modal_delete").on('click', function(event){
alert("hello");
});
});
or use a confirm box
$('#modal_delete').click(function(ev){
ev.preventDefault();
var r = confirm("Are you sure?");
if (r == true) {
//run delete code here
}
});
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