tags:

views:

907

answers:

2
Q: 

Populating A Page with XML and Javascript/Jquery, checking if the url is the same as an xml tag

Hi, I need to create a javascript function that will write a page based on the url, so basically I am trying to create a javascript function that will check the url, and find the corresponding xml item from there.

The reason behind this is so that the html page can just be duplicated, renamed, and the xml updated, and the page will fill in everything else from the xml sheet.

please let me know whether this is the completely incorrect way to do it, of it there is a better way. thanks!!!

XML CODE::

<!--XML INFORMATION-->  
<channel>
<design>
<motion><!--design content-->

<item><!--//////////POST//////////POST//////////POST//////////-->
 <tag>/portfolio_dec.html</tag>

<!--RSS INFORMATION-->  
 <title>Decoze</title>
 <link>http://payamrajabi.com/portfoliotest.html&lt;/link&gt;
 <description><img src="http://payamrajabi.com/thumbs/small_jump.png" title="JUMP!." /></description>

<!--PROJECT CONTENT-->

<project><!--project start-->

 <titl>TITLE</titl><!--project title-->
 <dsc>PROJECT DESCRIPTION</dsc><!--project description-->

</project><!--project end-->

</item><!--//////////END//////////END//////////END//////////-->

</motion>
</design> 
</channel>

JAVASCRIPT:

$(document).ready(function(){

 $.ajax({
 type: "GET",
 url: "code/content9.xml",
 dataType: "xml",
 success: function(xml) {

 var xpathname = window.location.pathname;
 var xproject = $(xml).find('tag').text();

 if (xpathname == xproject) {

  $(xml).find('item').children('tag').text(xpathname).each(function(){
   var ttl = $(this).find('titl').text();
   $('<p>'+ttl+'</p>').appendTo('h1#ttl');
  });

  $(xml).find('item').children('tag').text(xpathname).each(function(){
   var dsc = $(this).find('dsc').text();
   $('<p>'+dsc+'</p>').appendTo('h1#ttl');
  });     

 } else {
  PUT ERROR MESSAGE HERE
 }
 }
 });     
});

and THE HTML:

<html>
<head>

<script type="text/javascript" src="code/jquery-1.3.1.js"></script>
<script type="text/javascript" src="code/project/project_design.js"></script>

</head>

<body>
<h1 id="ttl"></h1>
<p id="dsc"></p>
</body>
</html>

any help would really be appreciated, i am frairly new to javascript/jquery/xml, and am really having trouble with this. The primary thing I want to do is have an xml file that populates a site, with each item being the content for a new page, in this case of a portfolio item.

cheers!

willem

+2  A: 

Hmm... I'm afraid you don't quite understand how jquery works.

Your code should look something like this:

var xpathname = window.location.pathname; 

var xitem = $(xml).find('tag:contains(' + xpathname + ')').parent(); 

if (xproject.length != 0) { 
  $('#ttl').append('<p>' + xitem.find('titl').text() + '</p>'); 
  $('#dsc').append('<p>' + xitem.find('dsc').text() + '</p>'); 
} 
else {
  $('#err').text('The page you requested does not exist'); 
}

Demo 1

Here's a quick demo. Take a look at the source to see the XML and the JavaScript.

http://jsbin.com/ujiho#itemOne

http://jsbin.com/ujiho#itemTwo

http://jsbin.com/ujiho#itemThree

Demo 2

I've created another demo that uses $.get to retrieve the XML from a separate URL.

http://jsbin.com/aqefo#nov

http://jsbin.com/aqefo#dec

The XML: http://jsbin.com/afiwa

Here's the JavaScript. Let me know if you need help understanding anything.

$(function(){
  $.get(
    'http://jsbin.com/afiwa',
    function(xml){

      var hash = window.location.hash.substring(1);

      if ($.trim(hash) === '') {
        showError();
        return;
      }

      var xitem = $(xml).find('urlname:contains(' + hash + ')').parent();

      if (xitem.length != 0) {
        $('#ttl').append(xitem.find('titl').text());
        $('#dsc').append( xitem.find('dsc').text());
      }
      else {
        showError();
      }


      function showError() {
        $('#err').text('The page you requested does not exist');
      }
    }
  );
});
brianpeiris  2009-05-02 00:35:50
A: 

AWESOME! thanks for the help, I am still having a bit of trouble with it, I am using a slightly different way of gettig the URL, because I want to naming system of the xml file simple.

the problem I am having right now (i think) is with calling the xml file.

$(function(){

var geturl = window.location.pathname; //find url
var urltrim = geturl.replace('/portfolio_', "").replace('.html', "");  //
$('#titl').append(urltrim); //just to show that the trim works


var xml = $.get('code/content.xml').text(); //what I am having trouble with!!
var xitem = $(xml).find('urlname:contains(' + urltrim + ')').parent();

if (xitem.length != 0) {
$('#titl').append('' + xitem.find().children('titl').text() + '');
$('#dsc').append('' + xitem.find().children('dsc').text() + '');
}
else {
showError();
}

function showError() {
$('#dsc').text('The page you requested does not exist');
}
});
 2009-05-02 17:37:00
I've edited my answer to address the problem you are having.P.S. You should edit your question instead of creating a new answer because, technically speaking, this is not an "answer", it is an extension to the original question.
brianpeiris  2009-05-04 02:23:55

related questions

Load an XmlNodeList into an XmlDocument without looping?
Does System.Xml use MSXML?
Using an XML catalog with Python's lxml?
Why Are People Still Creating RSS Feeds?
Pretty printing XML files on Emacs
Application configuration files
What is the best XML editor?
How much extra overhead is generated when sending a file over a web service as a byte array?
XPATHS and Default Namespaces
How to parse XML in VBA
Small modification to an XML document using StAX
how to use xpath in python
Best binary XML format for JavaME
How can I split an XML document into thirds (or, even better, n pieces)?
Test serialization encoding
Is it "bad practice" to be sensitive to linebreaks in XML documents?
HTML comments break down
Authoritative source on XML-sig
Best way to get InnerXml of an XElement?
HTML version choice
SQL 2005 For XML Explicit - Need help formatting
Any experiences with Protocol Buffers?
XML Editing/Viewing Software
XML Processing in Python
Converting CSV File to XML in Java