We Keep Coding

Issue with Jquery .html() function when updating a textarea with a modal

I'm trying to create a modal that allows a user to edit a memo field on a corresponding database.
The issue is, it works until I submit some form data, after that the textarea is not updating with the new data, it just displays the submitted data.
Some things to bear in mind:
The memo field is stored as plain text within the backend database.
The 'AjaxGetData.wc' (see code below) returns the field content in HTML format.
I'm using a javascript class called jquery.form.js to submit the form data within the modal.
So, I have a modal that contains a form and on that form is a textarea, the name of this textarea is changed dynamically depending on what element was clicked within a data table.
Then, when the href is clicked to open the modal an ajax request is run which collects the data (with HTML formatting) for the requested element and inserts it into the textarea using $('#myTextArea').html(string).
This all works, but after submitting some changed text all subsequent modal requests load the first submitted string no matter which row I click within the data table. Although in the console.log it is showing the correct string being returned by the ajax post.
Ideally, I like to understand why the .html() function stops working after I have submitted some data.
Please see my code below :
\\HTML
<!-- START -->
<div class="modal fade" id="editLogoPnotModal" tabindex="-1" role="dialog" aria-labelledby="editLogoPnotLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<form id="editLogoPnot-Form" action="AjaxTableFieldUpdate.wc" method="post">
<!--Header-->
<div class="modal-header alert-primary">
<h4 class="modal-title" id="myModalLabel">Artwork Production Notes</h4>
<button type="button" id="editLogoPnot-closebtn" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="md-form">
<i class="fas fa-pencil-alt prefix"></i>
<textarea id="editLogoPnot" name="ThisChangesDynamically" class="md-textarea form-control" rows="10" style="white-space: pre-wrap; overflow-y: scroll;"></textarea>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<!-- END -->
\\SCRIPTS
$('#dtSjob').on('click', 'a.editLogoPnot', function (e) {
e.preventDefault();
// Get the data of the selected row from the data table
epData = sjobTable.row( $(this).closest('tr')).data()
// Change the name attr of the textarea to identify the requested data
console.log($("#editLogoPnot").attr('name'))
$("#editLogoPnot").attr('name', 'logosxzxurnxzx'+epData['sjob']['logourn']+'xzxpnotxzxM');
console.log($("#editLogoPnot").attr('name'))
// Get the latest notes for LogoURN
$.ajax({ url: "AjaxGetData.wc?ti=Logos;urn&fl=pnot&key=urn:C:"+epData['sjob']['logourn'],
type: "POST",
success: function(data) {
// The below line ALWAYS displays the correct data
console.log("Returned data: "+data);
// The below line only works before I submitted some changed data, then it stops working.
$("#editLogoPnot").html(data);
}
});
});
\\ The below function handles the submit of the modal form
var editLogoPnotoptions = {
success: editLogoPnot_showResponse
};
$('#editLogoPnot-Form').submit(function() {
$(this).ajaxSubmit(editLogoPnotoptions);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
function editLogoPnot_showResponse(responseText, statusText, xhr, $form) {
$('#editLogoPnotModal').modal('hide');
}
I have tried using .val() which solves the issue but, I cannot get the data to display correctly within the textarea (it includes all the HTML formatting). If anyone has any suggestions on how to fix this, then that would also solve my issue.
Any suggestions would be greatly appreciated, as I have exhausted all my ideas!
Thanks, Chris

If I understand the issue correctly you can put the response string into a temporary element as html and retrieve it as text from that element to put in the textarea.
const str ='**E5654 ** Add Flat Neck Label
Test123';
const $div = $('<div>').html(str)
$('textarea').val($div.text())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea cols="60" rows="10"></textarea>

get the description to show up in a bootstrap modal pulled from database using AJAX, PHP, JAVASCRIPT.

I have been trying to get the description to show up in a bootstrap modal. I can pull the price, quantity, list price, and title from the database but when I try to pull the data for the description it makes my info all disappear. I am trying to figure out why?
I have tried several different things and to no avail I have not been able to figure this issue out. I would love a answer to this issue. It is stopping the progress of my project that needs to be completed soon.
When I add description to the code my info disappears on the first modal button clicked. The 2nd modal button clicked shows all info but then whenI go to the 4th and 5th modal button I get the same info as the 4th modal button. When I take out description from SELECT then all data shows up in modal except for the description. I am at a loss and truly need more understanding of what I might have done wrong. Thank you for your time. The actual site is up http://www.pdnauction.com and right now the description is in the code so that it shows the issues.
$(document).ready(function(){
$(document).on('click', '#getProducts', function(e){
e.preventDefault();
var id = $(this).data('id');
$('#products-detail').hide();
$('#products_data-loader').show();
$.ajax({
url: 'empData.php',
type: 'GET',
data: 'id='+id,
dataType: 'json',
cache: false
})
.done(function(data){
console.log(data.title);
$('#products-detail').hide();
$('#products-detail').show();
$('#id').html(data.id);
$('#products_title').html(data.title);
$('#products_price').html("$"+data.price);
$('#products_list_price').html("$"+data.list_price);
$('#products_image').html(data.image);
$('#products_description').html(data.description);
$('#products_quantity').html(data.quantity);
$('#products_data-loader').hide();
})
.fail(function(){
$('#products-detail').html('Error, Please try again...');
$('#products_data-loader').hide();
});
});
});
<?php
include_once ("core/init.php");
if($_REQUEST['id']) {
$sql = "SELECT id, title, price, list_price, quantity, description FROM products WHERE id='".$_REQUEST['id']."'"; $resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$data = $rows;
}
echo json_encode($data);
}
?>
<div id="emp-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<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">
<i class="glyphicon glyphicon-user"></i> Product Description
</h4>
</div>
<div class="modal-body">
<div id="products_data-loader" style="display: none; text- align: center;">
<img src="ajax-loader.gif">
</div>
<div id="products_data-loader">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<tr>
<th>Product</th>
<td id="products_title"></td>
</tr>
<th style="color: green">Price</th>
<td id="products_price" style="color: green"></td>
</tr>
<tr>
<th><s style="color: red">List Price</s></th>
<td id="products_list_price" style="color: #ff0000"></td>
</tr>
<tr>
<th>Quantity</th>
<td id="products_quantity"></td>
</tr>
<tr>
<th>Description</th>
<td id="products_description"></td>
</tr>
<tr>
<th>Gallery</th>
<td id="products_image"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

One issue (that may or may not be the primary cause, but you need to fix before you can really debug well) is you have many id's with the same value. An id must be unique. If you need two elements to have the same selector, e.g. "getProducts", use a class="getProducts" or a data- attribute. In my projects, I like to completely separate js and html/css, so I use data- attributes (there are some drawbacks, mainly speed to this method, but you can do more reading later on that).
So I would recommend:
1.) View the page source of your page
2.) Copy and paste it all into here: https://validator.w3.org/#validate_by_input
3.) Fix all the errors shown by the validator
If after that you still have an issue, come back and ask your question again and/or edit your question.
EDIT
Other than duplicate id's, you'll notice you have some issues with things like this:
alt="Boss Elite 320-Watt 6.5" Touch Screen Multimedia Car Stereo with Bluetooth, GPS and Rear View Camera - Black, BN965BLC"
The " after 6.5 is read by html as closing the alt tag, when actually you want to close the alt tag after BN965BLC. What you may want to look into there is URL encoding. https://www.w3schools.com/tags/ref_urlencode.asp Basically, a " symbol will be changed to %22, spaces are changed to %20, etc. so that the contents inside the alt tag won't affect the html. If you want to do that on the php side, take a look at rawurlencode(). If you want to do that on the js side, Encode URL in JavaScript?

