We Keep Coding

Why sometimes title undefined on mobile version?

My html like this :
//for dekstop
<ul id="my-tab" class="hide-on-med-and-down">
...
<li class="content accent-4">
...
</li>
</ul>
//for mobile
<div id="my-tab-m" class="hide-on-large-only">
<div class="row my-m-container">
</div>
</div>
My javascript like this :
$('#my-tab>li').each(function () {
var href = $(this).find('a').attr('href');
var imgScr = $(this).find('img').attr('src');
var title
if(href === 'spec')
title = 'Spec'
else if(href === 'app')
title = 'App'
else if(href === 'mc')
title = 'Mc'
$('<a href="#" data-href="' + href + '"><div class="col s" >'+title+'<div class="my-m-content"><img src="' + imgScr+'" /></div></div></a >').appendTo('#my-tab-m .my-m-container');
});
The script executed, it works. If I check with inspect element on the console and select mobile version, the title show
But if I access it directly by mobile phone, the title is sometimes legible, but the title is sometimes undefined
There exist 3 tabs. tab 1 and tab 2 undefined. tab 3 appears. sometimes all appears. this problem only occurs on mobile phones
How can I solve this problem?

One easy way to change the title is: document.title = "Your Title";
This works on all devices and and I'm 99% sure it will work every time.

Dynamically creating unique link or button for each result of a database query result

Basically, a list of results from a database query is inserted into a ul. I want the user to be able to click the result they are looking for and then have one of two things happen:
A unique link is created (such as a php GET request) using the ID of
the selected result
A JS function is called via the onClick
attribute, and the ID of the clicked result is sent as an argument.
The code below is what I have done so far - minus the functionality that I listed above.
The list as it is in the HTML:
<ul data-role="listview" id="treesUL" data-inset="true" style="visibility: hidden">
<li id="treesLI">
<div class="resultNames">
<span class="donorName">Donor</span>
for
<span class="honoreeName">Honoree</span>
</div>
<div class="resultInfo">
<span class="treeName">common</span>
on:
<span class="donationDate">Date</span>
</div>
<div class="resultDedication">
<span class="dedicationText">Dedication</span>
</div>
</li>
</ul>
The javascript that edits the list, based on the results of the query which is stored in the myTrees array. This function is called via a XMLHttpRequest object.
function showTreeContent()
{
if (requestObj.readyState == 4) //Request completed
{
//Retrieve the JSON encoded array, which is stored at index-key: media
var text = requestObj.responseText;
//alert(text);
var myTrees = jQuery.parseJSON(text).media;
$('#treesUL').text('');
//Alert the number of rows, for testing purposes
alert(myTrees.length + " results.");
//Loop through the JSON array, and add each element to a <li>, which is then added to the <ul>
for(var i = 0; i < myTrees.length; i++)
{
var tree = myTrees[i];
var li =$('#treesLI').clone();
li.removeAttr('id');
li.appendTo('#treesUL');
//li.find('.treeLink').setAttribute("href", "somelink url");
li.find('.donorName').text(tree['donor']);
li.find('.honoreeName').text(tree['honoree']);
li.find('.dedicationText').text("'" + tree['dedication'] + "'");
if (tree['common'] != '')
li.find('.treeName').text(tree['common']);
else
li.find('.treeName').text("Unknown Species");
li.find('.donationDate').text(tree['date']);
li.data('treeID','tree'+i);
}
}
}
I tried surrounding the contents of the li tag with an a tag, and then editing the href of the a tag, but I was unable to get that to work. I'm using jQuery Mobile for this project also. Let me know if you need any more information - any help is greatly appreciated!

