set value of global variable by clicking event
Hi guys.
I'm trying to build a digital program of an event.
Basicly I have a list of items which show some inital information. The information is loaded from a xml-file.
Every list item has an ID.
The idea is whenever a list item is clicked its ID should be stored in the global variable. So I can access the ID on a detail page and load further information of that entry.
The code I've come up so far is:
- var WIDGET = {
container: "#programholder",
container2: "#programholder2",
url: "program.xml",
load: function(){
_WIDGET = this;
_WIDGET.klick;
$.ajax({
type: "get",
url: WIDGET.url,
dataType: "xml",
success: function(xml){
$(xml).find('vortrag').each(function(){
var node = $(this);
var id = node.attr("id");
var titel = node.find('titel').text();
var sex = node.find('sex').text();
var vorname = node.find("vorname").text();
var nachname = node.find("nachname").text();
var suffix = node.find("suffix").text();
var vortrag_titel = node.find("vortrag_titel").text();
var beginn = node.find("beginn").text();
var ende = node.find("ende").text();
var zusatz = node.find("zusatzinfo").text();
_WIDGET.display({'id':id,'titel':titel,'vorname':vorname,'nachname':nachname,'suffix':suffix,'vortrag_titel':vortrag_titel,'beginn':beginn,'ende':ende,'zusatzinfo':zusatz,'sex':sex});
_WIDGET.dialog({'id':id,'titel':titel,'vorname':vorname,'nachname':nachname,'suffix':suffix,'vortrag_titel':vortrag_titel,'beginn':beginn,'ende':ende,'zusatzinfo':zusatz,'sex':sex});
});
} /* End of success */
}); /* End of ajax */
}, /* End of load */
display: function(vortrag){ /* start of display */
if(vortrag.id == 1){
$("<li></li>")
.attr('role','option')
.attr("class", "ui-btn ui-btn-up-c ui-btn-icon-right ui-li")
.html("<div class='ui-btn-inner'><div class='ui-btn-text'><p class='hidden'>"+vortrag.id+"</p><p class='ui-li-aside'>Beginn um "+vortrag.beginn+"</p><a href='#dialog' rel='dialog'></a><h3>"+vortrag.vortrag_titel+"</h3><p>"+vortrag.titel+" "+vortrag.vorname+" "+vortrag.nachname+" "+vortrag.suffix+"</p></div><span class='ui-icon ui-icon-arrow-r'></span></div>")
.load(function(){
$(this).show();
})
.appendTo(this.container);
} /* End of if */
else {
$("<li></li>")
.attr('role','option')
.attr("class", "ui-btn ui-btn-up-c ui-btn-icon-right ui-li")
.html("<div class='ui-btn-inner'><div class='ui-btn-text'><p class='hidden'>"+vortrag.id+"</p><p class='ui-li-aside'>Beginn um "+vortrag.beginn+"</p><a href='#dialog' rel='dialog'></a><h3>"+vortrag.vortrag_titel+"</h3><p>"+vortrag.titel+" "+vortrag.vorname+" "+vortrag.nachname+" "+vortrag.suffix+"</p></div><span class='ui-icon ui-icon-arrow-r'></span></div>")
.load(function(){
$(this).show();
})
.appendTo(this.container2);
} /* End of else */
}, /* End of display */
dialog: function(vortrag){ /* Start of dialog */
_WIDGET.clicker(WIDGET.klick);
if(vortrag.id == WIDGET.klick){
$("<span></span")
.html("<h2>"+vortrag.vortrag_titel+"</h2><p>"+vortrag.sex+" "+vortrag.titel+" "+vortrag.vorname+" "+vortrag.nachname+" "+vortrag.suffix+"</p>")
.appendTo("#infohere");
}
else {
}
}, /* End of dialog */
_WIDGET.klick should be the global variable. The code works fine when I set the value of the global variable manually but that's obviously not what I want.
How can I achieve this behavior?
Thanks you, guys and please excuse my English.