The main source of your error is that your server does not respond for some of the ids, and apparently your javascript displays the details of the previously shown product.
Please note that the response from http://www.pdnauction.com/empData.php?id=1 and http://www.pdnauction.com/empData.php?id=5 are blank pages, while on http://www.pdnauction.com/empData.php?id=2 you have the expected results.
First, check your server side code in order to have the proper responses.
Second, make a check in your javascript .done() callback to display the modal only if you have answer from the server. Something like this:
// … existing code
})
.done(function(data){
if (!data.id) {
console.log('no response from server');
$('#products-detail').html('Error, Please try again…');
$('#products_data-loader').hide();
return;
}
// … existing code
})
.fail(function(){
// … existing code

Firebase/Angular: Messages not showing in HTML, but contain the message objects

Good day SO,
I am trying to incorporate a basic firebase chat module into my system via angular js (I am honestly not proficient at all..)
I am facing a problem whereby my items are not showing in my HTML element although my firebase messages are being retrieved from my firebase database.
Here is my HTML code:
<html lang="en" ng-app="chatApp">
...
<section id="content3" class="tab-content">
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-comments-o"></i>
Instant Chat Messenger – Crisis Management Office
</div>
<div class="card-body" ng-controller="ChatController">
<p ng-repeat="m in messages">{{m.message}}- </p>
<div class="form-row">
<div class="form-group col-md-11">
<input type="text" class="form-control" id="chatEntry" rows="14" placeholder="Type your message here" ng-model="messageText">
</div>
<div class="form-group col-md-1">
<button type="submit" class="btn btn-primary btn-block" id="sendBtn" ng-click="send()">Send</button>
</div>
</div>
</div>
</div>
</section>
And here is the angular.js code:
var app = angular.module('chatApp', ['firebase']);
app.controller('ChatController', function($scope, $firebaseArray) {
var crisis = "Crisis1";
//Query
var ref = firebase.database().ref().child(crisis).child('CMO-PMO');
$scope.messages = $firebaseArray(ref);
$scope.send = function() {
$scope.messages.$add({
sender: "PMO",
message: $scope.messageText,
date: Date.now()
})
}
})
And now, here is the funny thing.. My messages are being retrieved (I put a dash '-' behind {{ m.messages }} so that a dash will print for each message in my firebase database (To show that they are being retrieved), but my messages are not being shown.
Here is a screenshot of my firebase (Note: has 7 messages currently):
And here is a screenshot of my HTML page (It shows 7 dashes for 7 items in my firebase):
Although I have checked my scope in the javascript code, as well as the namings in my firebase database, my messages are still unable to show.. But I am able to send messages via my page to the firebase database. (The button and send functions are working!) The only problem now is showing the messages..
I am at a loss.. Please help me SO! I will promptly reply to any posts here :) Thank you so much!
Edit: If i use {{m|json}}:

I have solved the rendering problem using the {%verbatim%} tag.

Grab HTML tag value and assign to PHP variable

I have JavaScript to change the value of an input tag whenever I open my popup in which it all executes successfully. When I inspect the tag, the value is exactly what it should be every time. Now within that popup I have, I just want to echo out the value using my PHP variable but this doesn't seem to work. I understand the whole concept of PHP is server side and JavaScript it client side but because the value is changed it should not matter as the value is there and PHP should be able to pick it up even when I reopen the popup.
Any idea how to achieve this?
My code is below. I can't have the page reload (e.g., use post methods and such).
HTML input tag:
<td class="alarmvalue" style="">
<input type="checkbox" name="tracknameneeds" id="tracknameneeds" style="text-align:center;" class="form-control" value="">
</td>
Code trying to echo input tags value:
<?php
$trackname = "<script>document.getElementByID('tracknameneeds').value;</script>";
?>
<!-- Play Options localstorage etc -->
<div class="context-menu">
<div id="modal-pl-playpopup" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-pl-playpopup-label" 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>
<h3 class="modal-title" id="modal-pl-clear-label">Play Options</h3>
</div>
<div class="modal-body">
Choose from the following...<br>
<p>You Chose: <?php echo $trackname;?></p>
<br>
<br>
<i class="fa fa-plus-circle sx"></i> Add To Queue<br> <div style="padding-top:5px"></div>
<i class="fa fa-play sx"></i> Add And Play<br><div style="padding-top:5px"></div>
<i class="fa fa-share-square-o sx"></i> Add, Replace And Play
</div>
</div>
</div>
</div>
</div>
My JS:
var tracknamepopup;
tracknamepopup = o.data("path"); //assign song name to variable
document.getElementById('tracknameneeds').value = tracknamepopup; //assign the grabbed song name to inputs value to try grab that in php

All HTML code and Javscript execution is done (on client side) after PHP execution is complete on Server Side and response is sent to the client.
So you can not bind or assign HTML tag value to PHP directly.
But you can set it by AJAX and store it in session for next script execution on PHP.
Code in JS should be :
var tracknamepopup;
tracknamepopup = o.data("path"); //assign song name to variable
document.getElementById('tracknameneeds').value = tracknamepopup; //assign the grabbed song name to inputs value to try grab that in php
// you can write code for call update session varible using ajax
updateServerSession('tracknameneeds',tracknamepopup);
function updateServerSession(session_index,value) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "update_ajax?index"+session_index+"&value="+value, true);
xhttp.send();
}
Code in update_ajax.php
<?php
session_start();
$_SESSION[$_GET['index']]=$_GET['value'];

