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>

javascript not showing elements?

I'm trying to create a modal which should show position variable mention in my code
here is my ejs code (i'm using ejs and node js and java script for modal)
<div class="container-fluid">
<%for(i=0;i<Vac.length;i++){%>
<div class="alert alert-dark" role="alert">
<h4 class="alert-heading">Postion:- <%=Vac[i].position%></h4>
<hr>
<h5>Type:- <%=Vac[i].type%></h5>
<h6>Skills:- <%=Vac[i].Skills%></h6>
<p class="lead"><%=Vac[i].Description%> </p>
<button type="button" class="btn btn-primary" data-toggle="modal" onclick="showApply()">Apply</button>
<br>
</div>
<%}%>
</div>
here is my javascript code for the modal
<script>
function showApply()
{
$('#applyModal').modal('show');
$('#applyModal').('#applyModaltitle').text($('#alert-heading'));
}
</script>
but i'm getting the error as below:
SyntaxError: missing name after . operator[Learn More] careers:216:23 [Show/hide message details.] ReferenceError: showApply is not defined
can anybody tell me whats wrong and how i can correct it ?

After Searching for the answer for many answer i had found this out from one of the answer on stackoverflow .Since I'm accessing data from database generated , i have to access data through the elements from the data set displayed like from my example :-
i have displayed my data in an alert box and from alert box i have to take the required data and displayed it in the modal,in order to display the data on the modal we have to do the following :-
$(document).ready(function(){
$('#modalname').on('show.bs.modal',function(e){
var _button =$(e.relatedTarget);
var info =_button.parents(".alert");
var position=info.find(".classofelementneeded").text(); //text as i was using h5 tag for displaying data
$(this).find("#element where you want to display data").val(position); //val because i want to display data in text box
});
});
you can use this for displaying data from web page to modal via javascript

Refer to: Multiple selector chaining in jQuery?
function showApply()
{
$('#applyModal').modal('show');
$('#applyModal').('#applyModaltitle').text($('#alert-heading'));
}
The error you get tells you that showApply doesn't exist.
That is so, because there is a . (dot) operator that is wrong in this function.
You can try that:
function showApply()
{
$('#applyModal').find('#applyModaltitle').innerHTML=$('#alert-heading').text;
$('#applyModal').modal('show');
}

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;

Angular dynamically include html

I want to include HMTL for Bootstrap modal on click but I cannot get it to work.
In my controller I have this code:
$scope.onFollowingClick = function () {
console.log('clicked');
$scope.isFollowingModal = true;
$('#FollowingModal').modal('toggle');
};
And my HTML looks like this:
<div ng-if="isFollowingModal">
<div class="modal modal-alternate fade" ng-include="'/Templates/Modals/Public/ModalFollowing.html'" id="FollowingModal"> </div>
</div>
And when I click button nothing happens ("clicked" is logged in console), in browser when I inspect element, I only see:
<!-- ngIf: isFollowingModal -->
And no network request to fetch ModalFollowing.html is logged.
What am I doing wrong ?

If we go this way, using $http service is really helpful even though ngInclude fetches, compiles and includes an external HTML fragment.
$scope.onButtonClick = function() {
$http
.get('/Templates/Modals/Public/ModalFollowing.html')
.success(function(response) {
$('modal')
.html(response)
.modal('show');
});
}
And never forget about async :P

pass HTML link id to js AJAX function through modal plugin

I have over 1.5 million dynamically created (php/html/js) web pages that contain lists of up to 300 people, to whom I need to allow visitors to send messages by using a popup form that is triggered by link next to each person's name. I'm using the PopEasy jquery modals plugin http://thomasgrauer.com/popeasy/ .
All these modals/forms are identical, except for a unique recipient ID associated with each link that needs to be passed through to the AJAX code that fires to save the message to that person's record when the modal's form's Send Message btn is clicked (e.g. "1001', '1002' in the examples below).
For each page, I could dynamically create up to 300 form DIVs, one for each link, but would rather find a clever way to transfer the recipient ID with just one modal/form DIV, to cut down the bandwidth. I should be ok, if I can reference the ID of the link from within the AJAX code (as the "u" var in the example below).
Ideas?
(my competencies: js: "barely any" / html and php: "average".
Here is the code that works for just two links/divs/forms:
<a id="1001" class="modalLink" href="#modal_1001">Send msg</a>
<a id="1001" class="modalLink" href="#modal_1002">Send msg</a>
// the plugin uses the class to fire, and the href to know which of several DIVs of
// that class to use; if the a#id isn't needed, I can strip the "modal_" part out of
// the href to save having to parse it
<div id="modal_1001" class="modal">
<form method="post" action="">
<textarea>(write your msg here)</textarea>
<button type="button" onclick="storeMsgAjax(1001,1234)">Send message</button>
</form>
Close Form
</div>
<div id="modal_1002" class="modal">
<form method="post" action="">
<textarea>(write your msg here)</textarea>
<button type="button" onclick="storeMsgAjax(1002,1234)">Send message</button>
</form>
Close Form
</div>
And here is the js modal plugin function:
$(document).ready(function(){
$('.modalLink').modal({
trigger: '.modalLink', // id or class of link or button to trigger modal
olay:'div.overlay', // id or class of overlay
modals:'div.modal', // id or class of modal
animationEffect: 'slideDown', // overlay effect | slideDown or fadeIn | default=fadeIn
...(other options)...
close:'.closeBtn' // id or class of close button
});
});
And here is the AJAX code:
function storeMsgAjax(s,u)
{
var m = document.getElementById("msgtxt").value;
var url = "http://ifinallyfoundu.com/storeMsg.php?s="+s+"&m="+m+"&u="+u+"&t=" + Math.random();
xmlHttp2 = GetXmlHttpObject();
if (xmlHttp2 == null) {alert("Browser does not support HTTP Request"); return;}
xmlHttp2.onreadystatechange = function()
{
if (xmlHttp2.readyState == 4 && xmlHttp2.status == 200)
{
var formSaveResults = xmlHttp2.responseText;
document.getElementById("modal_"+s).innerHTML = formSaveResults+'<br><br>Close Form' ;
}
}
xmlHttp2.open("GET", url, true);
xmlHttp2.send(null);
}

Looks like I can add an onclick script to each link to put the ID in the innerHTML of a hidden page element, which should be accessible to the AJAX routine. I'm sure there is probably a more elegant solution, but this seems to work.