Develop Reference

How to open modal using dynamically added button? [closed]

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.

How can I dynamically disable popover from a DOM element?

I have almost identical multiple divs on a page. They all have graphs inside I want some of them to have popovers when they are hovered.
I want to decide for each div if the popover is displayable or not. Is there a property that I can include inside options such as "diplay: false" ?
HTML
<div id="{{graph.id}}" data-ng-repeat="graph in graphs" data-placement="top" data-original-title="Parameters"></div>
JS
var options = {
html: true,
placement: 'top',
trigger : 'hover',
content: function() {
return $('#info-chart-' + currentObj.id).html();
}
}
$(currentObj.id).popover(options);

You can add some class to those elements on which you don't want popup like nopop class.
<div id="{{graph.id}}" class="nopop" data-ng-repeat="graph in graphs" data-placement="top" data-original-title="Parameters"></div>
Now change the jquery code.
$(currentObj.id).not(".nopop").popover(options);
You can check here --> JsFiddle

Show/Hide Div element with javascript button click

I have a site using Google Maps Api which adds and saves markers. When a saved marker is clicked, it displays an info window which has a Button in it. When this button is clicked, I want it to display a hidden DIV element which contains a Table of the saved marker details.
The JS which contains the InfoWindow is:
var eventContent = $('<div class="event-info">' + '<h4 class="event-name">' + point.name + '</h4><hr>' +
'<span><h5>Date: </h5>' +
'<p class="event-date">' + point.edate + '</p></span>' +
'<p class="event-description">'+ point.description +'</p>' +
'<button id="remove-event" name="remove-event" onclick="showDetails();" class="remove-event btn btn-danger btn-sm" title="View Event">View Event</button>'+
'</div>');
// Display Event details on marker click
google.maps.event.addListener(event_markers[i], "click", function () {
infowindow.setContent(eventContent[0]);
infowindow.open(map, event_markers[i]);
map.setCenter(marker.getPosition());
map.setZoom(10);
});
The HTML DIV I want to display is:
<div class="event-details" id="event-details" style="display: none ">
<h3>Event Details</h3>
<table class="table">
<tr>
<th>Event Name: </th>
<td> Bill Gates</td>
</tr>
<tr>
<th>Event Date: </th>
<td> Bill Gates</td>
</tr>
</table>
<button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove"></span> Remove Event</button>
</div>
I have tried this, among other similar ideas but no luck.:
function showDetails()
{
if (document.getElementById("event-details").style.display == "none" ) {
document.getElementById("event-details").style.display="";
} else {
document.getElementById("event-details").style.display="none";
}

Your elements do not have an id of "event-details" but a class. Try using getElementsByClassName instead:
document.getElementsByClassName("event-details")[0].style.display = "none"// returns multiple elements so you should select the first (0th) item.
Maybe a better solution would be to add an "id" to your html element:
<div id="event-details" class="event-details" style="display: none ">
This way, your getElementById method should catch the elements you want.

Have you tried giving the div an ID?
maybe why the "getElementById" isn't working.
then:
document.getElementById("eventDetails").style.display="none";

FIXED.
My showDetails function had a syntax error, was missing a closing }
function showDetails()
{
if (document.getElementById("event-details").style.display == "none" ) {
document.getElementById("event-details").style.display="block";
}
else
{
document.getElementById("event-details").style.display="none";
}
}

Please use querySelector as below. Since you already have an id for the element you'd click on, like below:
<button id="remove-event" name="remove-event" class="remove-event btn btn-danger btn-sm" title="View Event">View Event</button>
You may remove the onclick inline event handler and do it the following way.
document.querySelector("#remove-event").addEventListener("click", function() {
var elem = document.querySelector("#event-details");
if (elem.style.display == "none") {
elem.style.display = "block";
} else {
elem.style.display = "none";
}
});

May be try these-
1) Change the div id to other instead of having the class name
2) Here you are checking for 'none', but i think if you are not showing the div anywhere in your code prior calling this code, you can remove the if clause, since that div was already hidden and if clause wouldn't work if its already hidden.
if (document.getElementById("event-details").style.display == "none" ) {
document.getElementById("event-details").style.display="";
}
3) Try to use- instead of
document.getElementById("event-details").style.display="";
to
document.getElementById("event-details").style.display=block;
or
document.getElementById("event-details").show();