I think easiest way is to just use a get variable:
window.open("http://www.yoursite.com/popup.php?trackname=".concat(document.getElementByID('tracknameneeds').value));
and then use
$_GET['trackname']
But you should escape all get variables before posting!

What i did might not be the best solution but worked perfectly.
Have a blank tag (In my case i used a header (h1,h2 etc tag)) and give it an id. Use js to manipulate the Inner-HTML to display the current track.
HTML:
<h2 id="songbacktag"></h2>
JS:
var tracknamepopup;
tracknamepopup = o.data("path");
document.getElementById("songbacktag").innerHTML = tracknamepopup;

Laravel Request $request->file() is always blank

I have a form that has a field to upload multiple files. So far so good. So when I select a few files and hit the submit button, the $request->file() is always empty no matter what. The name of my field is images_json.
I suspected the route being PATCH or PUT could cause this (considering I'm uploading images on create and update), I made a separate POST route to handle the uploading with its own controller action and had a 3rd party jQuery plugin handle the upload (blueimp jQuery File Upload plugin), and guess... I'm receiving an empty response yet again!
And yes I have 'files' => true in my form tag and it spits the enctype="multipart/form-data" attribute very nicely.
This is what I have in my view currently (normal file upload that relies on the submit button of the form):
<div class="form-group form-md-line-input">
{!! Form::label('images_json', 'Bilder hochladen', ['class' => 'col-md-2 control-label']) !!}
<div class="col-md-10">
<div class="fileinput fileinput-new" data-provides="fileinput">
<span class="btn green-seagreen btn-file">
<i class="glyphicon glyphicon-plus"></i>
<span class="fileinput-new">Bilder auswählen...</span>
<span class="fileinput-exists">Mehr auswählen</span>
{!! Form::file('images_json[]', ['multiple']) !!}
</span>
<span class="fileinput-preview" style="max-height: 32px;"></span>
 
</div>
</div>
</div>
And this is the action:
public function update(CreateEntryRequest $request, $id)
{
return $request->file('images_json');
}
And this would be a response:
[{},{},{}]
(Yes, I selected three pictures)
No matter what, it always comes back as blank. This is now something I am unable to figure out.

I think you sent data via ajax, so you can try to get file from $_FILES .
I have the same problem with fineuploader, and solve it when obtained data from $_FILES instead $request->file()

try put this in the top of your controller file
use Illuminate\Http\UploadedFile;