Bootstrap Popover in JQuery Datatable doesn't work after search - javascript

I have a HTML table:
<table id="PeopleTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Pop</th>
</tr>
</thead>
<tbody>
<tr><td>0</td><td>Michael</td><td><button class='popoverButton'>Popover</button></td></tr>
</tbody></table>
And I want to use the DataTables plug-in to have search, order and filter functionality. I also want to use Bootstrap to show a popover when the button is clicked, so I've tried this:
var peopleTable = $('#PeopleTable').DataTable({
drawCallback: function () {
$('.popoverButton').popover({
"html": true,
trigger: 'manual',
placement: 'left',
"content": function () {
return "<div>Popover content</div>";
}
}).click(function (e) {
$(this).popover('toggle');
e.stopPropagation();
});
}
});
The problem is: when I perform a search, column sorting or any operation with the DataTable, the Popover stops working.
Here is the fiddle if you want to try it.
Is "draw" the correct event to perform this or should I use another one? Am I missing any other thing?

Updated JS fiddle link - https://jsfiddle.net/dxrjm530/4/
You just need to take out your click event of button, because after sorting, it is getting called twice, due to drawcallback method of datatable.
$('#PeopleTable').DataTable({
drawCallback: function () {
$('.popoverButton').popover({
"html": true,
trigger: 'manual',
placement: 'left',
"content": function () {
return "<div>Popover content</div>";
}
})
}
});
$('#AddRow').on('click', function(){
var peopleTable = $('#PeopleTable').DataTable();
peopleTable.row.add(
['1',
"David",
"<button class='popoverButton'>Popover</button>"]
).draw();
});
$('table').on('click', function(e){
if($('.popoverButton').length>1)
$('.popoverButton').popover('hide');
$(e.target).popover('toggle');
});

Possible solution: https://stackoverflow.com/a/72850074/979174
const rows = $("#tbl").dataTable().fnGetNodes();
$(rows).find('[data-toggle="popover"]').popover({ html: true, trigger: 'hover', placement: 'bottom', content: function () { return $(this).data('content') ; } });

Related

How to have the JQuery version of tinyMCE open multiple text areas in popups when clicking on a table cell?

