Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2009
    Location
    Out in the field. Chewin some grass
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Loading an XML Array from within an Child Node

    Hey, guys, my first post here on the forums, I hope this is the right place.

    This technically uses Javascript + PHP + XML, but the problem is more based on Javascript than the other two. That, and there are 380 people viewing Javascript and 8 people viewing XML, I decided to take the path of lesser resistance.

    Also, the code I used, I'm sure there are a million shortcuts that could be used. So if you can give me suggestions, I would Love to hear them because I'm still learning Javascript + PHP + XML and would be very grateful to learn how I could be more efficient

    What I'm creating is a Form that takes variables from an XML for users to fill out. Users can choose between products, and then when the product is clicked, it loads the options from an Array within the XML so... The question is

    Products Load from an Array
    Options Load from the chosen Products?

    I'm thinking this can be done two ways. Maybe a separate XML can be used for Options but then how would I link each one for each product? Or, can I load the Options in the same XML for each Product and load an array for each Product's Options?


    ---

    Later on, I need to figure out how to create a new element for each form the User fills out. IE
    They finish filling out the options and volume for 20 GI JOES. So it should save those Variables and the User Filled Variables. And then allow you to fill out a new product. Appending to the last form filled out IE

    20 GI JOES [Color Red] [Eating Pizza] [Wearing Cowsuits]
    12 BARBIES [Color Blue] [Eating Sushi] [Wearing Bearsuits]

    But I'll do my own reearch for that before I start asking here on how to do that


    ---

    This is my Code so far, some of you will recognize it from W3 Schools

    ---

    Code:
    JS
    oldTextAry = new Array();
    var xmlDoc;
    if (window.XMLHttpRequest)  {
    	xmlDoc=new window.XMLHttpRequest();
    	xmlDoc.open("GET","data.xml",false);
    	xmlDoc.send("");
    	xmlDoc=xmlDoc.responseXML;
    	}
    else if (ActiveXObject("Microsoft.XMLDOM"))  {
    	xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    	xmlDoc.async=false;  xmlDoc.load("data.xml");
    	}
    var x=xmlDoc.getElementsByTagName("PR");i=0;
    var y=xmlDoc.getElementsByTagName("OPTION");j=0;
    var z=xmlDoc.getElementsByTagName("OPT");k=0;
    var enl;
    Above Code, calls on data.xml in the same folder. It then creates an array from the XML for <PR> <OPTION> and <OPT>. In the XML. It's...

    Code:
    XML
    <PRODUCT>
    	<PR>
    		<TITLE>Title goes here</TITLE>
    		<IMG>jpg html for image goes here</IMG>
    		<ENL>jpg html for high res image goes here</ENL>
    		<LINK>a link if needed</LINK>
    		<INFO>more info if needed</INFO>
    		<OPTION>
    			<OPT>hearts</OPT>
    			<OPT>stars</OPT>
    			<OPT>horseshoes</OPT>
    			<OPT>clovers</OPT>
    			<OPT>balloons</OPT>
    		</OPTION>
    	</PR>
    	<PR>
    		<TITLE>Title goes here</TITLE>
    		<IMG>jpg html for image goes here</IMG>
    		<ENL>jpg html for high res image goes here</ENL>
    		<LINK>a link if needed</LINK>
    		<INFO>more info if needed</INFO>
    		<OPTION>
    			<OPT>hearts</OPT>
    			<OPT>stars</OPT>
    			<OPT>horseshoes</OPT>
    			<OPT>clovers</OPT>
    			<OPT>balloons</OPT>
    		</OPTION>
    	</PR></PRODUCT>
    The OPT is what I want to load as an array. How could I do that?
    So continuing with the JS code...

    Code:
    function productnext(){if (i<x.length-5)  {  i++;  productline();return false;    }}
    function productprevious(){if (i>0)  {  i--;  productline();return false;  }}
    
    function productline(){
    ttl1=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
    ttl2=(x[i+1].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
    ttl3=(x[i+2].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
    ttl4=(x[i+3].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
    ttl5=(x[i+4].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
    img1=(x[i].getElementsByTagName("IMG")[0].childNodes[0].nodeValue);
    img2=(x[i+1].getElementsByTagName("IMG")[0].childNodes[0].nodeValue);
    img3=(x[i+2].getElementsByTagName("IMG")[0].childNodes[0].nodeValue);
    img4=(x[i+3].getElementsByTagName("IMG")[0].childNodes[0].nodeValue);
    img5=(x[i+4].getElementsByTagName("IMG")[0].childNodes[0].nodeValue);
    lnk1=(x[i].getElementsByTagName("LINK")[0].childNodes[0].nodeValue);
    lnk2=(x[i+1].getElementsByTagName("LINK")[0].childNodes[0].nodeValue);
    lnk3=(x[i+2].getElementsByTagName("LINK")[0].childNodes[0].nodeValue);
    lnk4=(x[i+3].getElementsByTagName("LINK")[0].childNodes[0].nodeValue);
    lnk5=(x[i+4].getElementsByTagName("LINK")[0].childNodes[0].nodeValue);
    inf1=(x[i].getElementsByTagName("INFO")[0].childNodes[0].nodeValue);
    inf2=(x[i+1].getElementsByTagName("INFO")[0].childNodes[0].nodeValue);
    inf3=(x[i+2].getElementsByTagName("INFO")[0].childNodes[0].nodeValue);
    inf4=(x[i+3].getElementsByTagName("INFO")[0].childNodes[0].nodeValue);
    inf5=(x[i+4].getElementsByTagName("INFO")[0].childNodes[0].nodeValue);
    opt1=(y[j].getElementsByTagName("OPT")[0].childNodes[0].nodeValue);
    opt2=(y[j+1].getElementsByTagName("OPT")[1].childNodes[0].nodeValue);
    opt3=(y[j+2].getElementsByTagName("OPT")[2].childNodes[0].nodeValue);
    opt4=(y[j+3].getElementsByTagName("OPT")[3].childNodes[0].nodeValue);
    opt5=(y[j+4].getElementsByTagName("OPT")[4].childNodes[0].nodeValue);
    enl1=(x[i].getElementsByTagName("ENL")[0].childNodes[0].nodeValue);
    enl2=(x[i+1].getElementsByTagName("ENL")[0].childNodes[0].nodeValue);
    enl3=(x[i+2].getElementsByTagName("ENL")[0].childNodes[0].nodeValue);
    enl4=(x[i+3].getElementsByTagName("ENL")[0].childNodes[0].nodeValue);
    enl5=(x[i+4].getElementsByTagName("ENL")[0].childNodes[0].nodeValue);
    The first two functions are for a list in the PHP. The rest of the code gives the first five products into respective variables for the PHP to use.

    Code:
    PHP
                          <td width="25" rowspan="3"><a title="<b>Previous Product</b><br><br>Click to Scroll the product list left" onclick="productprevious();" style="cursor:pointer"><img src='prodprev.jpg' width="25" height="170"></a></td>
                          <td>&nbsp;</td>
                          <td width="120" height="120" valign="top"><div id='PR1'></div></td>
                          <td>&nbsp;</td>
                          <td width="120" height="120" valign="top"><div id='PR2'></div></td>
                          <td>&nbsp;</td>
                          <td width="120" height="120" valign="top"><div id='PR3'></div></td>
                          <td>&nbsp;</td>
                          <td width="120" height="120" valign="top"><div id='PR4'></div></td>
                          <td>&nbsp;</td>
                          <td width="120" height="120" valign="top"><div id='PR5'></div></td>
                          <td>&nbsp;</td>
                          <td width="25" rowspan="3"><a title="<b>Next Product</b><br><br>Click to Scroll the product list right" onclick="productnext();" style="cursor:pointer"><img src='prodnext.jpg' width="25" height="170"></a></td>
    It's a line for five products. When people hit the Next button, it moves the Array one product over. And previous button does vice versa.

    Code:
    JS
    document.getElementById("PR1").innerHTML="<a href='javascript:void();' onClick='picture1();'><img src='"+img1+"' height=120 width=120></a>";
    document.getElementById("PR2").innerHTML="<a href='javascript:void();' onClick='picture2();'><img src='"+img2+"' height=120 width=120></a>";
    document.getElementById("PR3").innerHTML="<a href='javascript:void();' onClick='picture3();'><img src='"+img3+"' height=120 width=120></a>";
    document.getElementById("PR4").innerHTML="<a href='javascript:void();' onClick='picture4();'><img src='"+img4+"' height=120 width=120></a>";
    document.getElementById("PR5").innerHTML="<a href='javascript:void();' onClick='picture5();'><img src='"+img5+"' height=120 width=120></a>";
    document.getElementById("PT1").innerHTML="<a href='javascript:void();' onClick='picture1();'>"+ttl1+"</a>";
    document.getElementById("PT2").innerHTML="<a href='javascript:void();' onClick='picture2();'>"+ttl2+"</a>";
    document.getElementById("PT3").innerHTML="<a href='javascript:void();' onClick='picture3();'>"+ttl3+"</a>";
    document.getElementById("PT4").innerHTML="<a href='javascript:void();' onClick='picture4();'>"+ttl4+"</a>";
    document.getElementById("PT5").innerHTML="<a href='javascript:void();' onClick='picture5();'>"+ttl5+"</a>";
    return false;}
    This code places the products into the respective list. PR1 gets IMG1. This is also where I wonder if it could be more efficient, because I'm copying things five times in a row. There's got to be a better way to do that. Whenever it's clicked it operates a function called picture#() corresponding to the button. Once again... Must be a more efficient way.

    Code:
    function picture1() {document.getElementById('PI').innerHTML="<img src="+img1+" height=170 width=170>";document.getElementById('PTT').innerHTML=ttl1;
    /*test area, delete when done*/enl=enl1;document.getElementById("E").innerHTML=enl;}
    function picture2() {document.getElementById('PI').innerHTML="<img src="+img2+" height=170 width=170>";document.getElementById('PTT').innerHTML=ttl2;
    /*test area, delete when done*/enl=enl2;document.getElementById("E").innerHTML=enl;}
    function picture3() {document.getElementById('PI').innerHTML="<img src="+img3+" height=170 width=170>";document.getElementById('PTT').innerHTML=ttl3;
    /*test area, delete when done*/enl=enl3;document.getElementById("E").innerHTML=enl;}
    function picture4() {document.getElementById('PI').innerHTML="<img src="+img4+" height=170 width=170>";document.getElementById('PTT').innerHTML=ttl4;
    /*test area, delete when done*/enl=enl4;document.getElementById("E").innerHTML=enl;}
    function picture5() {document.getElementById('PI').innerHTML="<img src="+img5+" height=170 width=170>";document.getElementById('PTT').innerHTML=ttl5;
    /*test area, delete when done*/enl=enl5;document.getElementById("E").innerHTML=enl;}
    Above, places that picture into "PI" and gets the title and places it into "PTT"

    ---

    I was hoping to create another list. EXACTLY like I have here.

    Where the User can hit Next and Previous, using Options Loaded from an Array within the Array of Products.

    Is making a new XML with options the only way to do this?
    If that's the case, how do I associate each product with their options?
    Last edited by cowsdonthack; 09-17-2009 at 03:17 PM.

  • #2
    New to the CF scene
    Join Date
    Sep 2009
    Location
    Out in the field. Chewin some grass
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    One Bump a Day


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •