We Keep Coding

How to copy html code with a javascript code

Unsing clipboard, I try to copy a html text, but the copy is correct without the html code.
I have 2 button, one for the plain text, one for the html code (copy image link)
Do you have any idea where is the problem ?
Html code
<div id="Area-output" class="text-bg-light"></div>
<button id="copyResultButton" class="btn btn-primary d-none" data-clipboard-target="#Area-output">
<i class="bi bi-clipboard" title="Copy Result"></i> Copy Result
</button>
<button id="copyHTMLButton" class="btn btn-primary d-none" data-clipboard-target="#Area-output" data-clipboard-action="copy">
<i class="bi bi-code" title="Copy HTML"></i> Copy HTML
</button>
Now the javascript code
$(document).ready(function() {
// Initialize the clipboard for result button
var clipboardResult = new ClipboardJS("#copyResultButton");
// Handler for when the result button is clicked
clipboardResult.on("success", function(e) {
// Show a tooltip indicating that the text was copied
$(e.trigger).tooltip({title: "Copied!", placement: "bottom", trigger: "manual"}).tooltip("show");
setTimeout(function() {
$(e.trigger).tooltip("hide");
}, 1000);
e.clearSelection();
});
// Initialize the clipboard for HTML button
var clipboardHTML = new ClipboardJS("#copyHTMLButton", {
text: function() {
return $("#Area-output").html();
}
});
// Handler for when the HTML button is clicked
clipboardHTML.on("success", function(e) {
// Show a tooltip indicating that the HTML was copied
$(e.trigger).tooltip({title: "Copied HTML!", placement: "bottom", trigger: "manual"}).tooltip("show");
setTimeout(function() {
$(e.trigger).tooltip("hide");
}, 1000);
e.clearSelection();
});
$("#send").click(function() {
let message = $("#message").val();
let engine = $("#engine").val();
let save = $("#save").val();
$.post("' . $url . '", {message: message, engine: engine, save: save}, function(data) {
$("#Area-output").html(data);
// Show the copy buttons after the chat message is generated
$("#copyResultButton, #copyHTMLButton").removeClass("d-none");
});
});
});

Adding a parameter to a JS function

I'm working on a FullCalendar; there are 9-10 events everyday in it and now I have to create the ability to delete an event.
This is the code:
eventClick: function(event, jsEvent, view) {
$('#modalTitle').html(event.title);
var imgName=event.image;
document.getElementById('imageDiv').innerHTML = '<img src='+imgName+' onerror=".'this.style.display="none"'." class=".'img-responsive'." alt=".''." >';
$('#modalBody').html(event.description);
$('#eventid').html(event.id);
$('#startTime').html(moment(event.start).format('DD-MM-YYYY'));
$('#endTime').html(moment(event.end).format('DD-MM-YYYY'));
$('#eventUrl').attr('href',event.url);
$('#fullCalModal').modal();
return false;
}
I get the events list with this:
echo events: [
";
while ($row = mysqli_fetch_array($sql)) {
echo "
{
id: '".$row['id']."',
title: '".$row['title']."',
image: 'assets/uploads/".$row['image']."',
description: '<p>".$row['description']."</p>',
start: '".$row['start']."',
end: '".$row['end']."',
url: '".$row['url']."',
color: '".$row['color']."',
allDay: true
},";
} ;
echo "
]
And now, when a user clicks on an event, the modal should popup with additional details and a button for deleting the event.
This is handled with:
function modalEvents(){
echo "
<div id='fullCalModal' class='modal fade'>
...
<p id='eventid'></p>
</div>
</div>
</div>
<div class='modal-footer'>
<a href='javascript:EliminateEvent(\"event.id\")' class='btn btn-danger btn-sm' role='button'><i class='fa fa-fw fa-trash'></i>Brisanje rezervacije</a>
However... the problem is that I get the actual ID value in , however, I'm having a hard time getting the same result in the link, the javascript:EliminateEvent()
Is there a way that I could get as a result
<a href='javascript:EliminateEvent(123)>
instead of
<a href='javascript:EliminateEvent(event.id)>

The reason you are getting the string "event.Id" in the function parameter is because you are actually asking PHP to do that. When you click on the event you could set the event id with JavaScript like you did with all the details. Like: href="javascript:EliminateEvent(" + event.id + ")"

How might I avoid opening a new window in due to watch results?

Please, look into my code. I would like to avoid opening a new window in due to watching results. I would like to avoid showing results instead of current content in the same window.
I have thought about using AJAX to show results in Dialog window (JQueryUI)
https://jqueryui.com/dialog/
but I have no idea how? Thank You in advance :)
HTML: result_browser.html
<form class="form" method="post" id="resultbrowserform">
<!--Something-->
<button type="submit" class="btn btn-default"> Apply </button>
</form>
<div id="dialog" title="Details">
<p></p>
</div>
JS:
$(function () { function serializeForm(form){...}
...
$('#resultbrowserform').submit(function () {
$.ajax({
type: 'POST',
url: '/result_browser/data/',
data: serializeForm($('#resultbrowserform')),
success: function (data, status, jqXHR) {
$('#resultbrowsertablecontainer').remove();
data = data.data;
if (!data.length) {
window.alert('No data for selected time period');
return;
}
div = $('<div id="resultbrowsertablecontainer">');
table = $('<table class="table table-striped">');
header = $('<thead>');
header.append($('<tr>')
.append( $('<th>').html('Die Id'))
.append( $('<th>').html('Application'))
.append( $('<th>').html('Result'))
table.append(header);
body = $('<tbody>');
for (i = 0; i < data.length; i++) {
row = $('<tr>');
row.append( $('<td>').html(data[i].die_id));
row.append( $('<td>').html(data[i].application));
row.append( $('<td>').html(data[i].result));
<!--I would like to avoid opening a new window-->
link = $('<a>').attr('target', '_blank').attr('href', '/result_details/' + data[i].result_id + '/').html('Details');
row.append($('<td>').append(link));
body.append(row);
}
table.append(body);
div.append(table);
$('#resultbrowsercontainer').append(div);
}
});
return false;
});
});

Simply remove the target attribute and then it will open inside itself:
<!--I would like to avoid opening a new window-->
link = $('<a>').attr('href', '/result_details/' + data[i].result_id + '/').html('Details');

how to make custom alert in jquery mobile?

can you please tell me how to make custom alert in jquery mobile?I am able to make confirm in JQM.
http://jsfiddle.net/EELLj/31/
I need same type of alert having message with ok button as in jquery ?
A alert having "title", "message" and ok button ? can we make this custom alert.
function confirmDialog(text, callback) {
var popupDialogId = 'popupDialog';
$('<div data-role="popup" id="' + popupDialogId + '" data-confirmed="no" data-transition="pop" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:500px;"> \
<div data-role="header" data-theme="a">\
<h1>Alert</h1>\
</div>\
<div role="main" class="ui-content">\
<h3 class="ui-title">' + text + '</h3>\
Yes\
No\
</div>\
</div>')
.appendTo($.mobile.pageContainer);
var popupDialogObj = $('#' + popupDialogId);
popupDialogObj.trigger('create');
popupDialogObj.popup({
afterclose: function (event, ui) {
popupDialogObj.find(".optionConfirm").first().off('click');
var isConfirmed = popupDialogObj.attr('data-confirmed') === 'yes' ? true : false;
$(event.target).remove();
if (isConfirmed && callback) {
callback();
}
}
});
popupDialogObj.popup('open');
popupDialogObj.find(".optionConfirm").first().on('click', function () {
popupDialogObj.attr('data-confirmed', 'yes');
});
}
$('#testButton').on('click', function () {
confirmDialog("Are you sure?", function(){
alert('Confirmed');
});
});

Column sorting issue in dataTables

I'm using dataTables Jquery plugin along with twitter bootstrap. I've my td content in HTML format to add popover to it when the data not in particular range.(Orange Color Cells having Popover)
Now the problem is when i sort the column Temperature it's not getting sorted properly.Note that i've sorted Temperature for AS2000 in descending order but only normal cells got sorted.
I've Initialized dataTable like this
$('#summaryTable').dataTable({
"aoColumns":[null,null,{"sType": "num-html"},{"sType": "num-html"}]
});
Normal td cell contains the following code
<td name="temperature_celsius" class="normal sorting_1"><div><span>23.40</span></div> </td>
The cell in Orange background color contains the following code
<td name="temperature_celsius" class="warning sorting_1"> <div> <span data-container="body" data-trigger="hover" data-toggle="popover" data-placement="bottom" data-title="<strong>Alert</strong>" data-html="true" data-content="<p class='text-danger'>Exceeds range limit 30.0 - 20.0 </p>" data-original-title="" title="">61.0</span><i class="icon icon-exclamation-sign pull-right" style="font-size: 21px;"></i></div></td>
Any Help?
Update :
I've this response from server
[{"AS1000":["5.1","0","false","false",null,null],"AS2000":["-","-","-","-","-","-"],"Date":"2014-03-02 08:07:00.0"},
{"AS1000":["5.0","0","false","false",null,null],"AS2000":["-","-","-","-","-","-"],"Date":"2014-03-02 17:58:00.0"},
{"AS1000":["5.0","0","false","false",null,null],"AS2000":["-","-","-","-","-","-"],"Date":"2014-03-30 14:59:00.0"},
{"AS1000":["-","-","-","-","-","-"],"AS2000":["27.0","0","true","false","30.0 - 20.0",null],"Date":"2014-03-30 06:03:00.0"},
{"AS1000":["-","-","-","-","-","-"],"AS2000":["15.0","0","false","false",null,null],"Date":"2014-03-02 02:00:00.0"},
{"AS1000":["5.0","0","false","false",null,null],"AS2000":["-","-","-","-","-","-"],"Date":"2014-03-14 20:06:00.0"},
{"AS1000":["5.0","0","false","false",null,null],"AS2000":["-","-","-","-","-","-"],"Date":"2014-03-30 07:00:00.0"},
{"AS1000":["5.0","0","false","false",null,null],"AS2000":["-","-","-","-","-","-"],"Date":"2014-03-05 06:58:00.0"},
{"AS1000":["5.0","0","false","false",null,null],"AS2000":["-","-","-","-","-","-"],"Date":"2014-03-24 13:01:00.0"},
{"AS1000":["-","-","-","-","-","-"],"AS2000":["23.40","0","true","false","30.0 - 20.0",null],"Date":"2014-03-25 23:56:00.0"},
{"AS1000":["-","-","-","-","-","-"],"AS2000":["23.5","0","true","false","30.0 - 20.0",null],"Date":"2014-03-02 09:03:00.0"},
{"AS1000":["-","-","-","-","-","-"],"AS2000":["61.0","0","false","false",null,null],"Date":"2014-03-17 19:07:59.0"}]
here each key other than date is a device.device key contains an array of following info
[Temperature,Humidity,IsTemperatureRangeExceeds,IsHumidityRangeExceeds,TemperatureRangeLimit,HumidityRangeLimit]
I'm constructing table in the following way
$.ajax({
type : "POST",
url : "http://localhost:8080/tablereports",
data: {svalue:JSON.stringify(options)} ,
success : function(result) {
obj = JSON.parse(result);
$("#reporttabletbodytempsum").empty();
var tablebody = $('#reporttabletbodytempsum');
$.each( obj, function( index, value ) {
var convertedDate=value.Date;
$.each(value,function(index1,value1){
if(index1!="Date"){
//Measurement Type choosen already by the user.it may be Temperature or TemperatureHumidity
if(measurementType =='Temp'){
if(value1[2]=='true'){
sreialloop +='<td name="temperature_celsius" class="warning"> <div> <span data-container="body" data-trigger="hover" '+
'data-toggle="popover" data-placement="bottom" data-title="<strong>Alert</strong>" data-html="true" '+
'data-content="<p class=\'text-danger\'>Exceeds range limit '+value1[4]+' </p>">'+value1[0]+
'</span><i class="icon icon-exclamation-sign pull-right" style="font-size: 21px;"></i></div></td>';
}
else {
sreialloop +='<td name="temperature_celsius" class="normal"><div><span>'+value1[0]+'</span></div></td>';
}
}else{
if(value1[2]=='true'){
sreialloop +='<td name="temperature_celsius" class="warning"> <div> <span data-container="body" data-trigger="hover" '+
'data-toggle="popover" data-placement="bottom" data-title="<strong>Alert</strong>" data-html="true" '+
'data-content="<p class=\'text-danger\'>Exceeds range limit '+value1[4]+' </p>">'+value1[0]+
'</span><i class="icon icon-exclamation-sign pull-right" style="font-size: 21px;"></i></div></td><td>'+value1[1]+'</td>';
}
else if (value1[3]=="true"){
sreialloop +='<td name="temperature_celsius">'+value1[0]+'</td><td class="warning"> <div> <span data-container="body" data-trigger="hover" '+
'data-toggle="popover" data-placement="bottom" data-title="<strong>Alert</strong>" data-html="true" '+
'data-content="<p class=\'text-danger\'>Exceeds range limit '+value1[5]+' </p>">'+value1[1]+
'</span><i class="icon icon-exclamation-sign pull-right" style="font-size: 21px;"></i></div></td>';
}
else{
sreialloop +='<td name="temperature_celsius" class="normal"><div><span>'+value1[0]+'</span></div></td><td><div><span>'+value1[1]+'</span></div></td>';
}
}
}
});
tablebody.append($('<tr class="reporttable"><td>'+ ++sno +'</td><td>'+convertedDate+'</td>'+sreialloop+'</tr>'));
});
$('[data-toggle="popover"]').popover({
'placement': 'auto',
trigger: 'hover'
});
sumTable = $('#summaryTable').dataTable();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
}) ;
Is there any better way? so that i can do sorting without any error.
Thanks,
Mithun

You should use the mRender function to style your output.
It will just modify the display of the cell, but leaves the underlying data intact, so it can be used for sorting and filtering.
"aoColumns": [null, null, {
mRender: function(data, type, full) {
if (data >= 5) {
return '<div name="temperature_celsius" class="warning sorting_1">' + data + '</div>';
}
return '-';
}
}, {
mRender: function(data, type, full) {
if (data >= 20 && data <= 60) {
return '<div name="temperature_celsius">' + data + '</div>';
}
if (data >= 60) {
return '<div name="temperature_celsius" class="warning sorting_1">' + data + '</div>';
}
return '-';
}
}]
I leave the styling of the returned divs up to you.
Here is a working Plunker with custom rendering and full sorting.