First thing that I see strange is that you are calling $('#treesUL').text(''); that deletes the contents of the ul and than in the loop you request $('#treesLI') which was deleted above.
What i would do is create the HTML as a string and append it to the ul.
Example.
var html = '';
for(var i = 0, length = myTrees.length; i < length; ++i)
{
var tree = myTrees[i];
html += '<li class="treesLI" onClick="somefunction('+ tree.id+')">';
html += '<div class="resultNames"><span class="donorName">' + tree.donor + '</span>';
html += 'for <span class="honoreeName">'+ tree.honoree + '</span></div>';
html +='</li>';
$('#treesUL').append(html);
}
As you can see i added an onClick handler that calls a function that receives a parameter.
You can use that onClick function to make a GET request with $.axaj()
If you don't want to use onClick you can do:
$('#treesUL li').click(function(event){
});
Some other observations:
You can access the properties of an object using the . like this tree.dedication.
You should do your for like this for(var i = 0, length = myTrees.length; i < length; ++i)
it is 2 times faster in IE8

Checkbox text not visible

I have looked for possible roots of my issue but have been unable to do so.
I have some java Script that dynamically creates a list of check boxes. Some have text other have anchor links with text inside that.
It looks like this:
createCheckbox: function (checkBoxDiv, sensorName, sensorId, checked, makeHyperLink, guid) {
var liElement = document.createElement("li");
var checkBoxElement = document.createElement("input");
checkBoxElement.setType = "checkbox";
checkBoxElement.name = "sensorName";
checkBoxElement.id = "check" + sensorId;
checkBoxElement.setAttribute("type", "checkbox");
checkBoxElement.setAttribute("runat", "server");
checkBoxElement.setAttribute("onchange", "OnCheckedChangedMethod('" + sensorName + "')");
if (checked)
checkBoxElement.setAttribute("checked", "true");
if (makeHyperLink) {
var linkElement = document.createElement("a");
linkElement.setAttribute("style", "color:white;");
linkElement.setAttribute("href", "#");
linkElement.id = "link" + sensorId;
linkElement.text = "" + sensorName;
checkBoxElement.appendChild(linkElement);
} else {
checkBoxElement.setAttribute("text", sensorName);
}
liElement.appendChild(checkBoxElement);
this.checkboxes++;
return liElement;
}
This returns the element to be appended to my div.
It creates this list correctly and the HTML looks like this:
<ol id="sensorList"><li>
Sensors
</li><li><input id="check1" type="checkbox" name="sensorName" runat="server" onchange="OnCheckedChangedMethod('0-Predator Simulator (FLIR)')" checked="true"><a id="link1" style="color:white;" href="#">
Item1
</a></input></li><li><input id="check2" type="checkbox" name="sensorName" runat="server" onchange="OnCheckedChangedMethod('a')"><a id="link2" style="color:white;" href="#">
Item2
</a></input></li>
</ol>
The webpage looks like this:
I have tried removing all of my css incase it was something to do with that and nesting the text in other tags: <p> , <h1>but nothing changes.
Any thoughts on what the root of this problem might be. I am still fairly new to web programming.
Thanks

input element can't have children. So this:
checkBoxElement.appendChild(linkElement);
is incorrect.
Instead use label element that contains both checkbox and link:
var labelElement = document.createElement("label");
labelElement.appendChild(checkBoxElement);
labelElement.appendChild(linkElement);
Edit:
You can't click on link element to change checked state of the checkbox. because it refreshes the page (with href='#'). What do you want to do with link element?

Input data from table of arrays into list

