CodeIgniter Forums
Jquery, Javascript, and XML-Need Help! - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forum-23.html)
+--- Thread: Jquery, Javascript, and XML-Need Help! (/thread-26287.html)



Jquery, Javascript, and XML-Need Help! - El Forum - 01-10-2010

[eluser]zimco[/eluser]
I am trying to get the data values from an XML file and use them with the GnuBookreader, but am totally confused with using CI, jquery, javascript, and the XML file together.

I have gotten as far as reading the values from the XML file with Jquery and writing them back to the screen, but now want to put those values in variables that the GnuBookreader script can use.

I am hoping somebody with alot more experience with javascript and jquery can point me in the right direction.

The XML file looks like this:
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<book>

<bookData>
    <bookId> </bookId>
    <leafCount>3</leafCount>
    <dpi>300</dpi>
      <scanLog>
    <scanEvent>
        <scribe>username</scribe>
        <scannerEmail>[email protected]</scannerEmail>
        <uploadTimeStamp>20080709123647</uploadTimeStamp>
    </scanEvent>
      </scanLog>
</bookData>

  <pageData>
  <page leafNum="0">
  <handSide>RIGHT</handSide>
  <origWidth>893</origWidth>
  <origHeight>1155</origHeight>
  </page>
  </pageData>
  
  <pageData>
  <page leafNum="1">
  <handSide>LEFT</handSide>
  <origWidth>893</origWidth>
  <origHeight>1155</origHeight>
  </page>
  </pageData>
  
  <pageData>
  <page leafNum="2">
  <handSide>RIGHT</handSide>
  <origWidth>893</origWidth>
  <origHeight>1155</origHeight>
  </page>
  </pageData>
  
</book>

My CI template file loads the following in the header:
Code:
&lt;head&gt;
&lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;

&lt;link rel="stylesheet" href="http://localhost:8080/racecards/css/style.css" type="text/css" media="screen" /&gt;
&lt;link rel="stylesheet" type="text/css" href="http://localhost:8080/racecards/css/GnuBook.css"&gt;

<scrpt type="text/javascript" src="http://localhost:8080/racecards/js/jquery-1.2.6.min.js"></scrpt>
<scrpt type="text/javascript" src="http://localhost:8080/racecards/js/jquery.easing.1.3.js"></scrpt>
<scrpt type="text/javascript" src="http://localhost:8080/racecards/js/GnuBook.js"></scrpt>
&lt;/head&gt;

CI VIEW file looks like this:
Code:
<div id="bookreader">
    <div id="GnuBook" style="left:10px; right:10px; top:30px; bottom:30px;">x</div>
    <scrpt type="text/javascript" src="http://localhost:8080/racecards/js/GnuBookTest.js"></scrpt>
</div>

MY javascript file, GnuBookTest.js it just reads the XML file and spits parse back to the screen.
Code:
$(document).ready(function() {

function parse(document){
  $(document).find("bookData").each(function(){
    $("#bookreader").append(
    '<p><br />Leaf Count: '+$(this).find('leafCount').text()+
    '<br />DPI: '+$(this).find('dpi').text()+
    '<br />Scribe: '+$(this).find('scribe').text()+
    '<br />Email: '+$(this).find('scannerEmail').text()+
    '</p>'
    );
    
  });
  
    $(document).find("pageData").each(function(){
    $("#bookreader").append(
    '<p><br />Page No.: '+$(this).find('page').attr('leafNum')+
    '<br />Hand Side: '+$(this).find('handSide').text()+
    '<br />Width: '+$(this).find('origWidth').text()+
    '<br />Height: '+$(this).find('origHeight').text()+
    '</p>'
    );
    
  });
}

  $.ajax({
    url: './book/scandata.xml', // xml file you want to parse
    dataType: "xml",
    success: parse,
    error: function(){alert("Error: Something went wrong");}
  });
});

GNUBOOK JAVASCRIPT EXAMPLE that uses static values set right in the script, rather than what i would like to do: which is use the values from the XML file.
Code:
// This file shows the minimum you need to provide to GnuBook to display a book
// Create the GnuBook object
gb = new GnuBook();

// Return the width of a given page.  Here we assume all images are 800 pixels wide
gb.getPageWidth = function(index) {
    return 800;
}

// Return the height of a given page.  Here we assume all images are 1200 pixels high
gb.getPageHeight = function(index) {
    return 1200;
}

// We load the images from archive.org -- you can modify this function to retrieve images using a different URL structure
gb.getPageURI = function(index) {
    var leafStr = 'page_000';            
    var imgStr = (index).toString();
    var re = new RegExp("0{"+imgStr.length+"}$");
    var url = 'http://localhost:8080/racecards/book/pages/'+leafStr.replace(re, imgStr) + '.jpg';
    return url;
}

// Return which side, left or right, that a given page should be displayed on
gb.getPageSide = function(index) {
    if (0 == (index & 0x1)) {
        return 'R';
    } else {
        return 'L';
    }
}

