I am adding dynamic span with onclick .
$.ajax({
url:path,
type: "POST",
contentType: false, // Not to set any content header
processData: false, // Not to process data
data: formdata,
success: function (result) {
if(result==1){
for (var FileName of formdata.entries())
{
var fileName=FileName[0].trim();
**$("#"+PreviewControl).append('<span onclick="showaleart("'+fileName+'")">'+fileName+'</span>');
$("#"+hdnHasFile+"").val(1) ;**
}
}
}
});
function showaleart(filename){
alert(filename);
}
But when i click on that span element its giving error as Uncaught SyntaxError: Unexpected token }
But if i replace onclick="showaleart("'+fileName+'")" to onclick="showaleart()" with out any argument.
It does not give error.and the click is working.
when i click on element and inspected the element . it was creating element like this.
<span onclick="showaleart(" bank.jpg")"="">Bank.jpg</span>
You aren't using quotations properly, the second set of " renders the bank.jpg outside of the onclick. You need to use different type of quotes and escape them. Try this instead:
'<span onclick="showaleart(\''+fileName+'\')">'+fileName+'</span>'
or
`<span onclick="showaleart('${fileName}')">${fileName}</span>`
Related
Before submitting with Ajax, I am changing the ids of all inputs on the form, due to a need.
The problem is when I submit using Ajax, I need to replace the html of all fields in the form using the replaceWith function, but it is not doing that. It is simply changing the html, but it seems to be keeping the original html when I inspect it in the browser.
HTML should be replaced as shown in image 2.
Why can't HTML be replaced correctly? Shouldn't the replaceWith function be used for such a situation?
var genericModal = getLastGenericModalObject();
var frmFormaContato = genericModal.find('.frm-create-edit');
var valdata = frmFormaContato.serialize();
$.ajax({
url: url,
type: "POST",
traditional: true,
data: valdata,
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
success: function (data) {
frmFormaContato.replaceWith(data);
stopLoadGlobal();
},
error: function (e) {
stopLoadGlobal();
redirectToError(e.status);
return false;
}
});
Thank you :)
The solution was to change the IDs before replacing the HTML according to the DOM.
var dataChanged = changeIds($(data));
frmFormaContato.replaceWith(dataChanged);
I'm using the tinyMCE editor plugin in my webpage.
When I use a simple HTML page post to post the contents to the backend PHP and save them to a database or file, all seems OK.
When I try to do the same using an AJAX post, I am finding it impossible to prevent encoding issues.
In particular (I'll escape it here) \&\n\b\s\p\; is being converted to  and a "-" character is being converted to �
I've tried a few suggestions but with little luck.
The suggestion is that it is either an issue with my charset or encoding.
My save function is as follows:
function letterSave(newfile,fname){
var newDate = new Date;
var uniq=newDate.getTime();
var input = $('#myTextareastdletter');
var contents=input.val();
var context='<?=(!strcmp($sessobj->mode,"SA_ViewAbs")?"A":"S");?>';
// alert(fname);
$.ajax({
type: "POST",
url: '<?=auto_version("./SVajaxSaveDocContents.php")?>?duff='+uniq,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
data: {'S_sessid' : '<?=$sessobj->sessionid?>', 'context' : context, 'contents' : encodeURIComponent(contents), 'fname' : fname, 'newfile' : newfile},
success: function(data){
data = JSON.parse(data);
fname=data[0];
newLetterList=data[1];
if (fname != 'FAIL') {
alert ('OK: Letter Contents Saved to File ('+fname+').');
var versionOutput = $('#popupOutput');
versionOutput.html('');
var box = $('#popupDisplay');
var cover=$('#coverDiv');
box.css({
display:"none"
});
cover.css({
display:"none"
});
var letterOutput = $('#AbsenceLetters');
letterOutput.html(newLetterList);
} else {
alert ('Sorry: Failed to Save Letter Contents!');
}
},
error: function(data){
alert ('Sorry: Failed to Save Letter Contents!');
// console.log(data);
// console.log('error');
}
});
}
As you can see, I've been playing with setting the contentType and using encodeURIComponent().
Any help would be appreciated.
Cheers
In order to avoid these encoding issues, don't use .val on the textarea that the tinyMCE instance is attached to. Instead, you can utilize tinyMCE's built-in getContent method like so:
tinyMCEInstance.getContent()
Below is the code:
$.ajax(
{
url: "savePart",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function (jsonStr)
{
var result = JSON.parse(jsonStr);
var materialQualification = ''+mqFormat+'';
var newrow = $('<tr class="trClick" id="'+result.formID+'" data-toggle="modal"><td align="center" class="number">'+materialQualification+'</td></tr>';
$("#tData tbody").prepend(newrow);
}
});
When above code execute, window.open is not working. When I click <a></a>, it's not show me new window open.
Is there any way how to set it? Or Am I do something wrong there?
UPDATED:
When <a></a> clicked, it show me error in console:
Uncaught SyntaxError: Unexpected token }
Thanks.
Replace this line in your code and try. There is a mashup with a " and '. I use ' with slace \' instead of " inside window.open function.
var materialQualification = ''+mqFormat+'';
Onclick not working because of " double quote in the below line.
var materialQualification = ''+mqFormat+'';
Add \ before " double quote and add ' single quote in place of " double quote in window.open function., checkout below line
var materialQualification = ''+mqFormat+'';
i am trying to show a turtle file on a very simple homepage i made.
<p class="lead" id="testbed-meta">
<script>
$.ajax({
cache: false,
type: "GET",
async: false,
url: "/native/api/resources/turtle",
success: function(data,status){
document.getElementById("testbed-meta").innerHTML = data;
},
error: function(xhl,status){
document.getElementById("testbed-meta").innerHTML = "Error";
},
statusCode:{
201: function(){
alert("Error");
}
}
});
</script>
HTML don't understand that it's turtle and makes it to one long String without line brakes and also deletes some parts. Maybe because there are some "<" and ">" that are not escaped.
Is there a nice way to show a ttl file via html and maybe javascript?
EDIT:
By the way, i forgot to say that i get something like this in the answer:
#prefix omn-federation: <http://open-multinet.info/ontology/omn-federation#> .
But HTML don't show the "http:/....." part. Only:
#prefix omn-federation: .
Maybe because of the "<" and ">" ?!
Try this in your success callback:
$("#testbed-meta").text(data);
jQuery's text() method escapes all HTML for you.
Additionally, if you'd like to get new lines in your HTML, you need to replace all new line characters to HTML's <br> tag:
$("#testbed-meta").text(data).replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, "$1<br>$2");
try with a pre tag instead of p tag:
<pre class="lead" id="testbed-meta"></pre>
The HTML Preformatted Text (<pre>) represents preformatted text. Text within this element is typically displayed in a non-proportional font exactly as it is laid out in the file. Whitespaces inside this element are displayed as typed.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
<pre class="lead" id="testbed-meta"> </pre>
<script>
$.ajax({
cache: false,
type: "GET",
async: false,
url: "/native/api/resources/turtle",
success: function(data,status){
document.getElementById("testbed-meta").innerHTML = data.replace(/<br\s*\/?>/gi, '\n').replace(/</g, '<');
},
error: function(xhl,status){
document.getElementById("testbed-meta").innerHTML = "Error";
},
statusCode:{
201: function(){
alert("Error");
}
}
});
</script>
See this small snippets:
data = '<br/> \#prefix omn-federation: <open-multinet.info/ontology/omn-federation#>; . <br/> \#prefix rdf: <w3.org/1999/02/22-rdf-syntax-ns#>; . <br/>'
document.getElementById("testbed-meta").innerHTML = data.replace(/<br\s*\/?>/gi, '\n').replace(/</g, '<');
<pre id="testbed-meta"></pre>
What am I missing? I've added the get element by Id and I'm definitely getting a response back, I checked using firebug and the response is correct. But I can't figure out why it won't populate my div area.
<script>
$(document).ready(function () {
$("#cmdSend").click(function () {
// Get he content from the input box
var mydata = document.getElementById("cmdInput").value;
$.ajax({
type: "POST",
url: "/Terminal/processCommand",
data: { cmd: mydata }, // pass the data to the method in the Terminal Contoller
success: function (data) {
//alert(data);
// we need to update the elements on the page
document.getElementById("terminal").value = document.getElementById("terminal").value + mydata;
document.getElementById("terminal").value = document.getElementById("terminal").value + data;
},
error: function (e) { alert(e); }
})
});
});
</script>
And the Div I want the response to be put in:
<div class="terminal" style="overflow:scroll">
<br>
</div>
First, you are calling document.getElementById(), but your div does not have an ID of terminal, it has a class called terminal.
Second, you are using jQuery but then switch back to classic JavaScript. You could update your code to the following:
success: function (data) {
//alert(data);
// we need to update the elements on the page
var existingHtml = $(".terminal").html();
$(".terminal").html(existingHtml + mydata + data);
}
Note that the $(".SomeName") selector is for selecting by class and $("#SomeName") is to select by id.
Edit and Note
If this terminal div could start to get a lot of data inside of it, you may look at using the .append() function in jQuery to prevent having to make a copy of the HTML and overwrite the HTML each time a request is made. The update would be something similar to the following (its a little shorter and should be more efficient as well)
success: function (data) {
//alert(data);
// we need to update the elements on the pag
$(".terminal").append(mydata + data);
}
If you want to get your element by id, add an id to the div:
<div id=terminal class="terminal" style="overflow:scroll">
<br>
</div>
If you want to change the contend of div not using jquery, you should use innerHTML instead of value.
document.getElementById("divID").innerHTML = document.getElementById("divID").innerHTML + data