I've got a list and I want to input a data from it by the table of arrays and I don't have idea how .
Here is the code and my attempts:
HTML:
<body>
<div class="top-menu style4"style="margin-top:300px;">
<ul class="top-menu-main">
<li>
<ul class="top-submenu">
<li><a class="up_items"style="padding-top:5px;">SEMINARS</a></li>
<li><a class="up_items"style="padding-top:5px;">STATUTES</a></li>
<li><a class="up_items"style="padding-top:5px;">RÉSUMÉ</a></li>
<li><a class="up_items"style="padding-top:5px;">ADR & PPCs</a></li>
<li><a class="up_items"style="padding-top:5px;">PREPARATIONS</a></li>
<li><a class="up_items"style="padding-top:5px;">MUSINGS</a></li>
<li><a class="up_items"style="padding-top:5px;">GLOSSARY</a></li>
<li><a class="up_items"style="padding-top:5px;">AWARDS</a></li>
</ul>
<a style="width:100px;text-align:center;text-align:center;font-family:arial;font-size:0.7em;font-weight:bold;border-top:none;">START</a>
</li>
</ul>
</div>
</body>
I've tried to do something with this script but what i got is a simple list without any slide, css elements and so on which i included in my code ..
JS:
<script type="text/javascript">
function makeMenu() {
var items = ['Start','Trident','Internet Explorer 4.0','Win 95+','5','5'];
var str = '<ul><li>';
str += items.join('</li><li>');
str += '</li></ul>';
document.getElementById('jMenu0').innerHTML = str;
}
window.onload = function() { makeMenu(); }
$(document).ready(function(){
$("#jMenu").jMenu();
})
</script>

There are some mistakes in your code.
Use the same jQuery ready function to load menu.
Use .class selector or #id to select the menu.
Don't include two times the UL tag.
Here is your code working:
function makeMenu() {
var items = ['Start','Trident','Internet Explorer 4.0','Win 95+','5','5'];
var str = '<li>';
str += items.join('</li><li>');
str += '</li>';
$('.top-menu-main').html(str);
}
$(document).ready(function(){
makeMenu();
$(".top-menu-main").menu();
});
You can check it here:
http://jsbin.com/irasof/1/edit

You haven't assigned an id to your unordered list.
the call
$("#jMenu").jMenu();
expects to find an element with the id jMenu.
Try adding that id in your js function
var str = '<ul id\"jMenu\"><li>';
take a look at the docs of that plug-in
And the line
document.getElementById('jMenu0').innerHTML = str;
tries to add the generated HTML inside an element with the id jMenu0. The HTML code you are showing does not contain such an element. You need to add it first, maybe somthing like that will be enough
<div id="jMenu0" />

Replace element and on click return the old element

I have following function:
datum.on('change', function(){
var url = '<?php echo base_url() ?>admin/admin_tvprogram .tvprogram > *';
tvprogram.empty().load(url, {'datum':$(this).val()}, function(){
var izmeni = $(this).find('a');
izmeni.on('click', function(){
var sat = $(this).parent().find('.sat'),
sat_vrednost = sat.text(),
naziv = $(this).parent().find('.naziv'),
naziv_vrednost = naziv.text(),
vrati = $(this).parent().append('<span class=vrati>Vrati</span>');
var novi_sat = sat.replaceWith('<input type=text name=sat value=' + sat_vrednost + ' >' ),
novi_naziv = naziv.replaceWith('<input type=text name=naziv value=' + naziv_vrednost + ' >' );
});
});
});
Everything is working fine, but I need one more functionality. When a user click on vrati (new appended span element), elements sat and naziv need to return to original form. How can I do this?
When load function is activated I get following HTML:
<ul>
<li>
<span class="sat">18:00</span>
<span class="naziv">Opravka Traktora</span>
<a data-id="2">Izmeni</a>
</li>
</ul>
After izmeni is clicked I get following HTML:
<ul>
<li>
<input type="text" value="18:00" name="sat">
<input type="text" traktora="" value="Opravka" name="naziv">
<a data-id="2">Izmeni</a>
<span class="vrati">Vrati</span></li>
</ul>

You are saving the values of the elements right when the user clicks.
Probably need to save the values before doing the load and then the same code in the on-click will restore them.

Populate your list input tables from variables that you define, and then apply the j query .text action to your sat and naziv giving them the parameter of that variable again when vrati is clicked
//the function textvalueToggle gets called on document load assigning the values to sat and naziv. Then a click listener is attached to vrati to call that same function reassigning the values
$(document).ready(function() {
textvalueToggle();
$('#vrati').click(textvalueToggle);
});
function textvalueToggle() {
$('#sat').text('18:00');
$('#naziv').text('Opravka Traktora');
}