I generate my datatable in an .ashx file:
(...)
//E.g. This is how I generate an icon which I put into one of the table cells
comment = "<i class=\"fa fa-info\" id=\"popoverData\"aria-hidden=\"true\" data-placement=\"bottom\" data-original-title=\"Comments\" data-content=\"" + comments_text + "\"></i>";
(...)
var data = JsonConvert.SerializeObject(data);
var columns = JsonConvert.SerializeObject(columns);
context.Response.Write("{\"data\":" + data + ",\"columns\":" + columns + "}");
The goal is to show a bootstrap popover upon hover on the above icon. My JavaScript:
$(document).ready(function (){
//this part should generate the bootstrap popover, but it's NOT
$('#MyDataTable').on('mouseover', '#popoverData', function () {
$('#popoverData').popover();
//console log gets activated
console.log("I am in the function");
});
getData();
});
function getData() {
$('#MyDataTableDiv').html('<table id="MyDataTable" class="display" cellspacing="0" width="100%"></table>');
$.ajax({
"url": myUrl/getData.ashx',
"success": function (json) {
json.columnDefs = [
{ targets: '_all', defaultContent: "" },
{ targets: '_all', className: 'dt-body-left' }
];
json.dom = 'Bfrtip';
json.buttons = ['print', 'csv', 'copy'];
$('#MyDataTable').dataTable(json);
},
"dataType": "json"
});
}
The javascript mouseover event gets triggered, but the popover is not working. I've tried this too:
$(document).ready(function (){
$('#popoverData').popover();
getData();
});
But in this case the popover shows up ONLY if the #popoverData element is outside the datatable.
How do I show popover upon hover on the icon?
Please modify your code.
$('#MyDataTable').on('mouseover', '#popoverData', function () {
$(this).popover('show');
});
if this not worked then try
$(document).on('mouseover', '#popoverData', function () {
$(this).popover('show');
});
Related
i've a problem with my datatable...
The problem is: I can't change the page after inizialization....
The workflow that i desire is:
A user select a radiobutton in page 3
i save the id of this radio and the curent page
i destroy datatable
when user re-enter in datatable (re-creating datatable) I wish that user would go directly to the page 2
This is my code:
$('.js_select').click(function (e) {
var oTable = $("#id").DataTable({
......
});
$(document).on("keypress", function (e) {
oTable.fnPageChange(2);
});
});
P.S. 2 is an example to test function :)
But i get this error in consolle:
Uncaught TypeError: oTable.fnPageChange is not a function
What can i do?
Thanks
Use stateSave, it will do exactly what you need atomatically :
var oTable = $("#id").DataTable({
stateSave : true,
...
});
Now each time the table is instantiated it will restore the settings from last session, i.e pagination, sorting, search-phrase ...
Could you try this ?
$(document).ready(function() {
var currentPaging = 1;
$('#example').DataTable( {
responsive: true
} );
var oTable = $('#example').dataTable();
$(document).on("keypress", function (e) {
oTable.fnPageChange(2);
});
$('#example').on( 'page.dt', function () {
var info = $('#example').DataTable().page.info();
var page = info.page + 1;
alert('Current paging : '+page);
currentPaging = info.page + 1;
});
$('#memorizePaging').on("click", function (e) {
alert("I'm on the page : "+currentPaging);
});
} );
I did a fiddle to show you fnPageChange works : https://jsfiddle.net/z4zgp9az/5/
It seems the "DataTable" should begins from small character "dataTable"
It should helps:
$('.js_select').click(function (e) {
var oTable = $("#id").DataTable({
......
change to:
$('.js_select').click(function (e) {
var oTable = $("#id").dataTable({
......
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);
}
I am having a rather strange issue with jQuery/Javascript. (This happens in IE, FF and Chrome)
I have a (asp.net) webpage as follows:
Header with lots of buttons (generated at PreRender)
Hidden div with buttons doing postbacks (generated OnLoad) & a div to use as a dialog
Page with an iFrame
Lets say I have a Button with '1234_stuff' as its CLIENTID in the Hidden div.
I have a button in the Header that has a OnClientClick = "$('#1234_stuff').click();return false;";
When I click the button that is in the header this works perfectly. Good.
I have an other button in the header (lets call it PopupStarter) that has a OnClientClick = "Popup('Titel', 'Description', '1234_stuff');return false;";
The javascript Popup function is as follows:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
$('#' + buttonid).click();
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
When I click the 'PopupStarter' button the jQuery dialog shows as expected, no trouble there. However... when I click the ClickMe button nothing happens (besides closing the dialog).
I would think I did something wrong: so I tried it with a timer:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
setTimeout(""$('#"" + buttonid + ""').click();"", 100);
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
This works!! Now that is odd. So I called the parent jQuery
parent.$('#' + buttonid).click();
This also does not work.
And to top it all off, when I enter each of the lines manually in the console of the browser they all work!
Try using this:
$(document).on('click', '#' + buttonid, function(){
Your functions here;
});
Any items that do not exist on page load, will need to have the event listeners applied to the document, the body, or any parent selector that existed in the DOM on page load. Javascript does not attach listeners to objects that are not present when the DOM is loaded. Hope this helps!
I have an script that uses datatables and keytables scripts, and when user clicks in a button I launch a jQuery UI dialog to confirm delete one row of the table. The row is deleted correctly of the database by AJAX and fadeOut of the table, but I don't know why the row is not removed from the DOM. Here is dialog code:
$('#delConfDialog').dialog({
autoOpen : false,
modal : true,
beforeClose : function(event, ui) {
setTimeout(function() {
keys = new KeyTable({
"table" : document.getElementById('records'),
"datatable" : dataTable,
"focus" : tableFocus
});
keys.fnSetPosition(currentPosition[0], currentPosition[1]);
addTableEvents();
}, 50);
},
buttons : {
'Cancelar' : function() {
$(this).dialog('close');
},
'OK' : function() {
$('#ajaxLoadAni').fadeIn('fast');
$(this).dialog('close');
eliminar = elementoEliminar;
delHref = eliminar.attr('delete');
currentPosition[1] = currentPosition[1] + 1;
$.ajax({
url : delHref,
success : function(response) {
$('#ajaxLoadAni').fadeOut('fast');
eliminar.fadeOut("fast", function() {
eliminar.remove();
});
}
});
}
}
});
The problem could be the use of a global variable
try
var eliminar = elementoEliminar;
eliminar.fadeOut("fast", function () {
eliminar.remove();
});
So, i want to show a pop up when deleting a row from my table, so this is my action link :
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
#Html.ActionLink("Delete", "Delete", new { id=item.cin },new { #class = "delete-logo" ,#pkNo=item.cin})
<div id="confirmDialog" title="Warning"></div>
my script :
<script type="text/javascript">
$(document).ready(function () {
buttonizeALL();
setLinks();
});
function buttonizeALL()
{
$(".delete-logo").button();
}
function setLinks()
{
//delete person
$(document).ready(function () {
$(".delete-logo").live("click", function (e) {
e.preventDefault();
var pkNo = $(this).attr("pkNo");
$("#confirmDialog").dialog({
resizable: false,
height: 200,
width: 300,
modal: true,
buttons: {
"Yes": function () {
$(this).dialog("close");
var rowNo = '#row-' + pkNo;
var url = '/Subscribers/Delete/' + pkNo;
$.ajax({
type: "Delete",
url: url,
data: {},
cache: false,
dataType: "json",
success: function () {
$(rowNo).animate({ opacity: 0.0 }, 400, function () {
$(rowNo).remove();
});
},
error: function (jqXHR, exception) {
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
}, // end of yes button
"No": function () {
$(this).dialog("close");
}
} //end buttons
}); //end modal
}); //end delete
});
} //end setLinks
my problem is the pop up doesn't work, and when i used my script without the pop up it works, so please if some one have any idea i will be very appreciated.
Here is your example tidied up a little in a jsFiddle i.e. I've moved the setLinks() code into the document.ready() function.
$(document).ready(function () {
buttonizeALL();
setLinks(); // removed this
});
Also I've replaced the ActionLink with the anchor tag it will render.
This is using Jquery 1.8.3 and jQuery UI 1.9.2. The pop-up seams to work fine.
first off, don't use "live" command anymore. Thats been deprecated in lieu of the "on" command. Also there is no need to use the $(document).ready within the setLinks function. Since its a standalone function (not self executing) its only put into memory until its called when you call it in the doc.ready function.