How to add and remove a table from jquery dialog - javascript

I would like to add and later to remove a table with all rows from jquery dialog. I would also like to add some css style to this table/rows.
The table should go into empty div id=dialog-message1.
Could someone help me with this, please?
function script part is attached bellow:
$("#dialog-message1").hide();
$('.confirmation1').on('click', function(e) {
e.preventDefault();
var lnk = $(this).attr('href');
var product_name = $(this).parents("tr").find("td").first().html();
console.log(product_name);
$("#dialog-message1").append("<table id='tableINFO'>");
$("#dialog-message1").append("<tr><th>Nazwa produktu</th><th>Waga (g)</th><th>Kalorie (Kcal)</th></tr>");
$("#dialog-message1").append("<tr><td>Table data</td><td>Table data</td><td>Table data</td></tr>");
$("#dialog-message1").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
//$( "tr" ).remove();
}
}
});
});
I have tried adding rows and cols, and removing it, but since there was no id provided I could only remove tables from the entire page.
I can see rows, but I cannot remove it.

https://jsfiddle.net/asimshahiddIT/3vdup6jr/
$("#dialog-message1").hide();
$('.confirmation1').on('click', function(e) {
e.preventDefault();
var lnk = $(this).attr('href');
var product_name = $(this).parents("tr").find("td").first().html();
console.log(product_name);
$("#dialog-message1").append("<table id='tableINFO'><tr><th>Nazwa produktu</th><th>Waga (g)</th><th>Kalorie (Kcal)</th></tr><tr><td>Table data</td><td>Table data</td><td>Table data</td></tr>");
$("#dialog-message1").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
$( "#dialog-message1 table" ).remove();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dialog-message1">
</div>
<button class="confirmation1">
CLICK
</button>

The table is binded to the dialog, you can try removing its children.
$("#dialog-message1").hide();
$('.confirmation1').on('click', function(e) {
e.preventDefault();
var lnk = $(this).attr('href');
var product_name = $(this).parents("tr").find("td").first().html();
// console.log(product_name);
$("#dialog-message1").append("<table id='tableINFO'>");
$("#dialog-message1").append("<tr><th>Nazwa produktu</th><th>Waga (g)</th><th>Kalorie (Kcal)</th></tr>");
$("#dialog-message1").append("<tr><td>Table data</td><td>Table data</td><td>Table data</td></tr>");
$("#dialog-message1").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
$("#dialog-message1").children().remove();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button class="confirmation1">Confirm</button>
<div id="dialog-message1"></div>

Related

HTML Dynamic Popup box

In my jsp I have a for each loop (spring mvc)
<c:forEach items="${ce}" var="contractEntitlement">
<c:if test="${contractHeader.id == contractEntitlement.chId}" >
<tr>
TD's to show each fields ....
<td>
<div class="center">
Confirm Dialog
</div>
<div id="dialog-confirm" class="hide">
<div class="alert alert-info bigger-110">
These items will be permanently deleted and cannot be recovered.
</div>
<div class="space-6"></div>
<p class="bigger-110 bolder center grey">
Are you sure?
</p>
</div><!-- #dialog-confirm -->
</td>
</tr>
</c:if>
</c:forEach>
Each record will have a button for deletion. My jquery is:
$( "#id-btn-dialog2" ).on('click', function(e) {
e.preventDefault();
var href = ($(this).attr('href'));
alert(href);
$( "#dialog-confirm" ).removeClass('hide').dialog({
resizable: false,
width: '320',
modal: true,
buttons: [
{
"class" : "btn btn-danger btn-minier",
click: function() {
$( this ).dialog( "close" );
window.location = href;
}
}
,
{
"class" : "btn btn-minier",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
This works only for the 1st record but when I click the rest it just redirects to page w/o passing jquery. I tried changing based on this stackoverflow question:
Passing data to a jQuery UI Dialog
$( 'a[href*="/view/viewcontract/update/ce/${contractEntitlement.id}"]' ).on('click', function(e) {
But with this, even the 1st record does not pass in the jquery anymore. Any idea how to make my jquery more dynamic?
As mentioned, need unique id's in order for this to work. On jquery when DOM is ready:
var i=0;
$('.testing').each(function(){ // testing is the class name
i++;
var newID='id-btn-dialog2'+i; // increment the id +1 (unique)
$(this).attr('id',newID); // Assign the new id
$(this).val(i);
});
Now that we have unique id's. Need to get the id of the button clicked and popup message box. In jquery :
$('a.testing').on('click', function(e) {
var id = $(this).attr('id');
var href = $(this).attr('href');
alert(href);
e.preventDefault();
$( "#dialog-confirm" ).removeClass('hide').dialog({
resizable: false,
width: '320',
modal: true,
buttons: [
{
"class" : "btn btn-danger btn-minier",
click: function() {
$( this ).dialog( "close" );
window.location = href;
}
}
,
{
"class" : "btn btn-minier",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
This one worked and able to fix my issue. jsp above is the same except:
Confirm Dialog
adding in class "testing".

dataTable - can't select all check boxes and make them checked

So I cannot get all of the checked boxes without an error. I am using dataTable but it seems to be erroring out.
Here is my code:
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable({
"dom": '<"top"fl>rt<"bottom"pi><"clear">'
/*'<"top"lf>rt<"bottom"p><"clear">'*/
});
});
function selectAllUsers() {
$(':checkbox').each(function () {
this.checked = true;
});
var table = $('#myTable').dataTable({
});
var allPages = table.fnGetNodes();
$('input[type="checkbox"]', allPages).prop('checked', true);
}
</script>
The code above will select all boxes but then I get a second error message with the dataTable.
but if I do:
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable({
"dom": '<"top"fl>rt<"bottom"pi><"clear">'
/*'<"top"lf>rt<"bottom"p><"clear">'*/
});
});
function selectAllUsers() {
$(':checkbox').each(function () {
this.checked = true;
});
var table = $('#myTable').dataTable({
});
}
</script>
Then I only get the first page checked. Any help would be greatly appreciated.
Solution: https://datatables.net/plug-ins/api/fnGetHiddenNodes
That will show you how to get non-rendered checkboxes.

Bind a click event to a dynamically created Dialog in jQuery

Original fiddle example
Failed example for dynamically created dialog
I got this script to load AJAX content into a jQuery UI dialog whose class is named .open_dia in the fiddle examples. The problem is that I have the .open_dia dynamically loaded into the page in a (window).bind(“load”, function(){} event , so I want to know how to change this line from
var $link = $(this).one('click', function(){....
to something to the effect of
var $link = $('.area').one('click','.open_dia', function() {
so that I can bind the event to the dynamically created element .open_dia to open the dialog. Any help would be appreciated.
Here's the original code:
$(document).ready(function() {
var $loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
$('.open_dia').each(function() {
var $dialog = $('<div></div>')
.append($loading.clone());
var $link = $(this).one('click', function() {
$dialog
.load($link.attr('href') + ' #content')
.dialog({
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
});
Failed Code:
$(document).ready(function(){
$('button').one('click',function(){
$(this).next('.area').append('<a class="open_dia" title="this title" href="http://jsfiddle.net/">Click</a>');
});
var $loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
$('.open_dia').each(function() {
var $dialog = $('<div></div>')
.append($loading.clone());
var $link = $('.area').one('click','.open_dia', function() {
$dialog
.load($link.attr('href') + ' #content')
.dialog({
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
});
Example HTML:
<button>Append open_dia</button>
<div class='area'></div>
Hi I have forked your solution and made modification to your javasript as follows:
var loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
$(document).ready(function () {
$('button').click(function () {
$(this).next('.area').append('<a class="open_dia" title="this title" href="#">Click</a>');
});
$(document).on('click', '.open_dia', function (evt) {
var dialog = $('<div></div>').append(loading.clone());
dialog.load($(this).attr('href') + ' #content').dialog({
title : $(this).attr('title'),
width : 500,
height : 300
});
dialog.dialog('open');
return false;
});
});
My modified JS fiddle is here: http://jsfiddle.net/91nc1k1t/2/
If you want to load each dialog's content only once, see this update of the forked fiddle: http://jsfiddle.net/91nc1k1t/5/
You can use this:
<button>Append open_dia</button>
<div class='area'><a style="display: none;" class="open_dia"></a></div>
There is no problem if the target DOM element is dynamically generated. For it to work, please ensure that the event handler is registered on container element (parent of the dynamically created element)'s click event. This will fix the issue !

How can we change the HTML table contents dynamically using javascript through modal-dialog?

How can I change the tablecell value dynamically through using of jquery modal-dialog. I created the table using javascript. Here I added the code which will display the table cell value through dialog. In this code it will show the table cell value in text box, that I can change it but I can't save it.
$(function () {
$(function(){
$("#inttbl td").click(function(){
var selectValue;
selectValue = $(this).html();
$("#select_cell_display_div").html("Edit The Value<br><br><input type='text' id='namefield' value='"+selectValue+"'>");
$( "#dialog-modal" ).dialog
({
height: 240,
modal: true,
buttons: {
"Save": function(){
console.log('save clicked');
var select= document.getElementById('namefield').value
alert(select);
}
}
});
});
});
Html code is:
<div id="dialog-modal" title="Selected Value">
<span id="select_cell_display_div"></span>
</div>`
One way is to cache your initial DOM lookup of the cell that was clicked so you can set the cell value:
$(function () {
$("#inttbl td").click(function (e) {
var cell = $(this), // cache lookup
selectValue = cell.html();
$("#select_cell_display_div").html("Edit The Value<br><br><input type='text' id='namefield' value='" + selectValue + "'>");
$("#dialog-modal").dialog({
height: 240,
modal: true,
buttons: {
"Save": function () {
console.log('save clicked');
var select = document.getElementById('namefield').value
alert(select);
cell.html(select); // use cached lookup to set the cell value
}
}
});
});
});

javascript/jQuery: how to use var from click event in jQuery dialog?

Using jQuery dialog to open a modal box to confirm e.g. to delete a specific user from friends. I would like to use the friends name in the modal box (currently I print it with php in the name-tag of the link and use jQuery to get it from there).
//create the html for the modal box
var dialog_html_ignore = $('<div id="dialog-confirm" title="Ignore Friend Request?"><p>Some text... ignore [put the name here], ...?</p></div>')
//set up the jQuery dialog
var dialog_ignore=$( dialog_html_ignore ).dialog({
autoOpen:false,
resizable: false,
modal: true,
buttons: {
"No": function() {
$( this ).dialog( "close" );
},
"Yes": function() {
window.location.href = targetUrl;
}
}
});
//open the dialog on click event
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
alert(fName); /* this gives me the right username */
dialog_ignore.dialog('open');
return false;
});
How/what is the best way to use the username variable actually as a part of the text (in the html of the modal box)??
Any help is highly appreciated, thank you in advance!! :)
Try this:
var dialog_html_ignore = $('<div id="dialog-confirm" title="Ignore Friend Request?"><p>Some text... ignore <span class="name"></span>, ...?</p></div>')
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
$(".name", dialog_html_ignore).text(fName);
dialog_ignore.dialog('open');
return false;
});
Example fiddle
Use the following code in your click event,
dialog_html_ignore.attr("name", fname);
In dialog box you can access like this
dialog_html_ignore.attr("name");
I would write the dialog HTML as actual HTML in the page, not as a string to be parsed by $. Then, I would select it by ID and dialog-ify it so it is hidden at once.
I'd also include an empty <span id='ignore-dialog-fname'></span> in the dialog HTML and then select by ID to set its textContent/innerText to fname.
<script>
$(function() {
//set up the jQuery dialog
var dialog_ignore=$("#dialog-confirm").dialog({
autoOpen:false,
resizable: false,
modal: true,
buttons: {
"No": function() {
$( this ).dialog( "close" );
},
"Yes": function() {
window.location.href = targetUrl;
}
}
});
//open the dialog on click event
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
$("#ignore-dialog-fname").text(fName);
dialog_ignore.dialog('open');
return false;
});
});
</script>
<div id="dialog-confirm" title="Ignore Friend Request?">
<p>Some text... ignore <span id='ignore-dialog-fname'></span>, ...?</p>
</div>

Categories

Resources