// This function returns the left and right indices for the user-visible
// spread that contains the given index.  The return values may be
// null if there is no facing page or the index is invalid.
gb.getSpreadIndices = function(pindex) {  
    var spreadIndices = [null, null];
    if ('rl' == this.pageProgression) {
        // Right to Left
        if (this.getPageSide(pindex) == 'R') {
            spreadIndices[1] = pindex;
            spreadIndices[0] = pindex + 1;
        } else {
            // Given index was LHS
            spreadIndices[0] = pindex;
            spreadIndices[1] = pindex - 1;
        }
    } else {
        // Left to right
        if (this.getPageSide(pindex) == 'L') {
            spreadIndices[0] = pindex;
            spreadIndices[1] = pindex + 1;
        } else {
            // Given index was RHS
            spreadIndices[1] = pindex;
            spreadIndices[0] = pindex - 1;
        }
    }
    
    return spreadIndices;
}

// For a given "accessible page index" return the page number in the book.
// For example, index 5 might correspond to "Page 1" if there is front matter such
// as a title page and table of contents.
gb.getPageNum = function(index) {
    return index+1;
}

// Total number of leafs
gb.numLeafs = 15;

// Let's go!
gb.init();



Jquery, Javascript, and XML-Need Help! - El Forum - 01-10-2010

[eluser]Sean Gates[/eluser]
@zimco

If I understand your dilemma correctly, I think you're on the right track. But, I think there may be a better way:

1) I think you could do the request with CURL (in a model)
2) In the model put the necessary values in an array
3) Then build the GnuBook Javascript as a view, making it fully dynamic.
4) Last, you could just call the new JS view with something like:

Code:
&lt;script src="/controller/gdjs" type="text/javascript">&lt;/script>

Let me know if my thinking is off base, but I believe this would work better for you in the long run. More PHP, less JS.

-- Sean


Jquery, Javascript, and XML-Need Help! - El Forum - 01-11-2010

[eluser]zimco[/eluser]
Sean thanks for taking a look at my problem. Love the thought of more PHP, less javascipt.

However, i don't think curl will help me out in this situation as the XML file resides on my server. Also, i have already tried the simplexml_load_file($file) idea in the controller and putting the values in a php array, but then always run into the problem of you can't pass variables from PHP to an external [removed] one is server side, one is client side. Javascript cannot interact with PHP before it's parsed by the server, blah blah blah.

So now i'm trying to get the XML values directly in the external javascript file using jquery and have gotten as far as above, but am now lost as to how to get the xml values returned to the GnuBookreader script part.


Jquery, Javascript, and XML-Need Help! - El Forum - 01-11-2010

[eluser]Sean Gates[/eluser]
[quote author="zimco" date="1263239439"]However, i don't think curl will help me out in this situation as the XML file resides on my server. Also, i have already tried the simplexml_load_file($file)[/quote]

Yeah, this is where I was headed.

[quote author="zimco" date="1263239439"]... you can't pass variables from PHP to an external [removed] one is server side, one is client side. Javascript cannot interact with PHP before it's parsed by the server, blah blah blah.[/quote]

I guess I don't understand what you mean by this. You should be able to create a view that then creates a dynamic JS file for you. Then, through AJAX, you can just call this dynamic JS view anytime you need new variables, and PHP will be creating the JS the entire time.


Jquery, Javascript, and XML-Need Help! - El Forum - 01-12-2010

[eluser]zimco[/eluser]
Quote:I guess I don’t understand what you mean by this. You should be able to create a view that then creates a dynamic JS file for you. Then, through AJAX, you can just call this dynamic JS view anytime you need new variables, and PHP will be creating the JS the entire time.

I think it would take a computer science teacher to explain it, but all i can say is try doing what you propose: set your php variables in a controller and send along to view, create an external javascrpt file with references to your variables in it and drop that in a js folder, then call the view that contains the call to the javascrpt. You'll get an undefined variable error.

In any case, i still have not figured out to get my XML data to the GnuBookreader script and am now reading ajax, json, jquery, and javascript tutorials and books. Thanks for trying to help.


Jquery, Javascript, and XML-Need Help! - El Forum - 01-23-2010

[eluser]Sen Hu[/eluser]
Script using biterscripting - just one more option - it will create a table of leafnum, width and height.



Code:
# Script ExtractXML.txt
var str xmldoc, xmlcontent
# Read xml in.
cat $xmldoc > $xmlcontent
while ( { sen -c -r "^<pageData\>&</pageData\>^" $xmlcontent } > 0 )
do
    var str leafNum, origWidth, origHeight
    stex -c "^leafNum=\"^]" $xmlcontent > null
    stex -c "]^\"^" $xmlcontent > $leafNum
    stex -c "^<origWidth>^]" $xmlcontent > null
    stex -c "]^</origWidth>^" $xmlcontent > $origWidth
    stex -c "^<origHeight>^]" $xmlcontent > null
    stex -c "]^</origHeight>^" $xmlcontent > $origHeight

    # Create a tab-separated entry of num, width, height.
    echo $leafNum "\t" $origWidth "\t" $origHeight
done



Save the script in file "C:/Scripts/ExtractXML.txt", start biterscripting ( http://www.biterscripting.com ), run the following command.


Code:
script "C:/Scripts/ExtractXML.txt" xmldoc("http://www.somesite.com/some/path/somedoc.xml")

The script will read the XML from internet and show you the TSV data.