I tried to copy text after an ajax text generated
I am able to copy a text an inputtext but for the field inputtext generated by the ajax response, it does not work
this code below display the input generated by the ajax
<div class="chat-box-message text-start">
<div id="chat-output" class="text-bg-light">
<button id="copyButton" class="btn btn-primary" data-clipboard-target="#chat-output">
<i class="bi bi-clipboard" title="Copy HTML Code"></i>
</button>
</div>
<div>
this script represent the element injected in chat-output
$(document).ready(function() {
// Initialize the clipboard
var clipboard = new ClipboardJS("#copyButton");
// Handler for when the copy button is clicked
clipboard.on("success", function(e) {
// Show a tooltip indicating that the text was copied
$(e.trigger).attr("data-original-title", "Copied!").tooltip("show");
e.clearSelection();
});
$("#send").click(function() {
let message = $("#message").val();
$.post("' . $url . '", {message: message}, function(data) {
$("#chat-output").html(data);
});
});
});
When the message is generated, I do not see the copy button.
Do you have an idea to implement the coy button afterthe text is generated ?
Thank you
Related
I tried to fill a search input field with some text and hit the search button with this code:
document.getElementsByName('search')[0].value = '1234978';
document.getElementsByClassName('js_search_button')[0].click();
I see my text in the box and the button gets hit. But the data from the input box, was not submited.
Maybe the website has a protection, so that only keytrokes are accepted.
To crosscheck this I tried this code:
var iButton = document.getElementsByClassName('js_search_button')[0];
iButton.addEventListener('click', simulateInput);
function simulateInput() {
var inp = document.getElementsByName("search")[0];
var ev = new Event('input');
inp.value =inp.value + '1234978';
inp.dispatchEvent(ev);
}
Here I get the right result if I manualy click the searchbutton with automaticly filled in the number.
I it possible to automate the click in this scenario, too ?
This is not an answer, because of code sample I posted it as answer.
Are you selecting the right element for clicking? As you can see I click the buttons programmatically.
function clicked(val) {
console.log('button clicked:', val)
}
document.querySelectorAll(".txt")[0].value = 5;
document.querySelectorAll('.btn')[1].click()
document.querySelectorAll('.btn')[2].click()
document.querySelectorAll('.btn')[0].click()
document.getElementsByClassName('btn')[3].click()
<input class='txt' type='text' />
<button class="btn" onclick="clicked(1)">a</button>
<button class="btn" onclick="clicked(2)">b</button>
<button class="btn" onclick="clicked(3)">c</button>
<button class="btn" onclick="clicked(4)">d</button>
I've been trying to retrieve the data from MySQL database in order to display it on a modal/pop-up box in javascript. Here's my current progress:
When you click the "View Images" Button
Here's my snippet code for modal pop up box:
HTML
This html Trigger button will get the Report_ID in its button attribute id to pass it to javascript.
" onclick="showDetails(this);">View Images
<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
Images of the Report
</h4>
</div>
<div class = "modal-body">
<p>Original Image: <span id = "Orig_Image"></span></p>
<p>RGB Image: <span id = "RGB_Image"></span></p>
<!--<img src="smiley.gif" alt="Smiley face" height="200" width="200">-->
</div>
<!-- <div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>-->
</div>
</div>
</div>
JAVASCRIPT
This javascript code willl be the one to get the Report_ID from the html table. Report_ID will be the identifier in MySQL Query and will be used in the php script Retrieve_Image.php using GET method. If the retrieval of the data is success the javascript will pass the values in to the html with their corresponding ids (ex. ).
function showDetails(button){
var Report_ID = button.id;
}
$.ajax({
url: "Retrieve_Image.php",
method: "GET",
data: ("Report_ID": Report_ID),
success: function(response){
//alert(response);
var Images = JSON.parse(response);
$("#Orig_Image").text(Images.Original_Image_Directory);
$("#RGB_Image").text(Images.RGB_Image_Directory);
$("#myModalLabel").text(Images.Image_Name);
}
error: function(e){
alert('Error: '+e);
}
});
PHP
This script / php code will retrieve the images data and will return its retrieved values to javascript using json encode.
<?php
session_start();
include_once ("../System_Connector.php");
include_once ("Admin_Session_Checker.php");
$Report_ID = $_GET["Report_ID"];
$Retrieve_Report = "SELECT Image_Name,Original_Image_Directory,RGB_Image_Directory FROM Report_Image WHERE Report_ID = $Report_ID";
$Retrieval_Image_Query = mysqli_query($Connection, $Retrieve_Report);
if(!$Retrieval_Image_Query){
echo "<script type = 'text/javascript'> alert('Error: Could not retrieve data from database because of this error: '".mysqli_error($Connection)."') </script>";
}
$Report_Result = mysqli_fetch_object($Retrieval_Image_Query);
echo json_encode($Report_Result);
?>
PROBLEM
It does not returning any data from php script. I tried to run the php script by putting a value on $_GET["Report_ID"]; and it doesn't have a problem. I think the problem is on the trigger button, where it gets the Report_ID using button id. How can i find and fix the problem? All I want is to display the text values first for Original Image and RGB Image.
Example of what I'm trying to achieve (Output goal):
P.S. I used the bootstrap Modal Box: https://www.tutorialspoint.com/bootstrap/bootstrap_modal_plugin.htm
### add $.ajax inside showDetails ###
function showDetails(button){
var Report_ID = button.id;
$.ajax({
url: "Retrieve_Image.php",
method: "GET",
data: {"Report_ID": Report_ID},
success: function(response){
//alert(response);
var Images = JSON.parse(response);
$("#Orig_Image").text(Images.Original_Image_Directory);
$("#RGB_Image").text(Images.RGB_Image_Directory);
$("#myModalLabel").text(Images.Image_Name);
}
error: function(e){
alert('Error: '+e);
}
});
}
Place your ajax code inside showDetails function.
I have a form which dynamically generates a table of attached (uploaded) files to the form. The last cell of each row is a delete button. That delete button when clicked executes this code:
Delete Button Clicked
$("td").on("click", ".btn-danger", function(event){
var rowID = "#"+$(this).attr("rowID");
var id = $(this).attr("id");
$("#confirmDelete").animate({top:'15%'}, 1000);
$("#confirmDelete").removeClass("hidden");
$("#confirmDelete").on("click", "#deleteFile", function(e){
var inn = document.thisItem.getInnovator();
var getInfo = inn.newItem("CSH_PLI_CommercialPartFiles", "get");
getInfo.setProperty("related_id", id);
getInfo = getInfo.apply();
var relatedID = getInfo.getProperty("id", "");
var thisRelated = inn.newItem("CSH_PLI_CommercialPartFiles", "delete");
thisRelated.setID(relatedID);
thisRelated = inn.applyAML(thisRelated.ToString());
var thisFile = inn.newItem("File", "delete");
thisFile.setID(id);
thisFile.apply();
$("#confirmDelete").animate({top:'-100%'}, 1000);
$("#confirmDelete").addClass("hidden");
$(rowID).hide();
});
$("#confirmDelete").on("click", ".btn-default", function (e){
$("#confirmDelete").animate({top: '-100%'}, 1000);
});
});
Which in turn brings into focus this bit of HTML, my confirmation window.
HTML
<div id="confirmDelete">
<div class="bg-danger">
<h4>Delete File Confirmation</h4>
</div>
<div>
<p><b>Delete this file? This action cannot be undone</b></p>
</div>
<div class="pull-right">
<button type="button" class="btn btn-default btn-sm">Cancel</button>
<button type="button" class="btn btn-danger btn-sm" id="deleteFile">Delete</button>
</div>
</div>
Now everything works fine enough. Cancel closes the popup. And delete, will actually delete the file from the server and remove it from the table in the form. However, as soon as delete is done, the popup will scroll up and then scroll back down as if it were called again.
I cannot figure out any combination of hides and removes which will actually stop this from happening.
I've got a table that lists values inputted by a user, with 2 buttons on the side to remove or to mark completed. On the page the table is visable, there are 3 tabs, we will call these Tab1, Tab2, and Tab3
Each tab has a table (As described above) with information about a specific type of entry.
These buttons are simple <a href> links, so when clicked they reload the page. This is a problem because the users view is refreshed and it takes the tabs back to the default tab, and is also an inconvenience when trying to mark several entries.
I would like to make these buttons send Ajax requests to another page to process the data. The only problem is, I am not really sure how to make the ajax call.
This is what I have right now
My buttons
echo "<td class='td-actions'>";
echo " <a href='?complete=".$row['uniqueID']."' class='btn btn-success btn-small'>
<i class='btn-fa fa-only fa fa-check'> </i>
</a>
<a href='?remove=".$row['uniqueID']."' class='btn btn-danger btn-small'>
<i class='btn-fa fa-only fa fa-remove'> </i>
</a>";
echo "</td>";
There is one called Complete, and one called Remove.
When either of these are pressed, it currently reloads the page which triggers a few php if statements.
if(isSet($_GET['remove'])) {
$sql = "DELETE from rl_logged where uniqueID='".$_GET['remove']."';";
$ret = $db->exec($sql);
echo "<meta http-equiv='refresh' content='0;index.php' />";
}
if(isSet($_GET['complete'])) {
$sql = "UPDATE rl_logged set complete=1 where uniqueID='".$_GET['complete']."';";
$ret = $db->exec($sql);
echo "<meta http-equiv='refresh' content='0;index.php' />";
}
These are relatively simple functions. My problem is that I do not know javascript very well.
Any help would be much appreciated.
the javascript that I have come up with is this
$(document).ready(function() {
$('#markComplete').click(function() {
var input = input = $(this).text()
$.ajax({ // create an AJAX call...
data: {
onionID: input,
},
type: 'POST', // GET or POST from the form
url: 'pages/ajax/markCompleteRL.php', // the file to call from the form
success: function(response) { // on success..
refreshAllTabsWithFade();
}
});
});
});
using this button
<div name='markComplete' id='markComplete' class='btn btn-success btn-small'>
<i class='btn-fa fa-only fa fa-check'></i>".$row['uniqueID']."
</div>
But, while inspecting with firebug, this seemed to work ONCE, but now the button doesn't do anything.
I tried again this morning, the button presses and the first time it sends this post, then the button doesn't do it again - even on page reload.
I was able to get it to work with the following:
javascript:
$('.markComplete').submit( function( event ) {
event.preventDefault();
event.stopImmediatePropagation();
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // serialize the form
type: "POST", // GET or POST from the form
url: "pages/ajax/repairlogMarks.php", // the file to call from the form
success: function(response) { // on success..
refreshAllTabs();
}
});
return false;
});
button:
<form class="markComplete">
<input type="text" style="display:none;" class="form-control" name="uniqueid" value='<?=$row['uniqueID'];?>'>
<input type="text" style="display:none;" class="form-control" name="markcomp" value='1'>
<button type="submit" class="btn btn-success">
<i class="btn-fa fa-only fa fa-check"></i>
</button>
</form>
Basically, I made the button into a form which I knew how to create an ajax request for.
--
Update to make it work for multiple buttons that do the same function for different unique ID's.
Well for since you're sending the ajax call using "POST", it seems to me that if(isSet($_GET['complete'])) would evaluate to false. Also if your button is generated dynamically using php then change your click handler to the following:
$('document').on('click', '#markComplete', function (){
// Your code here
})
If you have more than one "Mark Complete" button; you need to use classes rather than ID to bind the event.
<button id="test">
Test 1
</button>
<button id="test">
Test 2
</button>
<script>
$('#test').click(function (e) {
console.log('test', e.target);
});
</script>
In this example, only the first button works. jQuery will only return the first element when you specify an ID.
If you use classes to bind the event; both buttons will work:
<button class="test">
Test 1
</button>
<button class="test">
Test 2
</button>
<script>
$('.test').click(function (e) {
console.log('test', e.target);
});
</script>
i think you have an error in your javascript at this line...
var input = input = $(this).text()
try to replace by this..
var input = $(this).text();
this is my second post on the website. Of all other sites i tried, this one gave the most accurate and useful information!
I'm in a bit of a trouble with buttons, i have a task to make an inbox and to add a "reply" and "delete" button into every instance of the message.
I was indeed wandering if there is a better way to do that than forcing the HTML code into the script, because every message is dynamically generated. Any help and/or suggestions would be very appreciated!(The objects are called from a JSON file).
$(document).ready(function(){
$.getJSON('public/js/data.json', function(json){
$.each(json.data, function(i, data){
var output = '';
if(data.from.id != '234' && data.from.name != 'Alan Ford'){
$("#inbox").append(
output +=
'<div class="post">'+
'<div class="h1">'+data.from.name+' - '+data.subject+'</div>'+ //this gives the name of the person who sent the message and the subject
'<div class="content">'+data.message_formatted+'</div>'+ //The content of the message
//buttons should be squeezed left of the date
//this gives the date of the message sent
'<div class="time">'+data.date_sent_formatted.formatted+'</div>'+
'</div>'
);
}});
});
});
var date_sent=convertToDateTime();
function delete_message(id){
console.log('Delete message with id: '+id);
}
function reply_message(id, sender){
console.log('Message id: '+id);
console.log('Reply to: '+sender);
}
$(document).ready(function() { //when de html document is loaded
$(".deleteButton").each(function() { //for each button with class *deleteButton*
var button = this; //we take the html element
$(button).click(function() { //and we bind an eventlistener onclick
alert($(button).attr("id")); //when the user clicks we tell him the id
// code to execute when the user clicks on a delete button
});
});
$(".replyButton").each(function() {
var button = this;
$(button).click(function() {
alert($(button).attr("id"));
// code to execute when the user clicks on a reply button
});
});
});
With this you add a class and id to every delete/reply button in the html.
Lets say you have a simple list like this.
<div>
<button class="deleteButton" id="1">Message 1</div>
<button class="replyButton" id="1">Message 1</div>
<button class="deleteButton" id="2">Message 2</div>
<button class="replyButton" id="2">Message 2</div>
<button class="deleteButton" id="3">Message 3</div>
<button class="replyButton" id="3">Message 3</div>
</div>
Now if you click on one of the buttons, you will get an alert that tells you the id of the button.