I'm using mmenu library in jquery mobile, when parsing an xml and append the result to:
<nav></nav>
the sub-menus don't work correctly.
here is my js:
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "MainMenuAsXml.xml",
dataType: "xml",
cache: false,
success: function(xml){
var list_elem = $("<ul></ul>");
$(xml).find('module').each(function(){
var module = $(this);
var moduleLabel = module.attr("text");
var directories_list = $("<li class='Selected'></li>").appendTo(list_elem);
module.find("directory").each(function(){
var directory = $(this);
var directoryLabel = directory.attr("text");
var directory_elem = $("<li></li>").append("<span>" + directoryLabel + "</span>").appendTo(directories_list);
var entries_list = $("<ul></ul>").appendTo(directory_elem);
directory.find("entries").each(function(){
var entries = $(this);
var linkName = entries.attr("text");
var myLink = entries.attr("link");
$('<li>' + linkName + '</li>' ).appendTo(entries_list);
});
});
});
$("#menu-left").append(list_elem));
buildMenu();
},
error: function() {
alert("An error occurred while processing XML file.");
}
});
});
</script>
I'm sure that the parsing result is correct but I think there is an error using the function.
and here is the output
Related
This is driving me insane. My code is working fine in Safari, Chrome and Firefox, but for some reason Internet Explorer refuses to output it.
My code is:
function loaditem() {
$('.html').click(function (e) {
var id = $(this).attr('id');
var datakey = id.substring(id.indexOf('-') + 1, id.length);
var divpointx = id.substring(id.indexOf('-') + 1, id.length);
var divpoint = $(this).parent().attr('id');
var resultpoint = "#result-" + divpoint;
var ip = new Object();
ip.session_id = "312fdfwf1343r";
var c_id = JSON.stringify(ip);
var module = "module1";
$.ajax({
type: "POST",
url: "url",
data: {
"c_id": divpoint
},
cache: false,
success: function (msg) {
var obj = JSON.parse(msg);
var result = ""
$.each(obj, function () {
result = result + "<p>TEST</p>";
});
result = result + ""
$("#result-" + id.substring(id.indexOf('-') + 1, id.length)).empty().html(result);
}
});
});
};
Does anyone know why the code isn't working? i'd be eternally grateful for any help. Thanks.
i am trying load file from directory \ in backbone.js but it is not display the text could you please tell where I am doing wrong ?
here is my code
fiddle :
http://jsfiddle.net/JQu5Q/20/
$(document).ready(function(){
var ContactManager = new Marionette.Application();
ContactManager.addRegions({
mainRegion:"#contend"
})
ContactManager.on("start", function(){
console.log("ContactManager has started!");
var routers = new R({app: ContactManager})
});
ContactManager.start();
})
function render(tmpl_name, tmpl_data) {
if ( !render.tmpl_cache ) {
render.tmpl_cache = {};
}
if ( ! render.tmpl_cache[tmpl_name] ) {
var tmpl_dir = '/root/template';
var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';
var tmpl_string;
$.ajax({
url: tmpl_url,
method: 'GET',
async: false,
success: function(data) {
tmpl_string = data;
}
});
render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
}
return render.tmpl_cache[tmpl_name](tmpl_data);
}
Getting error: Uncaught ReferenceError: render is not defined
firstpage.html:1 Uncaught SyntaxError: Unexpected token <
I already defined the function
I have multiple xml files that I am trying to parse using JQuery. So far, I've only found success by parsing each file individually. I'm new at this and my code is very long and repetitive. I'd appreciate any help scaling it down. Here is my js:
$.ajax({
type: "GET",
url: "docs/doc1.xml",
dataType: "xml",
success: parseXml1
});
$.ajax({
type: "GET",
url: "docs/doc2.xml",
dataType: "xml",
success: parseXml2
});
$.ajax({
type: "GET",
url: "docs/doc3.xml",
dataType: "xml",
success: parseXml3
});
function parseXml1(xml){
var gen = $(xml).find("subsystem").eq(0);
var title = gen.find("title").text();
var text = gen.find("text").text();
$("#Title01").html(title);
$("#Text01").html(text);
};
function parseXml2(xml){
var gen = $(xml).find("subsystem").eq(0);
var title = gen.find("title").text();
var text = gen.find("text").text();
$("#Title02").html(title);
$("#Text02").html(text);
var sys = $(xml).find("subsystem").eq(1);
var title = sys.find("title").text();
var text = sys.find("text").text();
$("#Title02-1").html(title);
$("#Text02-1").html(text);
};
function parseXml3(xml){
var gen = $(xml).find("subsystem").eq(0);
var title = gen.find("title").text();
var text = gen.find("text").text();
$("#Title03").html(title);
$("#Text03").html(text);
var sys = $(xml).find("subsystem").eq(1);
var title = sys.find("title").text();
var text = sys.find("text").text();
$("#Title03-1").html(title);
$("#Text03-1").html(text);
};
And my xml is set up as follows:
<root>
<subsystem>This is information 1</subsystem>
<subsystem>This is information 2</subsystem>
</root>
So I have multiple nodes with no attributes that I am trying to access one by one within each xml file. Then, I am trying to put that text into a div on my HTML page. There has to be a better way to do this.
Make it a function call
function parseFile( path, titleId, textId) {
function parseXml(xml){
var subSystems = $(xml).find("subsystem");
var gen = subSystems.eq(0);
var title = gen.find("title").text();
var text = gen.find("text").text();
$("#" + titleId).html(title);
$("#" + textId).html(text);
if ( subSystems.length===2 ) {
var sys = subSystems.eq(1);
var title = sys.find("title").text();
var text = sys.find("text").text();
$("#" + titleId + "-1").html(title);
$("#" + textId + "-1").html(text);
}
};
$.ajax({
type: "GET",
url: path,
dataType: "xml",
success: parseXml
});
}
parseFile("docs/doc1.xml", "Title01", "Text01");
parseFile("docs/doc2.xml", "Title02", "Text02");
parseFile("docs/doc3.xml", "Title03", "Text03");
and you can make it smaller, by getting rid of that if check and doing a loop
function parseFile( path, titleId, textId) {
function parseXml(xml){
$(xml).find("subsystem").each(
function(ind) {
var gen = jQuery(this);
var title = gen.find("title").text();
var text = gen.find("text").text();
var ext = ind===0 ? "" : "-" + ind;
$("#" + titleId + ext).html(title);
$("#" + textId + ext).html(text);
}
);
};
$.ajax({
type: "GET",
url: path,
dataType: "xml",
success: parseXml
});
}
parseFile("docs/doc1.xml", "Title01", "Text01");
parseFile("docs/doc2.xml", "Title02", "Text02");
parseFile("docs/doc3.xml", "Title03", "Text03");
I am developing a html application for Android and I am trying to load images in a list view. Data specific to list items is being served by multiple xml files. I am using ajax to load xml files and populate the list items. Problem I am facing here is that there are 164 list items. Hence, 164 images and 10 xml files to load. my loader function exhausts after two iterations. It does read the xml files but it's unable to dynamically create list items and populate them with images after two iterations. I believe it's due to stack limitations. I can't think of alternate solution. If somebody could suggest an alternate solution that will be highly appreciated. Below is my loader function. It's a recursive function:
function loadChannels() {
$.ajax({
type: "GET",
url: curURL,
dataType: "xml",
error: function(){ console.log('Error Loading Channel XML'); },
success: function(nXml) {
var noOfItems = parseInt($($(nXml).find('total_items')[0]).text(), 10);
var startIdx = parseInt($($(nXml).find('item_startidx')[0]).text(), 10);
var allItems = $(nXml).find('item');
$(allItems).each(function() {
var obj = $("<li><span id='cont-thumb'></span><span id='cont-name'></span></li>");
$("#content-scroller ul").append($(obj));
var imgURL = $($(this).find('item_image')[0]).text();
var contThumb = $(obj).children()[0];
$(contThumb).css("background-image", 'url('+imgURL+')');
var name = $($(this).find('name')[0]).text();
var contName = $(obj).children()[1];
$(contName).text(name).css('text-align', 'center');
var url = $($(this).find('link')[0]).text();
$(obj).data('item_link', url);
$(obj).bind('click', onJPContSelected);
});
if(startIdx+allItems.length < noOfItems){
var newIdx = new Number(startIdx+allItems.length);
var tokens = curURL.split("/");
tokens[tokens.length-2] = newIdx.toString(10);
curURL = "http:/";
for(var i=2; i<tokens.length; i++)
curURL = curURL + "/" + tokens[i];
loadChannels();
}
}
});
}
try to remove the recursion with an outer loop - something like that:
function loadChannels(){
var stopFlag = false;
// request the pages one after another till done
while(!stopFlag)
{
$.ajax({
type: "GET",
url: curURL,
dataType: "xml",
error: function(){
console.log('Error Loading Channel XML');
errorFlaf = true;
},
success: function(nXml) {
var noOfItems = parseInt($($(nXml).find('total_items')[0]).text(), 10);
var startIdx = parseInt($($(nXml).find('item_startidx')[0]).text(), 10);
var allItems = $(nXml).find('item');
$(allItems).each(function() {
var obj = $("<li><span id='cont-thumb'></span><span id='cont-name'></span></li>");
$("#content-scroller ul").append($(obj));
var imgURL = $($(this).find('item_image')[0]).text();
var contThumb = $(obj).children()[0];
$(contThumb).css("background-image", 'url('+imgURL+')');
var name = $($(this).find('name')[0]).text();
var contName = $(obj).children()[1];
$(contName).text(name).css('text-align', 'center');
var url = $($(this).find('link')[0]).text();
$(obj).data('item_link', url);
$(obj).bind('click', onJPContSelected);
});
if(startIdx+allItems.length < noOfItems){
var newIdx = new Number(startIdx+allItems.length);
var tokens = curURL.split("/");
tokens[tokens.length-2] = newIdx.toString(10);
curURL = "http:/";
for(var i=2; i<tokens.length; i++)
curURL = curURL + "/" + tokens[i];
// lets disable the recursion
// loadChannels();
}
else {
stopFlag = true;
}
}
});
}
}
I want to move "data" variable to out of success function for other operation.
$("a[class=note]").click(function( evt ){
var note = $(this).attr("value");
var preid = $(this).attr("id");
$.ajax({
type: 'GET',
url: 'style/ajax.php',
data: 'do=note&value=' + note + '&preid=' + preid,
success: function(data)
{
alert(data);
}
});
});
For example php have Global pharase..
global var(which is the worse solution, but this is what you asked for):
$("a.note").click(function( evt ){
var note = $(this).attr("value");
var preid = $(this).attr("id");
$.ajax({
type: 'GET',
url: 'style/ajax.php',
data: 'do=note&value=' + note + '&preid=' + preid,
success: function(data)
{
window.data = data;
alert(data);
}
});
});
global variable are dangerous, Maybe variable outside the success scope is enough?
Var outside the success callback:
$("a.note").click(function( evt ){
var note = $(this).attr("value");
var preid = $(this).attr("id");
var dataFromServer = null;
$.ajax({
type: 'GET',
url: 'style/ajax.php',
data: 'do=note&value=' + note + '&preid=' + preid,
success: function(data)
{
dataFromServer = data;
alert(data);
}
});
});
Last option is to have a hidden input that will store the data;
success: function(data)
{
$('#hiddenFieldId').val(data);
alert(data);
}
Things to notice:
I changed your selector from a[class=note] to a.note which is better.
success is a callback which means it will not be fired until the response reach the client, until then your global\outside var\hidden input value will be null. if you don't want the ajax to be asynchronous you can define it in the options like this:
$.ajax({
async: false, // <---
type: 'GET',
url: 'style/ajax.php',
data: 'do=note&value=' + note + '&preid=' + preid,
success: function(data)
{
dataFromServer = data;
alert(data);
}
});
$("a[class=note]").click(function( evt ){
var note = $(this).attr("value");
var preid = $(this).attr("id");
$.ajax({
type: 'GET',
url: 'style/ajax.php',
data: 'do=note&value=' + note + '&preid=' + preid,
success: function(data)
{
window.data = data;
}
});
});
Of course you can't use it until the callback fires.
Define var data = null; above all your code, that would be global variable. After that, rename argument for process function and in function body window.data = response;.
EDIT
You can define function to trigger data changes, for example:
var data = null;
function setGlobal(v) {
window.data = v;
alert(window.data);
}
$("a[class=note]").click(function( evt ){
var note = $(this).attr("value");
var preid = $(this).attr("id");
$.ajax({
type: 'GET',
url: 'style/ajax.php',
data: 'do=note&value=' + note + '&preid=' + preid,
success: function(data){
setGlobal(data);
}
});
});
Try it...