On paper this paper this seems like a very simple operation, but for some reason Javascript does not seem to like it. Basically I have the following code:
var news = "<b>" + place_name + ", " + county + ""<img id = 'centre' src=" + picture + ">" + "</b><ul><br>";
The general idea is that picture is a variable that will be filled later via:
news.picture = entry2.picture;
which is a link to provide to the img source. However, when I do:
console.log(news.picture);
The variable remains undefined. Is this the correct way to go about things?
That's not the way you are supposed to do that. You have to have your variables set and then you can construct a string like that.
What you need now, is basically a function, like this:
var createNews = function(place_name,county,picture) {
return "<b>" + place_name + ", " + county + "<img id = 'centre' src=" + picture + ">" + "</b><ul><br>";
}
var news = createNews("Place","county","pic.jpg");
console.log(news);
Or you can do it like this, if you prefer:
var createNews = function(obj) {
return "<b>" + obj.place_name + ", " + obj.county + "<img id = 'centre' src=" + obj.picture + ">" + "</b><ul><br>";
}
var news = {
place_name : "Someplace",
county : "Somewhere",
picture : "foo.png"
};
var newsItem = createNews(news);
console.log(newsItem);
news is a variable made out of strings and variables.
So you cant use news.picture.
Though you can make the variable a function object.
var news = function() }
this.picture = "something";
this.getString = function() {
return this.picture+"some string";
};
};
Then you can get and set the picture variable inside news with news.picture and get the string with news.getString().
I am having a problem when attempting to echo data in a php file to mobile Safari in iOS 7.1.2. Here is the php code:
function swapFlights()
{
var url;
redirect = 1;
airline = <?php echo 'PDT'; ?>;
url = "swap.php?date_one=" + date1 + "&flight_number_one=" + flight1 + "&dep_station_one=" + city1 + "&date_two=" + date2 + "&flight_number_two=" + flight2 + "&dep_station_two=" + city2 + "&redirect=" + redirect + "&airline=" + airline;
window.location.href = url;
}
In mobile Safari on iPhone 5S, the output is the following:
function swapFlights()
{
var url;
redirect = 1;
airline =
2cc1
PDT;
url = "swap.php?date_one=" + date1 + "&flight_number_one=" + flight1 + "&dep_station_one=" + city1 + "&date_two=" + date2 + "&flight_number_two=" + flight2 + "&dep_station_two=" + city2 + "&redirect=" + redirect + "&airline=" + airline;
window.location.href = url;
}
The seemingly random "2cc1" is interjected, and I cannot for the life of me figure out why. It causes a SyntaxError in the parsing of the JavaScript, rendering all of the JavaScript on the page unusable. In every other browser I've tried (desktop Safari, Firefox), the code is output correctly as one would expect:
function swapFlights()
{
var url;
redirect = 1;
airline = PDT;
url = "swap.php?date_one=" + date1 + "&flight_number_one=" + flight1 + "&dep_station_one=" + city1 + "&date_two=" + date2 + "&flight_number_two=" + flight2 + "&dep_station_two=" + city2 + "&redirect=" + redirect + "&airline=" + airline;
window.location.href = url;
}
Any ideas, or is this more likely a bug in mobile Safari itself? I've searched all over the internet, but can't seem to find any other instances of this problem.
Changing the php to:
redirect = 1;
<?php echo 'airline = PDT'; ?>;
results in the unknown characters being slightly different, and appearing earlier in the output:
redirect = 1;
2ccb
airline = PDT;
I should have specified that my goal is the replace the 'PDT' with the string variable $airline. I changed the variable to the literal 'PDT' thinking I may have had a problem with the datatype of the variable, but that wasn't the case.
I'm having problems with my script and i can't see the problem with it myself:
$("#mainsub").append(newRow + "<div class='showMore' onclick='document.dispatchEvent(expand, { 'postId': " + pf.id + " })'>Show More</div></div>");
My webkit debugger is saying: "Uncaught SyntaxError: Unexpected token ;" when i click on the element.
has anyone run into this before? is there a problem with the line of code?
EDIT:** newRow looks like this:
var newRow = "<div id=" + pf.id + ">"+rowContents;
rowContents is:
rowContents += "<div class='"+tagName+"'>"+tag.text()+"</div>";
tag name is just from some xml i am parsing.
Another edit: I'm just going to put the whole function in just in case this is helpful
pf.parseResults = function(){
$("#mainsub").empty();
var $xml = $(pf.xml);
var $query = $xml.find('query_result').children().each(function() {
var row = $(this);
var rowContents = "";
row.children().each(function() {
var tag = $(this);
var tagName = tag[0].tagName;
if(tagName != "ID"){
rowContents += "<div class='"+tagName+"'>"+tag.text()+"</div>";
}
if(tagName === "ID"){
pf.id = tag.text();
}
});
var newRow = "<div id=" + pf.id + ">" + rowContents;
$("#mainsub").append(newRow + "<div class='showMore' onclick='document.dispatchEvent(expand, { \'postId\': " + pf.id + " })'>Show More</div></div>");// this fires an event with data attached listing the id of the element the user tapped/**/
});
$("#mainsub").append("<div onclick='document.dispatchEvent(nextPage)'><p>Next</p></div>");// figure out how to not show next when there will not be another page
if(pf.getPage > 0){
$("#mainsub").append("<div onclick='document.dispatchEvent(previousPage)'><p>Previous</p></div>");// show go to previous as long at it will exist
}
};
When you nest quotes of the same type (single quotes in your case) you have to escape them like this:
$("#mainsub").append(newRow + "<div class='showMore' onclick='document.dispatchEvent(expand, { \'postId\': " + pf.id + " })'>Show More</div></div>");
As this line of code is quite long and I didn't wand to change too much, I'll point out that escaped quotes are in this expand, { \'postId\': " + pf.id + " } fragment.
var rows = [];
for (var id in topics) {
var topic = g_favoriteTopics[topics[id].id];
var $row = $("table#Favorites tr#topicTemplate").clone();
alert(topic.title);
$row.find("td.txtCol a").html(topic.title);
var href = commonVariables.formAction +
"?PARTITION_ID=" + commonVariables.partitionId +
"&CONFIGURATION=" + commonVariables.configurationId +
"&CMD=DFAQ&DFAQ_TOPIC_ID=" + topic.id +
"&DFAQ_TOPIC_TYPE=" + topic.type;
$row.find("td.txtCol a").attr("href", href);
$row.find("td.imgCol input").attr("topicId", topic.id);
rows.push(topic.title.toLowerCase() + "<<<>>><tr topicId=" + topic.id + ">" + $row.html() + "</tr>");
}
The alert window shows the proper topic title (name of the topic).However Iam presented with a Javascript error (title is null or not an object),after the alert.
It runs fine in FF and chrome
I am working on application to make it browser compatible. I have a jsp page which will call the Javascript functions for execution. Basically I am displaying a list of contents in my page for selection using a radio button. Here it goes:
JSP Page :
<script language="JavaScript">
loadcodes(10,'codesTable','#TheCodes',' ' ,'desc','<%=compositeDescTagName%>','<%=compositeDescFormName%>','<%=codeFormName%>','<%=codeIdFormName%>','document.resourceform.<%=Globals.ENFORCE_COMMENTS%>');
</script>.
The above function will reference to the following js page:
function loadcodes(depth,tableId,dataSrc,onclickfunc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
document.writeln("<TABLE height=100% id=PrimaryTable dataSrc='" + dataSrc + "' cellSpacing=0 cellPadding=0 border=0> <TBODY>");
writeNode(depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName);
document.writeln("</TBODY></TABLE>");
}
function writeNode(depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
if (depth <= 0)
return;
document.writeln("<TR onclick=\"toggle(this,'" + dataSrc + "','" + compositeDescTagName + "','" + compositeDescFormName + "','" + codeFormName + "','" + codeIdFormName + "','" + enforceCommentsFormName + "')\" class=tree_indent>");
document.writeln("<TD><IMG dataFld='image' id=Icon class=tree_node>");
document.writeln("<SPAN dataFld=" + descFld + " class=formtext></SPAN>");
document.writeln("<SPAN dataFld=haschildren id=HasChildren style='DISPLAY:none'></SPAN><SPAN dataFld=isleaf id=isleaf style='DISPLAY: none'></SPAN><SPAN dataFld=composite_desc id=composite_desc style='DISPLAY:none'></SPAN>");
document.writeln("<SPAN dataFld=composite_code id=composite_code style='DISPLAY:none'></SPAN>");
document.writeln("<SPAN dataFld=composite_id id=composite_id style='DISPLAY:none'></SPAN>");
document.writeln("<SPAN dataFld=comments_required id=comments_required style='DISPLAY:none'></SPAN>");
document.writeln("</TD></TR>");
document.writeln("<TR style='DISPLAY: none' class=tree_indent>");
document.writeln("<TD><!-- next level -->");
document.writeln("<TABLE class=tree_node id=node dataFld=node valign=top border=0 cellSpacing=1 cellPadding=1 >");
document.writeln("<TBODY>");
writeNode(--depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName);
document.writeln("</TBODY>");
document.writeln("</TABLE>");
document.writeln("</TD>");
document.writeln("</TR>");
}
var selectedCode;
function toggle(e,dataSrc,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
var nextRow;
var nextRow1;
nextRow = e.nextSibling;
hc = e.all.HasChildren;
var isleaf = e.all.isleaf;
if (nextRow.style.display == "none" && isleaf.innerText == "false")
{
nextRow.style.display = "";
e.all.Icon.src = "/edcs/images/minus.gif";
if (nextRow.all && nextRow.all[2] && !nextRow.all[2].dataSrc)
{
nextRow.all[2].dataSrc = dataSrc;
}
}
else if (isleaf.innerText == "true")
{
// reset the bullet on the one already selected
if (selectedCode && selectedCode.all && selectedCode.all.Icon)
selectedCode.all.Icon.src = "/edcs/images/bullet.gif";
e.all.Icon.src = "/edcs/images/right.gif";
re=/'/g;
var str = e.all.composite_desc.innerText.replace(re,"\\'");
eval(compositeDescTagName + ".innerText = '" + str + "'");
eval(compositeDescFormName + ".value = '" + str + "'");
eval(codeFormName + ".value = '" + e.all.composite_code.innerText + "'");
eval(codeIdFormName + ".value = '" + e.all.composite_id.innerText + "'");
commentsEnforced = eval(enforceCommentsFormName + ".value");
if (commentsEnforced == "false")
eval(enforceCommentsFormName + ".value = '" + e.all.comments_required.innerText + "'");
selectedCode = e;
}
else
{
nextRow.style.display = "none";
e.all.Icon.src = "/edcs/images/plus.gif";
}
}
This flow works well in IE browsers but not supported by other browsers. While searching I found the list of elements supported only by IE:
DataSrc
Datafld and also IMG datafld.
Is there any alternative for the above elements with browsers or how could the modifications made in the code so that it is browser compatible? Kindly help and also it would be turn out be a template for cross browser testing.
Cross-browser compatibility is one of the core benefits of using a library such as jQuery, MooTools, etc.
I would recommend one of these if cross-browser compatibility is your aim - as there are entire teams working on those projects.
Start with replacing usage of "all" and "eval" with document.getElementById.
All browsers support extensive debugging tools (i.e. FireBug for Firefox) - use them to see what fails.