I am dynamically creating Div Text in JS and was wondering how I access the various text upon click.
Here is what I have tried so far;
My Dynamically created div
function Message(Side, message) {
var divChat = '<div class="direct-chat-msg ' + Side + '">' +
'<div id="myDiv" class="direct-chat-text">' + message + '</div>' +
'<div id="accountMenu">' +
'<li onclick = "getMessage(' + message + ')" id="replyDiv">Reply</li>' +
'<li>Preferences</li>' +
'</ul>' +
'</div></div>';
$('#divChatWindow').append(divChat);
}
JS when the li is clicked on.
function getMessage(str) {
alert(str);
}
The error I am getting is:
Uncaught ReferenceError: *whaeverthemessageis* is not defined
at HTMLLIElement.onclick
What is the best solution to solve this problem?
Thanks =)
You have malformed html using single and double quotes. The message is being treated as a variable, not a string, hence the undefined error.
replace:
'<li onclick = "getMessage(' + message + ')" id="replyDiv">Reply</li>' +
with this:
'<li onclick = "getMessage(\'' + message + '\')" id="replyDiv">Reply</li>' +
I'm not exactly sure what the problem is, but here is a working Playcode
Related
Another noob question/issue.....I am currently parsing a json file and appending the data to an HTML table. I need to make one of the name/value pairs (COPD_QUAL.FIN) display as a link within the table.
Here is my function to append the data....
function createPatientTable(json) {
$.each(json.LIST, function(i, COPD_QUAL) {
$('.footable > tbody:last').append('<tr><td>' + COPD_QUAL.PATIENT + '</td><td>' + COPD_QUAL.FIN + '</td><td>' + COPD_QUAL.NURSE_UNIT + '</td><td>' + COPD_QUAL.ROOM + '</td><td>' + COPD_QUAL.BED +'</td><td>' + COPD_QUAL.ATTENDING_PHYS + '</td><td>' + COPD_QUAL.LENGTH_OF_STAY + '</td><td class="assessment ' + getSeverity(COPD_QUAL.MED_ASSESS) + '">' + COPD_QUAL.MED_ASSESS + '</td></tr>');
});
$('.footable').footable();
};
This is the part I am trying to make a link but receiving a syntax error when clicking the link within the application that I included the table within:
'</td><td><a href="javascript:APPLINK(0,"powerchart.exe","/PERSONID=8986122 /ENCNTRID=14150574")">'
If I try to use single ' instead of the double " within the () of the APPLINK function, I receive an unexpected ) error:
'</td><td>' + COPD_QUAL.FIN + '</td><td>'
Could someone help me with the syntax? Am I completely off here? I was able to get the link to work otuside of the table in a random div but I cannot append the link to the table within my json function. Here is the hardcoded / standalone div link that works:
Open patient chart test2
Thanks in advance!!!
'</td><td>' + COPD_QUAL.FIN + '</td><td>'
or
'</td><td><a href="javascript:APPLINK(0,\\"powerchart.exe\\",\\"/PERSONID=8986122 /ENCNTRID=14150574\\")">'
You need to escape the quotes.
I need help with a little script ...
when i append content and drigger create tho content is loaded...
but then when i use $('#set').empty(); for the second time the content is loaded but no JQM style is added (just plain text)
i have read about this problem but i dont find any solution ... i guess that $('#set').collapsibleset('refresh');as it should... any idea ?
thanks
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content).trigger("create");
$('#set').collapsibleset('refresh');
Instead of
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content).trigger("create");
$('#set').collapsibleset('refresh');
try
$('#set').empty();
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content);
$('#set').collapsibleset().trigger("create");
In this way you only call trigger('create') once after all content has been added.
Here is a DEMO
$(document).on("pageshow", "#mappage", function (event) {
$("#doldur").append("<li> <label onclick='getBina("
+ featuressokak[f].attributes.SOKAKID
+ ");'>"
+ featuressokak[f].attributes.SOKAKADI
+ "</label><div onclick='findsokak(" + f + ");' style='float:right;width='20%''><img src='img/map.png' style='float:right;'/></div></li>");
function getBina(sokakid) {}
});
I wrote part of my code. I need to call function getBina inside on mappage function. But I got this error : uncaught ReferenceError: getBina is not defined. So when I wrote function getBina outside mappage function, logicically I got error. I must run on inside. how is it possible ?
my button code :
var content = '<div class="adresbaslik">'+feature.attributes.ADI+'</div><p style="margin-top:-10px"></p><div class="fulladrespopup">'+mahalleadi+' MAHALLESİ '+sokfeature[0].attributes.SOKAKADI +' SOKAK NO:' + numfeature[0].attributes.KAPINO +' '+ilceadi+'</div>' ;
content = content + '<p style="margin-top:-10px"></p><div style="text-align: center ;"><a data-ajax="false" onclick="sendForm("'
+ilceadi+'","'
+mahalleadi+'","'
+sokfeature[0].attributes.SOKAKADI+'","'
+ numfeature[0].attributes.KAPINO+'","'
+ ilcegisID+'","'
+ mahallegisID+'","'
+ sokgetir[0].attributes.GIS_ID+'","'
+ numfeature[0].attributes.KAPINO+'","'
+ feature+'"'
+');" class="formgidin" >Bildirim</a></div>';
write the definition of the function then only it will remove the error "getBina is not defined".
You can write the function globally or you can write function locally.
In my javascript file im making dynamic call to a common function(more than one time) with different parameter value.
following is the code. edit question is the function and question id is the value return from database it will be different for each question. but once i created this im not getting the correct parameter value. edit question function contain the latest questionId for all the call.
questionHTML = <div class="surveyQuestionBlock questionBorder" ><div class="questionOpts"><ul >'
+'<li><a onclick="editQuestion(questionId)">'
+'Edit Question </a></li>'
questionHTML.show();
thanks in advance
Try:
questionHTML =
'<div class="surveyQuestionBlock questionBorder">' +
'<div class="questionOpts">' +
'<ul>' +
'<li>' +
'<a onclick="editQuestion(\'' + questionId + '\')">' +
'Edit Question' +
'</a>' +
'</li>' +
'</ul>' +
'</div>' +
'</div>';
In other words, evaluating the current value of questionId and place it directly in the function call.
First of all thanks for reading. I have a problem with jQuery. I am trying to get some data with AJAX and put the result on page with dynamically created div. This works perfect. The problem occurs when I try to select the created div and do something with it
$('.myNewDiv').css('border', '2px solid #000080');
It gives me error in jQuery library
In Chrome debugger it is "Uncaught TypeError: Cannot read property 'slice' of undefined" on line 2234
And in Firebug under firefox "Array.prototype is undefined Line 3324"
I have no idea what is the problem so i'd be grateful for any information
The whole function code:
function AddNextDiv(number) {
var url2 = '<%= ResolveUrl("~/Translate/GetLineDetails") %>';
$.getJSON(url2, { textLineID: LinesIDs[number], TranslatedSubsID: '<%= Html.Encode(Model.OutputSubs.SubsID) %>' }, function (result) {
if (result == "Already in Database") return false;
var myObject1 = JSON.parse(result);
$("#MainField").append("<div class=\"TextLineDiv\">This is line number " + myObject1.LineNumber + " of 423<br/>" + myObject1.TextValue + "<br/><input id=\"TranslationBox" + myObject1.LineNumber + "\" class=\"translationTextBox\" type=\"text\" size=\"20\" /><br/><div id=\"CheckBoxDiv" + myObject1.LineNumber + "\"><input name=\"" + myObject1.LineNumber + "\" class=\"addCheckBox\" onchange=\"HideDiv(this)\" type=\"checkbox\" /><br/><div class=\"NumberDiv\" title=\"" + myObject1.LineNumber + "\" onmouseover=\"CallRefresh(this)\" > This line was translated <div id=\"Translated" + myObject1.LineNumber + "\">" + myObject1.TimesTranslated + "</div> times.</div><br/><br/></div></div>");
$("div#MainField div.TextLineDiv").css('border', '2px solid #000080');
return true;
});
}
`
You can't select things that aren't added to the document yet. If you can restructure your code so that the div can be caught into a variable it would be easy. Otherwise you need to do something like add it to a hidden element then select it. (yuk!)
I suggest using jQuery's DOM tools rather than building everything as a big string of html.