/* These are global variables that define how many items to view at once (itemsPerPage), and our current position (curPos). "itemsPerPage" is an accurate descriptor only within the context of the application, since we are not actually browsing "pages". */ itemsPerPage = 5; curPos = 0; /* The next code block is the jQuery implementation of the XMLHttpRequest object. The outer function specifies that when the page loads we want to execute a function: $(function() {}); Now within that function, make a request for an XML file, and upon success, execute another function. The data we get back is assigned to "xmlData". This is only available within the scope of this function. By assigning it to "xmlDataSet", we can now use the XML data throughout the application. Now we call the "browseXML()" function, which will manage our browse functionality. NOTE: In a production environment, you may want to account for any instance when the request for the XML fails. Please see the jQuery documentation on the $.ajax() object. */ $(function() { $.ajax({ type: "GET", url: "./projects_new.xml", dataType: "xml", success: function(xmlData) { xmlDataSet = xmlData; browseXML(); } }); }); function browseXML() { /* In jQuery, you can choose an XML data source, and then select the name of the node elements you want to grab. The results can be assigned to a variable, which can further be refined if needed. This is demonstrated with the "resultSetLength" variable. "strToAppend" will be the sum of our HTML that will eventually (re)populate our "widget" DIV when a user browses. */ resultSetLength = $("project",xmlDataSet).length; strToAppend = ""; /* This is the real meat of the jQuery functionality. We are performing 3 major tasks: 1.) Grab each "title" node from our XML data source that falls below a certain index. The ":lt" is the expression that performs this task. 2.) Now of those title nodes, filter out those that are greater than a certain index. This will give us our new result set, which is displayed to the user with "Showing X through Y of Z". The ":gt" expression is used in conjunction with the "filter()" method to accomplish this task. 3.) For each set of results we refined, we now want to execute a function. We know we need the "author", "publisher", and the "ISBN" for our book, but we only searched for "title". With the "each()" method we have access to the index (i), just like in a JavaScript "for loop". So we can get each one of those nodes that fall at the same index as our "title" nodes. However, we always start our results array at 0, so we want to add our current position to that in order to get the proper node. We use the ":eq" expression to accomplish this task. */ $("name:lt(" + parseInt(curPos + itemsPerPage) + ")",xmlDataSet).filter(":gt(" + parseInt(curPos - 1) + ")").each(function(i) { strToAppend += '

'; strToAppend += $(this).text() + "

"; strToAppend += '

' + $("author:eq(" + parseInt(curPos + i) + ")",xmlDataSet).text() + ' | '; strToAppend += $("date:eq(" + parseInt(curPos + i) + ")",xmlDataSet).text() + '

'; /* strToAppend += ' This technology belongs to the' + $(';*/ }); strToAppend += "