`"` replaced with `"` when loading page - jsf-2

I've stumbled on a little problem when i'm viewing my page where " gets replaced with ". My page looks like this:
$(document).ready(function() {
$("input[name$='case']").click(function() {
var test = $(this).val();
if(test == "daglig"){
$("div.desc").hide();
$("#daglig_div").show();
}else if(test == "veckovis"){
$("div.desc").hide();
$("#veckovis_div").show();
}else if(test == "manadsvis"){
$("div.desc").hide();
$("#manadsvis_div").show();
}
});
});
When i'm deploying the page the result is this:
$(document).ready(function() {
$("input[name$='case']").click(function() {
var test = $(this).val();
if(test == "daglig"){
$("div.desc").hide();
$("#daglig_div").show();
}else if(test == "veckovis"){
$("div.desc").hide();
$("#veckovis_div").show();
}else if(test == "manadsvis"){
$("div.desc").hide();
$("#manadsvis_div").show();
}
});
});​
And it's only this part of the page which gets this strange convertion. I've tried with different encodings, charsets, copying other quotes on the page which doesn't get replaced with ", replaced " with " and i still get the same error. Can someone please help me on this matter?
Thanks in advance, ClydeFrog

I "rewrote" the function again myself and it's working now. Apparently the old text had different charsets then my new text i wrote. Very strange bacause i converted the old text to "UTF-8" with notepad++, but obviously it didn't work... thanks anyway to everyone who took the time :)

Related

Unable to target ID after navigating back to first page from second page in jQuery Mobile Single Page Model

