XML/AJAX select box and results output
Hi
I am trying to write my first XML app and am having quite a bit of trouble. I'm not asking people to write my code for me here but I'd really appreciate it if you could at least point me in the right direction and tell me what approach I have to take please. I have a feeling that Ajax would be the best method.
Thank you.
**************************
So what I'd like to do is populate a select box with my xml list of CENTRES, when the user chooses one I would like to output the selected CENTRE and under it the relevant SUBCENTRE/S for it in a list so it would look something like this:
CENTRE: Accounts Payable:
> Buying
Here is some info
Here is the deadline date
> Selling
Here is some info
Here is the deadline date
So two questions really:
1) How do I populate my select box with the CENTRES?
2) How to I output the results from the choice?
**************************
So this is my xml file right? But I don't really know if it's right or where to go from here.
<?xml version='1.0'?>
<!DOCTYPE CENTRE [
<!ELEMENT CENTRE (SUBCENTRE+)>
<!ELEMENT SUBCENTRE (NAME,DEADLINE)>
<!ELEMENT NAME (#PCDATA)>
<!ELEMENT DEADLINE (#PCDATA)>
]>
<CENTRES>
<CENTRE>
<NAME>CENTRE 1</NAME>
<SUBCENTRES>
<SUBCENTRE>
<TITLE>SubCENTRE 1a</TITLE>
<DEADLINE>1st Jan</DEADLINE>
</SUBCENTRE>
<SUBCENTRE>
<TITLE>SubCENTRE 1b</TITLE>
<DEADLINE>1st March</DEADLINE>
</SUBCENTRE>
</SUBCENTRES>
</CENTRE>
<CENTRE>
<NAME>CENTRE 2</NAME>
<SUBCENTRES>
<SUBCENTRE>
<TITLE>SubCENTRE 2a</TITLE>
<DEADLINE> 1st Feb</DEADLINE>
</SUBCENTRE>
<SUBCENTRE>
<TITLE>SubCENTRE 2b</TITLE>
<DEADLINE>3rd Nov</DEADLINE>
</SUBCENTRE>
</SUBCENTRES>
</CENTRE>
</CENTRES>
I am trying to write my first XML app and am having quite a bit of trouble. I'm not asking people to write my code for me here but I'd really appreciate it if you could at least point me in the right direction and tell me what approach I have to take please. I have a feeling that Ajax would be the best method.
Thank you.
**************************
So what I'd like to do is populate a select box with my xml list of CENTRES, when the user chooses one I would like to output the selected CENTRE and under it the relevant SUBCENTRE/S for it in a list so it would look something like this:
CENTRE: Accounts Payable:
> Buying
Here is some info
Here is the deadline date
> Selling
Here is some info
Here is the deadline date
So two questions really:
1) How do I populate my select box with the CENTRES?
2) How to I output the results from the choice?
**************************
So this is my xml file right? But I don't really know if it's right or where to go from here.
<?xml version='1.0'?>
<!DOCTYPE CENTRE [
<!ELEMENT CENTRE (SUBCENTRE+)>
<!ELEMENT SUBCENTRE (NAME,DEADLINE)>
<!ELEMENT NAME (#PCDATA)>
<!ELEMENT DEADLINE (#PCDATA)>
]>
<CENTRES>
<CENTRE>
<NAME>CENTRE 1</NAME>
<SUBCENTRES>
<SUBCENTRE>
<TITLE>SubCENTRE 1a</TITLE>
<DEADLINE>1st Jan</DEADLINE>
</SUBCENTRE>
<SUBCENTRE>
<TITLE>SubCENTRE 1b</TITLE>
<DEADLINE>1st March</DEADLINE>
</SUBCENTRE>
</SUBCENTRES>
</CENTRE>
<CENTRE>
<NAME>CENTRE 2</NAME>
<SUBCENTRES>
<SUBCENTRE>
<TITLE>SubCENTRE 2a</TITLE>
<DEADLINE> 1st Feb</DEADLINE>
</SUBCENTRE>
<SUBCENTRE>
<TITLE>SubCENTRE 2b</TITLE>
<DEADLINE>3rd Nov</DEADLINE>
</SUBCENTRE>
</SUBCENTRES>
</CENTRE>
</CENTRES>
Last Comment
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thanks, that's nice and clear.
Here's what I have so far (with help from experts - see if you can spot the bits I did myself...). The select drop-down is working fine. And I realise I need an onchange event to trigger the next function to retrieve the relevand subdata. But that's where I've run aground again.
Thanks for your time and help on this.
**************************
//create select box from xml file centres.xml. All fine.
function createSelectBox() {
var xmlDoc = document.getElementById('x
var centres = xmlDoc.getElementsByTagNam
var sel = document.getElementById('c
for (var i=0;i<centres.length;i++) {
var val = centres[i].getElementsByTa
sel.options[sel.options.le
}
}
//PROBLEM FUNCTION: output subcentre/s for selected centre
function outputSubCentre(selectedCe
var xmlDoc = document.getElementById('x
//dodgy syntax - how do I retrieve only the relevant subcentres based on the selectedCentre variable passed into the function?
var subcentres = xmlDoc.documentElement.sel
for (var i=0;i<subcentres.length;i+
var subTitle = subcentres[i].getElementsB
var date = subcentres[i].getElementsB
//another dodgy bit - I need to write out ALL the relevant subcentres one after the other. Is there some way of grouping the output?
document.getElementById('s
}
</script>
</head>
<body onLoad="createSelectBox()"
<xml id="x1" src="centres.xml"></xml>
<form name="form1">
<select id="centredrop" onchange="outputSubCentres
<option value="">Please select</option>
</select>
</form>
<div id="subcentres"></div>
Here's what I have so far (with help from experts - see if you can spot the bits I did myself...). The select drop-down is working fine. And I realise I need an onchange event to trigger the next function to retrieve the relevand subdata. But that's where I've run aground again.
Thanks for your time and help on this.
**************************
//create select box from xml file centres.xml. All fine.
function createSelectBox() {
var xmlDoc = document.getElementById('x
var centres = xmlDoc.getElementsByTagNam
var sel = document.getElementById('c
for (var i=0;i<centres.length;i++) {
var val = centres[i].getElementsByTa
sel.options[sel.options.le
}
}
//PROBLEM FUNCTION: output subcentre/s for selected centre
function outputSubCentre(selectedCe
var xmlDoc = document.getElementById('x
//dodgy syntax - how do I retrieve only the relevant subcentres based on the selectedCentre variable passed into the function?
var subcentres = xmlDoc.documentElement.sel
for (var i=0;i<subcentres.length;i+
var subTitle = subcentres[i].getElementsB
var date = subcentres[i].getElementsB
//another dodgy bit - I need to write out ALL the relevant subcentres one after the other. Is there some way of grouping the output?
document.getElementById('s
}
</script>
</head>
<body onLoad="createSelectBox()"
<xml id="x1" src="centres.xml"></xml>
<form name="form1">
<select id="centredrop" onchange="outputSubCentres
<option value="">Please select</option>
</select>
</form>
<div id="subcentres"></div>
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
That's excellent thankyou.
Okay I have managed to get it all outputting as it should. But I have one final question (or two).
I would like to output a different image file with every subcentre. I presume I need an extra XML element for that, but I think there is a special syntax isn't there? What do I need to consider when I do this please? I know I could look it up on the net, but I'm in a big hurry to get this out today and I know it will take me ages to figure out by myself.
Out of interest:
In one of my existing XML Elements I have included a file name which I then format in my javascript into an <a href> link. But is there a short-cut so that I could define it as a URL in the XML file or schema so that it will automatically be treated as a url when it is output?
And I'm wondering where XSL fits into all this. Am I supposed to be doing something with it?
Thanks again, this is all a big learning curve, but I'm getting there with your help I think.
Okay I have managed to get it all outputting as it should. But I have one final question (or two).
I would like to output a different image file with every subcentre. I presume I need an extra XML element for that, but I think there is a special syntax isn't there? What do I need to consider when I do this please? I know I could look it up on the net, but I'm in a big hurry to get this out today and I know it will take me ages to figure out by myself.
Out of interest:
In one of my existing XML Elements I have included a file name which I then format in my javascript into an <a href> link. But is there a short-cut so that I could define it as a URL in the XML file or schema so that it will automatically be treated as a url when it is output?
And I'm wondering where XSL fits into all this. Am I supposed to be doing something with it?
Thanks again, this is all a big learning curve, but I'm getting there with your help I think.
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
steveberzins, you explain your position about your opinion and forgot to answer the question, by the way, a simple question.
ASKER
Crikey. Yes you are quite right Steve I am not too hot on anything beginning with X.
Thanks for all of that, I will have a good look over the next few days and try to get my head round it. But for now my little app is working and I'm still employed, so thank you very very much all of you.
Thanks for all of that, I will have a good look over the next few days and try to get my head round it. But for now my little app is working and I'm still employed, so thank you very very much all of you.
limong:
I get to differ...this was the answer part:
"for the image, just also build up an img tag with the src=filelocation, and for the link, same thing, just build up the html a tag into the string..."
it was there, although I admit maybe a bit hard to pick out of the rest...I don't thing the person wanted it done for them, but was looking for guidance, which was what I provided... :)
I get to differ...this was the answer part:
"for the image, just also build up an img tag with the src=filelocation, and for the link, same thing, just build up the html a tag into the string..."
it was there, although I admit maybe a bit hard to pick out of the rest...I don't thing the person wanted it done for them, but was looking for guidance, which was what I provided... :)
meant to say 'beg'... i.e. I beg to differ, keyboard dislexia :)
here is a start to a transform that should work with the code I provided:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:template match="CENTRES">
<xsl:apply-templates select="CENTRE" />
</xsl:template>
<xsl:template match="CENTRE">
<ul>
<li><xsl:value-of select="NAME"/></li>
<xsl:apply-templates select="SUBCENTRES/SUBCENT
</ul>
</xsl:template>
<xsl:template match="SUBCENTRE">
<ul>
<li>Title : <xsl:value-of select="TITLE"/></li>
<li>Deadline : <xsl:value-of select="DEADLINE"/></li>
</ul>
</xsl:template>
</xsl:stylesheet>
here is a start to a transform that should work with the code I provided:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:template match="CENTRES">
<xsl:apply-templates select="CENTRE" />
</xsl:template>
<xsl:template match="CENTRE">
<ul>
<li><xsl:value-of select="NAME"/></li>
<xsl:apply-templates select="SUBCENTRES/SUBCENT
</ul>
</xsl:template>
<xsl:template match="SUBCENTRE">
<ul>
<li>Title : <xsl:value-of select="TITLE"/></li>
<li>Deadline : <xsl:value-of select="DEADLINE"/></li>
</ul>
</xsl:template>
</xsl:stylesheet>
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
ASKER
It only needs to work on IE because it's an intranet page.
And the dataset is pretty small, just about 7 centres with between 1-3 subcentres each and each subcentre has a title, a line of info, a link url and a deadline date. That's about it.
So my ASP is absolutely basic, so I was planning just to use Javascript to do all the processing.
But that's where I'm completely stuck. How do I retrieve this data and create a select box from the Centres and then output the appropriate bits according to the selection? I'm still really confused about how to go about this. Never done it before.
Thanks again