Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am working on Html modal. I took the reference of the following link
jQuery hunterPopup Demo. I am trying to add buttons dynamically using JQuery which will further used to pop up modal. I used following code to add button dynamically.
$("#mainTable").append("<button class='custom-samples-routes' id='popupReturn" + srNumber + "' style='height:30px'" + getRoute + "</button>");
I am having 3 buttons by default on screen and they pop up modal without any problem. The problem arises when I added button dynamically and tried to modal using this new button.
$(document).ready(function (e) {
var popupEvent = function () {
}
$('.custom-samples-routes').hunterPopup({
width: '380px',
height: '270px',
content: $('#tableContent'),
event: popupEvent
});
});
Where #tableContent is the id of the modal. How can I open modal using newly added button?
you can do it something like below.
var popupEvent = function() {
alert("Hello")
}
var config = {
width: '320px',
height: '200px',
title: "jQuery hunterPopup Demo",
content: $('#tableContent'),
event: popupEvent
}
var counter = 1;
$().ready(function(e) {
$('#addnewDynamic').on('click', function() {
debugger
var _btn = $("<input/>", {
type: "button",
value: "Show popup",
id: "btn_" + counter,
class: "btn btn-success"
})
$("#container").append(_btn);
$("#" + "btn_" + counter).hunterPopup(config);
counter++;
});
});
body { background-color:#34BC9D; font-family:'Roboto';}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Bootstrap-style-Popover-Plugin-For-jQuery-hunterPopup/js/jquery-popup.js"></script>
<link href="https://www.jqueryscript.net/demo/Bootstrap-style-Popover-Plugin-For-jQuery-hunterPopup/css/hunterPopup.css" rel="stylesheet"/>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container" id='container'>
<input type="button" id="addnewDynamic" value="Add New Button with Popup" style="margin: 20px 0 0 20px;" class="btn btn-default">
<div id="tableContent" style="display:none">
<div>
<div class="panel panel-default">
<div class="panel-heading">Sub Title</div>
<div class="panel-body form-inline dept1">
<a class="btn btn-default" id="001">Item</a>
<a class="btn btn-default" id="002">Item</a>
<a class="btn btn-default" id="003">Item</a>
<a class="btn btn-default" id="004">Item</a>
</div>
</div>
</div>
</div>
</div>
Attach listener to the document and check if it's element with class custom-samples-routes.
$(document).on('click', '.custom-samples-routes', function() {
console.log('Listening')
});
$("#mainTable").append("<button class='custom-samples-routes'>Dynamic Button</button>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainTable">
<button class="custom-samples-routes">Button 1</button>
</div>
Make sure that you bind the popup after you inject the button in the DOM. Your code should look something like:
$(document).ready(function (e) {
// 1. inject button
$("#mainTable").append("<Button class='custom-samples-routes' style='height:30px'><label class='samples-routes' id='popupReturn" + srNumber + "' style='height:30px'>" + getRoute + "</label></Button>");
// 2. bind popup
var popupEvent = function () {}
$('.custom-samples-routes').hunterPopup({
width: '380px',
height: '270px',
content: $('#tableContent'),
event: popupEvent
});
});
Also, note that you have a couple typos in the code you posted which might also be a cause of error:
There's a extra " at the end of the $("#mainTable").append().
The button you inject has the class "samples-routes" and the label has "custom-samples-routes". It's probably safer to you the button for the event.
Related
I have created a popover so that if I click on the image the popover should appear.
The popover is working. what my main problem is I have inserted buttons in the popover.
so I want to write javascript or jquery code for the button when it is clicked. Can anyone help on this?
I have tried but it's not working!!!!
$(function() {
$('button').click(function() {
var x = $(this).attr('class');
alert(x);
});
});
$(function() {
$("[data-toggle=popover]").popover({
html: true,
container: 'body',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
},
placement: "auto"
});
});
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./isobar.js">
</script>
<span>
<img src="./img/more_options_icon.png" data-toggle="popover" tabindex="5" data-trigger="focus" data-popover-content="#moreoptions">
</span>
<div id="moreoptions" class="hidden">
<div class="popover-body">
<div class="list-group">
<button type="button" class="list-group-item"><span class="gap"></span>Edit</button>
<button type="button" class="list-group-item"><span class="gap"></span>Logic Builder</button>
<button type="button" class="list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
O.k. Here is an updated version of my answer and checked and working code. A secret of a popover is to fire the correspondence function in a right time with a popover firing. So the JS code is:
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
Here I an using html selector
:not(.main)
to prevent binding and unbinding events to the main button. In addition, we have to pay attention on the fact that every popover rising binds a new event handler to each button. This means that after n popover risings every button will fire it's alert n times. To prevent this effect, it is possible to bind events in the first rising only, or as I did, to unbind an event from a button every popover rising. As to html code, here it is:
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
I only added the ".main" button to accept a simulation, and each button got additional corresponding class "class-0", "class-1", "class-2" for successful demonstration. Now, when you push on the main button, other 3 buttons appear. And to the contrary, pushing on any of those 3 buttons, is following by alert firing and disappearing of all of them. I hope this will help you.
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
.hidden {
display: none;
}
button {
float: left;
}
.class-0 {
clear: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
In Bootstrap v4 how do I show alerts through JavaScript? My goal is to have the alert hidden when the page loads then when a AJAX call completes turn the alert on to display a message.
I see in the documentation how close the alert but no where how to display it:
https://getbootstrap.com/docs/4.0/components/alerts/#methods
I have the following fiddle where I show the alert first (not what I want) then press a button to close it. A second button is there to turn it back on but no clue what to pass to it to make it work. I figure if I can make this sample work I can then figure out how to make it work with the alert not displayed on the page load
https://jsfiddle.net/jhf2e5h6/
<div class="row">
<div class="col-sm-12">
<div id="divInfo" class="alert alert-success show fade ">
<div class="alert-heading"> :</div> <p></p>
</div>
</div>
</div>
<button id="close">Close</button>
<button id="show">Show</button>
<script type="text/javascript">
$(function () {
$('#close').on('click', function () {
$('#divInfo').alert('close');
});
$('#Show').on('click', function () {
$('#divInfo').alert('?????');
});
//
});
</script>
Method .alert destroys the DOM. So no possibility to go back. Have a look to documentation :
https://getbootstrap.com/docs/4.0/components/alerts/#methods
You should try to use removeClass/addClass.
$('#close').on('click', function () {
$('#divInfo').removeClass('show');
});
$('#show').on('click', function () {
$('#divInfo').addClass('show');
});
And you have mistake on 'Show', you should try 'show'.
Bootstrap 4 has .d-none, which does display: none. This comes in handy if your alert contains a dismiss button.
So add .d-none to your .alert element (e.g. on page load), and do the following:
// Show the alert
$('.alert').removeClass('d-none').addClass('show');
// Hide the alert
$('.alert').addClass('d-none').removeClass('show');
close removes it from the DOM so it can't be re-shown.
You can instead toggle the invisible class...
https://www.codeply.com/go/mbshAxZQMH
$(function () {
$('#close').on('click', function () {
$('#divInfo').addClass('invisible');
});
$('#show').on('click', function () {
$('#divInfo').removeClass('invisible');
});
});
I prefer to dynamically create alert content
<div id="alert"></div>
<script type="text/javscript">
function showAlert(obj){
var html = '<div class="alert alert-' + obj.class + ' alert-dismissible" role="alert">'+
' <strong>' + obj.message + '</strong>'+
' <button class="close" type="button" data-dismiss="alert" aria-label="Close">'+
' <span aria-hidden="true">×</span>'+
' </button>'
' </div>';
$('#alert').append(html);
}
$('#Show').on('click', function () {
showAlert({message: 'Hello word!', class:"danger"});
});
I am currently developing a simple webpage for a school assignment and I was wondering it is possible to create a button that will add a button, also a button beside it to remove the button?
Basically a button called "Add Button" where if you click on it, a button with the same size(can be named anything appropriate with no functions required). no matter how many times I click it, more buttons will be added e.g. button1, button2, button3 etc. Also, next to "Add Button" button is a button called "Remove Button" where it removes the buttons desendingly e.g. from button3, button2, then button1
How about something like this? Change the increment slightly.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
button{
height:100px;
width: 80px;
text-align: center;
margin: 5px 4px;
}
#mainButtons button{
display: inline-block;
margin: auto;
}
</style>
<div id="mainButtons">
<button onclick="addButton()">Make Button</button>
<button onclick="removeButton()">Remove Button</button>
</div>
</br>
<div id="que"></div>
<script>
var increment = 0;
function addButton(){
$("#que").append($("<button id='btn"+(increment++)+"'>This is Button"+ (increment)+"</button>"));
}
function removeButton(){
$("#btn"+(increment-1)).remove();
increment--;
}
</script>
You can use append() jquery function.
This is example :
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<button type="button" class="btn" id="add_button">add</button>
<button type="button" class="btn" id="delete_button">delete</button>
<div class="result">
</div>
Jquery :
var start = 0;
$(document).on("click","#add_button",function(){
start++;
$(".result").append($('<button id="add_button">Add'+start+'</button>').addClass('button'+start));
});
$(document).on("click","#delete_button",function(){
start--;
$(".result").find('#add_button').each(function(index, el) {
$('.button'+start).remove();
});;
});
Js fiddle : https://jsfiddle.net/p8y672oL/
Must they be numbered? If not you can append the buttons and use jQuery's last() and remove() functions without the need of an increment/decrement variable.
<div class="button-test">
<button type="button" id="add-button">Add Button</button>
<button type="button" id="remove-button">Remove Last Button</button>
<div id="new-buttons"></div>
</div>
<script>
$('#add-button').on('click', function () {
$('#new-buttons').append($('<button>', {
'type': 'button',
'class': 'temp',
'text': 'new button'
}));
});
$('#remove-button').on('click', function () {
$('#new-buttons button.temp').last().remove();
});
</script>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I'm having issues with remove buttons on dynamically generated text boxes. The click function does not get called at all, and I'm not sure why. Can someone please point me in the right direction?
Here is the code:
HTML
<div class="panel panel-default">
<div class="panel-heading">Additional Authors</div>
<div class="panel-body">
<input id="addAuthorButton" type="button" value="Add Author" class="btn btn-lg btn-default btn-block" />
<div id="additionalAuthorsTextboxes">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
JS
$(document).ready(function(){
var counter = 0;
$("#addAuthorButton").click(function () {
if(counter==5){
alert("Only 5 additional authors allowed.");
return false;
}
counter++;
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'additionalAuthor' + counter).attr("class", 'additionalAuthor input-group');
newTextBoxDiv.after().html("<span class='input-group-addon'><span class='glyphicon glyphicon-user'></span></span><input class='form-control' type='text' placeholder='Author Name'><span class='input-group-addon'><span style='color: red;' class='glyphicon glyphicon-remove removeAdditionalAuthor'></span></span>");
newTextBoxDiv.appendTo("#additionalAuthorsTextboxes");
});
$(".removeAdditionalAuthor").click(function () {
$(this).closest('div').remove();
});
});
CSS
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css');
I also have setup a JSFiddle page: https://jsfiddle.net/302xsar2/2/
You need to use event delegation for attaching events to dynamically generated element:
$("#additionalAuthorsTextboxes").on('click','.removeAdditionalAuthor',function () {
$(this).closest('div').remove();
});
I'm usng jBox url : http://stephanwagner.me/jBox .
and creating a modal every time on click of a link. when the modal is created for the first time, listeners for buttons on that created modal are getting added on the "onCreated" attribute. These listeners are getting attached for 1st time properly and working when those buttons are clicked. From the second time, the listeners are not working. its like dummy button with no listeners.
please find the code sample here.
http://jsfiddle.net/sedhuait/4zdavzap/2/
$('#btn').click(function () {
var title = "Create Group";
var createGroup = '<section class="container-fluid"> <div class="form-group col-lg-7"> <button id="btn-create-group" class="btn btn-custom btn-lg btn-block" data-i18n="menubar.group"> ' + title + ' </button> </div> <div class="form-group col-lg-5"><button id="btn-create-group-cancel" class="btn btn-cancel btn-lg btn-block" data-i18n="menubar.group"> Cancel </button> </div> </div> </div> </section>';
var myModal = new jBox('Modal', {
title: title,
content: createGroup,
width: 400,
onCreated: function () {
alert("in on created ");
$('#btn-create-group-cancel').click(function () {
alert("in on cancel ");
myModal.close();
});
$('#btn-create-group').click(function () {
myModal.close();
alert("in on create ");
});
}
});
myModal.open();
});
Use myModal.destroy(); after myModal.close(); and it will work