I am just beginning with jquery mobile but have experience in jquery and javascript and I seem to be experiencing difficulties with things being refreshed, not loaded, or loaded in the DOM.
Basically I have a 2 page document that have binded tap and change events to each. On both page 1 and page 2 a tap event calls the same function which is already loaded in the head of the document. I am not having issues with the function not being called yet my issue lies within the function and it appears to relate to the loaded DOM.
Here is the function:
function changeStatus(e) {
fstatus=$("#"+e).prop('title');
sID=$("#"+e).attr('rel');
if (fstatus == 'Pass') {
fstatus = 'Fail';
$("#studentColor_"+sID).css("background-color","#FCD1C5").css("border-color","#900");
$("#studentList"+sID+"_link").css("background-color","#FCD1C5");
} else if (fstatus == '') {
fstatus = 'Pass';
$("#studentColor_"+sID).css("background-color","#C5FCC5").css("border-color","#248703");
$("#studentList"+sID+"_link").css("background-color","#C5FCC5");
} else if (fstatus == 'Fail') {
fstatus = '';
$("#studentColor_"+sID).css("background-color","#FFF").css("border-color","#FFF");
$("#studentList"+sID+"_link").css("background-color","#FFF");
}
$("#studentList"+sID+"_link").prop("title",fstatus);
$("#studentColor_"+sID).prop("title",fstatus);
}
Upon entering page 1 for the first time the tap event fires as normal and all the css styles are changed correctly. Moving to page 2 the event fires however none of the css styles work, yet it sets the title correctly. Move back to page 1 and now it behaves as it did on page 2.
So from what I understand.. on initial page load of 1, page 2 is not in the DOM so $("#studentList"+sID+"_link") does not exist yet the function works completely fine. Upon moving to page 2 $("#studentList"+sID+"_link") does exist and is visible, and $("#studentColor_"+sID) which was loaded in page 1 is still in the DOM. (this is not a single page app)
Is this correct?
If the error is occurring because one of those elements don't exist anymore then wouldn't it make sense that the function would not work correctly even on the initial page load of page 1? (since the element on page 2 hasn't ever been loaded)
Also it works completely fine on a browser yet when put on mobile is when the styles stop working.
It seems that the only thing that is messing up in the function is the css() call. I hope my explanation makes sense as it baffles me..
Thanks for any help.
Additional info as requested:
It is 2 HTML documents. Both generated with a bit of php.
Here is how the elements are generated on page 1: (of course I cut out the sql calls etc)
while($row = mysql_fetch_array($result))
{
if ($row['passFail'] == '') {
$completionStatus='';
} else if ($row['passFail'] == 'P') {
$completionStatus='Pass';
} else if ($row['passFail'] == 'F') {
$completionStatus='Fail';
}
if ($completionStatus=='Pass') {
$bordercolor="#248703";
$backgroundcolor='#C5FCC5';
} else if ($completionStatus=='Fail') {
$bordercolor="#900";
$backgroundcolor='#FCD1C5';
} else if ($completionStatus == '') {
$bordercolor="#CCC";
$backgroundcolor='#FFF';
}
echo '<div class="draggable" style="text-align:center; width:50px; position:relative; font-size:.7em; top:'.$row['studentY'].'px; left:'.$row['studentX'].'px;" title="'.$completionStatus.'" rel="'.$row['ID'].'" id="student_'.$row['ID'].'"><div class="round shadow draggable_student" id="studentColor_'.$row['ID'].'" style="position: relative; background-color:'.$backgroundcolor.'; border:1px solid '.$bordercolor.'; margin-left:auto; margin-right:auto; margin-bottom:3px; width:40px; height:35px; padding:0px; font-weight:bold; text-align:center; padding-top:5px; vertical-align:middle; cursor:pointer;" title="'.$completionStatus.'"></div>'.$row[$_SESSION['student_identifier']].'</div>';
}
Here is how they are loaded into page 2:
while($row = mysql_fetch_array($result))
{
if ($row['passFail'] == '') {
$completionStatus='';
} else if ($row['passFail'] == 'P') {
$completionStatus='Pass';
} else if ($row['passFail'] == 'F') {
$completionStatus='Fail';
}
if ($completionStatus=='Pass') {
$bordercolor="#248703";
$backgroundcolor='background-color:#C5FCC5;';
} else if ($completionStatus=='Fail') {
$bordercolor="#900";
$backgroundcolor='background-color:#FCD1C5;';
} else if ($completionStatus == '') {
$bordercolor="#CCC";
$backgroundcolor='background-color:#FFF;';
}
if ($completionStatus == '') {
$readonly=' readonly';
} else {
$readonly='';
}
if ($row['asID']=='') {
$cc++;
$row['asID']=time()+$cc;
}
echo '<li><table cellpadding="0" cellspacing="0" width="100%"><tr><td class="student_infoLink" id="student'.$row['ID'].'_td" title="'.$completionStatus.'" rel="'.$row['ID'].'">'.$row['student_firstName'].' '.$row['student_lastName'].'</td><td align="right" width="10%"><input type="text" placeholder="Score" rel="'.$row['asID'].'" id="student'.$row['ID'].'_score" value="'.$row['score'].'" class="updateOnChange"'.$readonly.'><div style="padding:13px; text-align:center; display:none;"><img src="preloader.gif" width="56" height="21" border="0" /></div></td></tr></table>Edit Student</li>';
}
Please disregard all the inline styles as most will be removed once I get this fixed up.
Listeners being bound:
$(document).on('pageinit', function () {
$(function () {
function tapHandler(event) {
changeStatus($(this).attr("id"));
}
$(".student_infoLink").unbind("tap");
$(".draggable").unbind("tap");
$(".draggable").bind("tap", tapHandler);
$(".student_infoLink").bind("tap", tapHandler);
});
});
Workaround:
I am able to work around this issue with the following... by removing the call to the ID and searching off class. See below. I still would be appreciative of any help as to why the ID calls would not work. Much thanks to Omar for the help!
function changeStatus(e) {
fstatus=$(e).prop('title');
sID=$(e).attr('rel');
if (fstatus == 'Pass') {
fstatus = 'Fail';
$(e).find(".draggable_student").css("background-color","#FCD1C5").css("border-color","#900");
$("#studentList"+sID+"_link").css("background-color","#FCD1C5");
} else if (fstatus == '') {
fstatus = 'Pass';
$(e).find(".draggable_student").css("background-color","#C5FCC5").css("border-color","#248703");
$("#studentList"+sID+"_link").css("background-color","#C5FCC5");
} else if (fstatus == 'Fail') {
fstatus = '';
$(e).find(".draggable_student").css("background-color","#FFF").css("border-color","#FFF");
$("#studentList"+sID+"_link").css("background-color","#FFF");
}
$("#student"+sID+"_td").prop("title",fstatus);
$(e).prop("title",fstatus);
}
$(document).on('pageinit', function(e) {
console.log("pageinit is fired");
var pagecreated = e.target;
function tapHandler( event ){
changeStatus($(this));
}
$(".student_infoLink", pagecreated).unbind("tap");
$(".draggable", pagecreated).unbind("tap");
$(".draggable", pagecreated).bind("tap", tapHandler);
$(".student_infoLink", pagecreated).bind("tap", tapHandler);
});
I assume now that this works that the calling the ID was the issue... Any reasons why?
Quick, short answer... use classes instead of id when targeting an element. With the DOM loading multiple pages, selecting on an ID can get a bit whacky. See workaround above in edited post.

Jquery mobile: Detect if it is the user's first launch of the app

Hi Iam trying to detect if the user is launching my app for the first time with this code. But in the $(document).on('pageshow','#welcome-page', function(){ part, my variable firstlaunch is always undefined. Can you help me figure out what to do ?
Thanks
var firstlaunch;
$(function(firstlaunch) {
firstlaunch = parseInt(window.localStorage.getItem("firstlaunch"));
//store 0 for next time
if ( firstlaunch == null || typeof firstlaunch == 'undefined' || isNaN(firstlaunch) ) {
firstlaunch = 1;
window.localStorage.setItem("firstlaunch", 0);
}
});
$(document).on('pageshow','#welcome-page', function(){
console.log("firstlaunch pageshow #welcome-page = "+firstlaunch);
console.log("typeof firstlaunch pageshow #welcome-page = "+typeof firstlaunch);
if ( firstlaunch ==1 || typeof firstlaunch == 'undefined' || isNaN(firstlaunch) ){
//do things if first visit
} else if (firstlaunch == 0) {
//do things if not first visit
} else {
console.log('Error : firstlaunch ='+firstlaunch);
}
});
The localStorage.getItem() call will return null if it does not exist.
The simplest way to do this would be like this:
$(document).one('pageshow','#welcome-page', function(){
var noRunCount = (localStorage.getItem("runCount") == null);
if (noRunCount) {
// You know it's the first time this is run because
// the variable isn't even defined yet
localStorage.setItem("runCount", 1);
} else {
// The variable exists, so it must have been set by your app
localStorage.setItem("runCount", (localStorage.getItem("runCount") + 1));
}
}
One thing to note here is the use of $(document).one('pageshow', ) instead of $(document).on('pageshow', ). This makes the logic in this block only execute the first time the welcome page is loaded.
Thanks to you all.
I went with the solution of #ezanker because it was close to my code and simple.
Thank you again.
$(document).on("pageshow", "#welcome-page", function(){
alert(IsFirstLaunch());
});
function IsFirstLaunch(){
var fl = window.localStorage.getItem("firstlaunch");
if (fl && parseInt(fl) == 0){
return false;
} else {
window.localStorage.setItem("firstlaunch", "0");
return true;
}
}

Dart .onMouseOver

DivElement collectWoodHover = querySelector("#collectWood");
if (collectWoodHover.onMouseOver == true) {
querySelector("#collectWoodHover").style.display = "block";
} else {
querySelector("#collectWoodHover").style.display = "none";
}
Hello!
I was flicking through some of the stuff in the auto complete thing in Dart and found .onMouseOver.
I wonder if I am using it correctly because it doesn't seem to work. The div element is always hidden.
Thanks for your help in advance.
Try something like:
collectWoodHover.onMouseOver.listen( (event) {
print('onMouseOver!');
} );
onMouseOver is a stream. You can find more information how to use streams in Dart here.
onMouseOver is an event stream.
You use it like:
DivElement collectWoodHover = querySelector("#collectWood");
collectWoodHover.onMouseOver.listen((e) =>
e.target.style.display = "block";
}
collectWoodHover.onMouseOut.listen((e) =>
e.target.style.display = "none";
}
I have not actually tried this code. But you should get the idea.
I think you are not selecting the div correctly.
Try:
querySelector(collectWoodHover).style.display = "block";
Because it's a var as in sample, or:
querySelector("#onHover").style.display = "block";
if the div id is 'onHover' that should work

Use jQuery to check and see if div element is empty

Below is the code I'm using to place a blur event on a text box in my ASP MVC 3 view. The code works fine if #MailingState is empty, however it cannot tell if #channelName is empty.
For example, if #channelName is empty but #MailingState is not, then when I place a value in #MailingZip the getDrmTerritory Ajax call is fired off every time.
Here is the jQuery
$('#MailingZip').blur(function () {
if ($('#AlignmentM').is(':checked')) {
if ($('#MailingState').val() != "" && $('#channelName').html() != "") {
getDrmTerritory($('#MailingZip').val(), $('#MailingState').val(), $('#channelName').html());
}
}
});
and here is the HTML for the #channelName segment it is checking
<div id="channelName" class="M-display-field">
#*this will be updated via ajax from Market Segment *#
#Html.DisplayFor(model => model.Channel, new { style = "margin-left: 300px;" } )
</div>
The section mentioned in the comments is updated via another jQuery method that looks like this
function ChangeChannel() {
//this function called if Market Segment changes, to update the channel
var pendistcode = document.getElementById('Pendist');
if (pendistcode == null) alert('Error: Cannot find Market Segment control');
//alert('!pendistcode value is ' + pendistcode.value);
$.ajax({
type: 'POST',
url: '/AgentTransmission/GetChannel/',
data: { pendist: pendistcode.value },
success: function (data) {
// alert("success: " + data);
$('#channelName').html(data);
$('#Channel').val(data);
},
error: function (data) {
alert("failure to obtain Channel name");
}
});
CheckTerritory('channel');
} //end ChangeChannel
That jQuery method (ChangeChannel) appends text to the channelName div which, when rendered with a value in it, looks like this
Here is the HTML you get when you inspect the Life Sales from that picture
You can check if #channelName is empty or not like this:
if ( $('#channelName').is(':empty') )
and combine with your code like this:
if ($('#MailingState').val() != "" && !$('#channelName').is(':empty'))
I put in an alert statment to find out channelName's length and it came back with 35, so there must obviously be some white space that gets rendered each time. I had to change the statement to the following to trim out the whitespace and add the variable to the condition.
var channel = $.trim($('#channelName').html());
if ($('#MailingState').val() != "" && channel != "")

Changing the color of a selected link that is embedded in a table

I'm trying to use class names to change the color of a link after it has been selected, so that It will remain the new color, but only until another link is selected, and then it will change back.
I'm using this code that was posted by Martin Kool in this question:
<html>
<head>
<script>
document.onclick = function(evt) {
var el = window.event? event.srcElement : evt.target;
if (el && el.className == "unselected") {
el.className = "selected";
var siblings = el.parentNode.childNodes;
for (var i = 0, l = siblings.length; i < l; i++) {
var sib = siblings[i];
if (sib != el && sib.className == "selected")
sib.className = "unselected";
}
}
}
</script>
<style>
.selected { background: #f00; }
</style>
</head>
<body>
One
Two
Three
</body>
It works fine until I try to out the links in a table. Why is this? Be easy, I'm a beginner.
There is no error, the links are changing to the "selected" class, but when another link is selected, the old links are keeping the "selected" class instead of changing to "unselected". Basically, as far as I can tell, it's functioning like a vlink attribute, which is not what I'm going for.
And yes, the links are all in different cells, how would you suggest I change the code so that it works correctly?
OK, actually, I spoke too soon.
document.onclick = function(evt)
{
var el = window.event? event.srcElement : evt.target;
if (el && el.className == 'unselected')
{
var links = document.getElementsByTagName('a');
for (var i = links.length - 1; i >= 0; i--)
{
if (links[i].className == 'selected')
links[i].className = 'unselected';
}
el.className = 'selected';
}
return false;
}
This code you gave me works great, visually, it does exactly what I want it to do. However, It makes my links stop working... They change color, but dont link to anything, and then when I remove the script, they work fine. What am I doing wrong/what do I have to change to make this work?
Also, I want to do the same thing somewhere else in my website, where the links are all in one <div> tag, separated by <p> tags. How can I make this work?
You're looping through the siblings. If the links are in separate <td>'s then they're no longer siblings.
You can loop through all the links like this:
document.onclick = function(evt)
{
var el = window.event? event.srcElement : evt.target;
if (el && el.className == 'unselected')
{
var links = document.getElementsByTagName('a');
for (var i = links.length - 1; i >= 0; i--)
{
if (links[i].className == 'selected')
links[i].className = 'unselected';
}
el.className = 'selected';
}
return false;
}
I've also added a return false; at the end of the function to stop you going to '#'
Is there an error or is there just nothing happening? A good first step if you are a javascript beginner is to use a tool like Firebug so you see detailed error messages, and you can add in console.log statements to see what's going on while you run your code.
By ‘in tables’ do you mean putting each link in its own cell? Because that would make this line:
var siblings = el.parentNode.childNodes;
fail to select other links outside of the cell. You'd have to find another way to signal which element is the link container.

Resources