Jquery change row in table

My code http://jsfiddle.net/Vds69/ I want to change current row in a table with new value, if I click on the button at the end of the row. Please help me to write action to change row
HTML
<div class="row-fluid">
<div class="btn-group">
<button class="btn btn-primary action-add-visual-feature"> + new visual feature </button>
<button class="btn btn-danger action-remove-visual-features"> Remove all features</button>
</div>
</div>
JQUERY
$('.action-remove-visual-features').on('click', function() {
console.log("action-remove-visual-features");
$('#table-visual-features tbody').html('');
});
$('.action-add-visual-feature').on('click', function() {
console.log("action-add-visual-feature");
$('#table-visual-features tbody').append('<tr><td>x</td><td>Numeric</td><td>Values to be mapped to the x-axis</td><td><button class="action-change">edit</button> <button class="btn btn-mini btn-danger action-remove-visual-feature">remove</button></td></tr>');
});
$('#table-visual-features tbody').on('click', 'tr button.action-remove-visual-feature', function(e) {
console.log("action-remove-visual-feature!!");
console.log("e action = ", e);
$(this).parents('tr').remove();
});

An HTML5 solution could be by appending the following function
$('#table-visual-features tbody').on('click', 'tr button.action-change', function (e) {
if ($(this).hasClass("changing")) {
var $parentRow = $(this).parents('tr').eq(0);
$(this).removeClass("changing");
$parentRow.removeClass("changing");
$(this).text("edit");
/*$('.action-change').parents('tr').eq(0).find('td').attr("contenteditable","false");*/
$parentRow.find('td').attr("contenteditable","false");
} else {
var $parentRow = $(this).parents('tr').eq(0);
$(this).addClass("changing");
$parentRow.addClass("changing");
$(this).text("stop-edit");
$parentRow.find('td').attr("contenteditable", "true");
}
});
CSS
tr.changing td{
border:1px solid green;
}
http://jsfiddle.net/Vds69/8/
Otherwise, you will have to do something like the following,
when editing
1.append to your td input elements
2.input elements should get their value from the text of td elements
finish editing
1.get the values from input elements
2.remove the input elements
3.set the values as text to the td elements.

You can't edit the HTML table manually. It has to done either programmatic or HTML wise.
Here is better approach.
1) Enclose the td with textbox like
<td><input disabled type="text" value="x"/></td>
Similarly apply to all the td s and disable them.
2) Then for edit, add a click functionality like this
$(document).on('click', '.action-change', function () {
$(this).parent().parent().find('input').prop('disabled', false);
});
Just enable the textbox for editing.
Check the working in JSFiddle
Hope you understand.

Hope something like this is what you want mate... Juz gave some static values for the time being..
$('#table-visual-features tbody').on('click','.action-change',function () {
$(this).parent().siblings('td:eq(0)').html('Visual');
$(this).parent().siblings('td:eq(1)').html('Alpahabet');
$(this).parent().siblings('td:eq(2)').html('123');
});
Fiddle
http://jsfiddle.net/tRhHt/

Bootstrap Datepicker is displaying behind popover

I'm trying to display a datepicker in a popover (using bootstrap and bootstrap-datepicker extension) and having some issues,
first I had a problem with displaying the datepicker and found this topic : Datepicker in Popover Won't display
,but now it's displaying behind my popover so it's not fully visible
Here is the HTML code :
<button type="submit" class="btn btn-primary pop_doleance" rel="popover" data-original-title="Ajouter doléance">Ajouter doléance</button>
<div style="display: none" class="pop_doleance_content">
<form class="well form-inline form_doleance">
<label for="date">Date : </label>
<input id="date" type="text" class="input-medium">
</form>
And the Javascript code :
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function (){
tmp.call(this);
if (this.options.callback) {
this.options.callback();
}
}
$(function (){
$(".pop_doleance").popover({
placement:'bottom',
html : true,
content: function(){return $('.pop_doleance_content').html();},
callback: function(){$('#date').datepicker();}
});
});
Any ideas ?

set popup's z-index to a lower value.
.popup { z-index : 900; }
and set datepicker's container z-index to a higher value like in case of jquery ui datepicker set
.ui-datepicker-div { z-index: 999; }

In the css I added:
.datepicker {
z-index: 999 !important;
}
Note the "!important". It did not work without this.