OK, so I'm trying to create a template that will be used for providing information for multiple scenarios in the same format. To do this, I have a table set up that will show the information, and when you click on one of the cells ('s specifically), it will place the inner HTML into a text area that comes up in a jQuery modal dialog box. This text area is then turned into a TinyMCE instance for editing (using Tiny MCE javascript version 4.3.2). However, with my current code, this only works the first time. After that, no matter what cell is clicked, I get a popup that shows as empty, though it has the proper HTML inside when I run inspect element.
I have seen similar things in previous questions, but one of them only wanted to use jQuery to have the popup work, which I've done, and the other was not using the jQuery version, and the solution code did not work with this version, but it seems that it simply closed out the instance when the dialog was closed so that it could be redone on the next text area. Also, I'm using a custom CSS for looks, but the jQuery Start scheme is the closest available scheme, if you want it to look pretty while you troubleshoot.
Edit: To clarify, I am not trying to open multiple runs simultaneously, they should open one at a time.
Code:
<head>
<script src="assetts/jquery-1.10.2.js"></script>
<script src="assetts/jquery-ui.min.js"></script>
<script src="tinymce/js/tinymce/jquery.tinymce.min.js"></script>
<script src="tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('td').click(function (event) {
var currentId = this.id;
var currentHTML = this.innerHTML;
alert(currentId);
$(function () {
$("<div id=\"editmodal-diag\"></div>").dialog({
title: 'Edit',
modal: true,
buttons: {
Ok: function () {
var t = "#" + currentId;
alert(t);
$(this).dialog("close"); $("#editmodal-diag").remove();
tinymce.execCommand('mceRemoveControl', true, '#editmodal-diag-text');
},
Cancel: function () {
$(this).dialog("close"); $("#editmodal-diag").remove();
tinymce.execCommand('mceRemoveControl', true, '#editmodal-diag-text');
}
}
});
})
$('#editmodal-diag').append("<textarea id=\"editmodal-diag-text\">" + currentHTML + "</textarea>");
$('#editmodal-diag-text').empty;
$('#editmodal-diag-text').tinymce({ plugins: 'link' });
});
</script>
</head>
<body>
<table width="75%>
<tr>
<th>Header text</th>
</tr>
<tr>
<td>Information panel 1</td>
<td>Information panel 2</td>
</tr>
</table>
</body>
Thanks in advance.
After more digging, I found TinyMCE 4 - remove() or destroy(), in which I found that the tinymce control needed to be removed with:
tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
tinymce.remove();
to completely remove the current editor, before being reinitialized by:
tinymce.execCommand('mceAddControl', true, 'editmodal-diag-text');
$('#editmodal-diag-text').tinymce({ plugins: 'link'});
This only needed to be done after the first box came up. I used a Boolean variable to check this. Complete function:
var tinyRun = false;
$(window).load(function () {
setTimeout(function () {
$('td').click(function (event) {
var currentId = this.id;
var currentHTML = this.innerHTML;
alert(currentId);
$(function () {
$("<div id=\"editmodal-diag\"><textarea id=\"editmodal-diag-text\"></textarea></div>").dialog({
title: 'Edit',
modal: true,
buttons: {
Ok: function () {
var t = "#" + currentId;
alert(t);
$(this).dialog("close"); $("#editmodal-diag").remove();
tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
tinymce.remove();
},
Cancel: function () {
$(this).dialog("close"); $("#editmodal-diag").remove();
tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
tinymce.remove();
}
}
});
})
setTimeout(function () {
$('#editmodal-diag-text').text(currentHTML);
if (!tinyRun) {
$('#editmodal-diag-text').tinymce({ plugins: 'link' });
tinyRun = true;
}
else {
tinymce.execCommand('mceAddControl', true, 'editmodal-diag-text');
$('#editmodal-diag-text').tinymce({ plugins: 'link' });
}
}, 250);
});
}, 250);
}

jQuery ("#dialog").dialog('close') not working with button on separate view

I have an ASP.NET view in an MVC project in which I am trying to create a pop-up dialog to create data. There is another view that gets loaded and that view has a button with the id "btncancel_create". I cannot get that button to close the dialog. I am using jQuery 2.1.3 and jQuery UI 1.11.4.
Here is the code for the button:
<input type="button" value="Cancel" id="btncancel_create" />
And here is the view:
$(document).ready(function () {
//alert("Document is ready");
var url = "";
$("#dialog-create").dialog({
title: 'Create User',
autoOpen: false,
resizable: false,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load(url);
}
});
$("#lnkCreate").on("click", function (e) {
url = $(this).attr('href');
$("#dialog-create").dialog('open');
return false;
});
//$("#btncancel_create").on("click", function (e) {
// $("#dialog-create").dialog("close");
// return false;
//});
$("#dialog-create").button("#btncancel_create").click(function (e) {
alert("btncancel_create was clicked");
$("#dialog-create").dialog('close');
return false;
});
});
<div id="dialog-create" style="display: none"></div>
<p>#Html.ActionLink("Create New", "Create", null, new { id = "lnkCreate" })</p>
As you can see, I tried something else which didn't work, which is commented out. The uncommented button click function does return the alert, but does not close the dialog. Thanks in advance for your help, and please let me know if you need any more information.
Instead of
$("#btncancel_create").on("click", function (e) {...
(in my commented out code above)
it should be
$(document).on("click", "#btncancel_create", function (e) {....
I found the answer here: Turning live() into on() in jQuery.

Jquery Ui modal open doubleclick on row

I am trying to open Jquery ui modal with doubleclicking on tables row.
For now I open modal with a button:
$('button.adminModal').on("click", function (event) { loadDialog(this, event, '#adminPanel'); });
Function loadDialog opens modal with given href.
How can I open modal by doubleclicking on tables row?
I have tried using event ondblclick in tag, but it did not worked.
LoadDialog function:
function loadDialog(tag, event, target) {
event.preventDefault();
var $loading = $('');
var $url = $(tag).attr('href');
var $title = $(tag).attr('title');
var $dialog = $('<div></div>');
$dialog.empty();
$dialog
.append($loading)
.load($url)
.dialog({
autoOpen: false
, title: $title
, width: 500
, modal: true
, minHeight: 200
, show: 'fade'
});
};
This code seems to work fine (see jsfiddle http://jsfiddle.net/darevskaya/NEbJV/):
$( "tr" ).on("dblclick", function(event) { loadDialog(this, event, '#adminPanel'); });
However if rows are added dynamically after the event was added it won't work.
in this case, event delegation could help:
$( "table" ).on("dblclick", "tr", function(event) { loadDialog(this, event, '#adminPanel'); });
check this
<tbody>
<tr class='clickableRow' >
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</tbody>
jQuery(document).ready(function($) {
$( ".clickableRow" ).dblclick(function(event) {
loadDialog(this, event, '#adminPanel');
});
});
OR
$('#thetable').find('tr').dblclick( function(){
});

JQuery OnHover working unexpectedly

Goal: Highlight a table row that's apart of tbody on Hover.
Problem: Hover gets 'buggy' when an other than a simple input[type=text] is in the td that the mouse enters. Ex. When my mouse crosses into the tr at the location of a td that contains a input[type=datetime-local] the mouseenter event does not fire. Same goes for input[type=date], select, input[type=checkbox], etc.
Code:
<table class="myClass">
<thead data-bind="template: { name: 'SummaryTableHeaderTemplate'}">
</thead>
<tbody data-bind="template: { name: 'SummaryTableBodyTemplate', foreach: $data }">
</tbody>
</table>
function OnHoverIn() {
$(this).addClass("hover");
}
function OnHoverOut() {
$(this).removeClass("hover");
}
$("table.myClass").on("mouseenter", "tr", OnHoverIn);
$("table.myClass").on("mouseleave", "tr", OnHoverOut);
$("table.myClass").on("mouseover", "tr", OnHoverIn);
What I've tried:
I've tried many variations of this, $("tbody tr").hover(....my two functions above...); and I've tried without the "mouseover" event as well. They all behave the same.
Question: How do I get onHoverIn/Out to activate regardless of what is in the tr/td?
check this: fiddle
$(document).ready(function () {
function OnHoverIn() {
$(this).children().addClass("hover");
};
function OnHoverOut() {
$(this).children().removeClass("hover");
};
$(document).on("mouseenter", "tbody tr", OnHoverIn);
$(document).on("mouseleave", "tbody tr", OnHoverOut);
});
Here you go:
$(document).ready(function () {
$("tr").hover(
function() { // Hover in
$(this).addClass("hoverClass");
}, function() { // Hover out
$(this).removeClass("hoverClass");
}
);
});
http://jsfiddle.net/9esmZ/27/

Passing data to a jQuery UI Dialog

I'm developing an ASP.Net MVC site and on it I list some bookings from a database query in a table with an ActionLink to cancel the booking on a specific row with a certain BookingId like this:
My bookings
<table cellspacing="3">
<thead>
<tr style="font-weight: bold;">
<td>Date</td>
<td>Time</td>
<td>Seats</td>
<td></td>
<td></td>
</tr>
</thead>
<tr>
<td style="width: 120px;">2008-12-27</td>
<td style="width: 120px;">13:00 - 14:00</td>
<td style="width: 100px;">2</td>
<td style="width: 60px;">cancel</td>
<td style="width: 80px;">change</td>
</tr>
<tr>
<td style="width: 120px;">2008-12-27</td>
<td style="width: 120px;">15:00 - 16:00</td>
<td style="width: 100px;">3</td>
<td style="width: 60px;">cancel</td>
<td style="width: 80px;">change</td>
</tr>
</table>
What would be nice is if I could use the jQuery Dialog to popup a message asking if the user is sure he wants to cancel the booking. I have been trying get this to work but I keep getting stuck on how to create a jQuery function that accepts parameters so that I can replace the
cancel
with
cancel.
The ShowDialog function would then open the dialog and also pass the paramter 10 to the dialog so that if the user clicks yes then It will post the href: /Booking.aspx/Change/10
I have created the jQuery Dialog in a script like this:
$(function() {
$("#dialog").dialog({
autoOpen: false,
buttons: {
"Yes": function() {
alert("a Post to :/Booking.aspx/Cancel/10 would be so nice here instead of the alert");},
"No": function() {$(this).dialog("close");}
},
modal: true,
overlay: {
opacity: 0.5,
background: "black"
}
});
});
and the dialog itself:
<div id="dialog" title="Cancel booking">Are you sure you want to cancel your booking?</div>
So finally to my question: How can I accomplish this? or is there a better way of doing it?
jQuery provides a method which store data for you, no need to use a dummy attribute or to find workaround to your problem.
Bind the click event:
$('a[href*=/Booking.aspx/Change]').bind('click', function(e) {
e.preventDefault();
$("#dialog-confirm")
.data('link', this) // The important part .data() method
.dialog('open');
});
And your dialog:
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height:200,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
'Delete': function() {
$(this).dialog('close');
var path = $(this).data('link').href; // Get the stored result
$(location).attr('href', path);
}
}
});
You could do it like this:
mark the <a> with a class, say "cancel"
set up the dialog by acting on all elements with class="cancel":
$('a.cancel').click(function() {
var a = this;
$('#myDialog').dialog({
buttons: {
"Yes": function() {
window.location = a.href;
}
}
});
return false;
});
(plus your other options)
The key points here are:
make it as unobtrusive as possible
if all you need is the URL, you already have it in the href.
However, I recommend that you make this a POST instead of a GET, since a cancel action has side effects and thus doesn't comply with GET semantics...
In terms of what you are doing with jQuery, my understanding is that you can chain functions like you have and the inner ones have access to variables from the outer ones. So is your ShowDialog(x) function contains these other functions, you can re-use the x variable within them and it will be taken as a reference to the parameter from the outer function.
I agree with mausch, you should really look at using POST for these actions, which will add a <form> tag around each element, but make the chances of an automated script or tool triggering the Cancel event much less likely. The Change action can remain as is because it (presumably just opens an edit form).
I have now tried your suggestions and found that it kinda works,
The dialog div is alsways written out in plaintext
With the $.post version it actually works in terms that the controller gets called and actually cancels the booking, but the dialog stays open and page doesn't refresh.
With the get version window.location = h.ref works great.
Se my "new" script below:
$('a.cancel').click(function() {
var a = this;
$("#dialog").dialog({
autoOpen: false,
buttons: {
"Ja": function() {
$.post(a.href);
},
"Nej": function() { $(this).dialog("close"); }
},
modal: true,
overlay: {
opacity: 0.5,
background: "black"
}
});
$("#dialog").dialog('open');
return false;
});
});
Any clues?
oh and my Action link now looks like this:
<%= Html.ActionLink("Cancel", "Cancel", new { id = v.BookingId }, new { #class = "cancel" })%>
Looking at your code what you need to do is add the functionality to close the window and update the page. In your "Yes" function you should write:
buttons: {
"Ja": function() {
$.post(a.href);
$(a). // code to remove the table row
$("#dialog").dialog("close");
},
"Nej": function() { $(this).dialog("close"); }
},
The code to remove the table row isn't fun to write so I'll let you deal with the nitty gritty details, but basically, you need to tell the dialog what to do after you post it. It may be a smart dialog but it needs some kind of direction.
After SEVERAL HOURS of try/catch I finally came with this working example, its working on AJAX POST with new rows appends to the TABLE on the fly (that was my real problem):
Tha magic came with link this:
remove
remove
remove
This is the final working with AJAX POST and Jquery Dialog:
<script type= "text/javascript">/*<![CDATA[*/
var $k = jQuery.noConflict(); //this is for NO-CONFLICT with scriptaculous
function removecompany(link){
companyid = link.id.replace('remove_', '');
$k("#removedialog").dialog({
bgiframe: true,
resizable: false,
height:140,
autoOpen:false,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Are you sure ?': function() {
$k(this).dialog('close');
alert(companyid);
$k.ajax({
type: "post",
url: "../ra/removecompany.php",
dataType: "json",
data: {
'companyid' : companyid
},
success: function(data) {
//alert(data);
if(data.success)
{
//alert('success');
$k('#companynew'+companyid).remove();
}
}
}); // End ajax method
},
Cancel: function() {
$k(this).dialog('close');
}
}
});
$k("#removedialog").dialog('open');
//return false;
}
/*]]>*/</script>
<div id="removedialog" title="Remove a Company?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
This company will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
This work for me:
SPOSTA
function sposta(id) {
$("#sposta").data("id",id).dialog({
autoOpen: true,
modal: true,
buttons: { "Sposta": function () { alert($(this).data('id')); } }
});
}
When you click on "Sposta" in dialog alert display 100
Ok the first issue with the div tag was easy enough:
I just added a style="display:none;" to it and then before showing the dialog I added this in my dialog script:
$("#dialog").css("display", "inherit");
But for the post version I'm still out of luck.
Just give you some idea may help you, if you want fully control dialog, you can try to avoid use of default button options, and add buttons by yourself in your #dialog div. You also can put data into some dummy attribute of link, like Click. call attr("data") when you need it.
A solution inspired by Boris Guery that I employed looks like this:
The link:
<a href="#" class = "remove {id:15} " id = "mylink1" >This is my clickable link</a>
bind an action to it:
$('.remove').live({
click:function(){
var data = $('#'+this.id).metadata();
var id = data.id;
var name = data.name;
$('#dialog-delete')
.data('id', id)
.dialog('open');
return false;
}
});
And then to access the id field (in this case with value of 15:
$('#dialog-delete').dialog({
autoOpen: false,
position:'top',
width: 345,
resizable: false,
draggable: false,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
'Confirm delete': function() {
var id = $(this).data('id');
$.ajax({
url:"http://example.com/system_admin/admin/delete/"+id,
type:'POST',
dataType: "json",
data:{is_ajax:1},
success:function(msg){
}
})
}
}
});
i hope this helps
$("#dialog-yesno").dialog({
autoOpen: false,
resizable: false,
closeOnEscape: false,
height:180,
width:350,
modal: true,
show: "blind",
open: function() {
$(document).unbind('keydown.dialog-overlay');
},
buttons: {
"Delete": function() {
$(this).dialog("close");
var dir = $(this).data('link').href;
var arr=dir.split("-");
delete(arr[1]);
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
Delete

Categories

Resources