Wednesday, June 1, 2011

Reading XML in jQuery/Generate sitemap in jQuery

Reading XML in jQuery/Generate sitemap in jQuery

Here listed below code is showing that how can you can generate site map with jQuery.
just copy the sites.php file's matter in your site's  sites.php and copy sites.html file's matter
in your  sites.html file.



 sites.php

< ? php
header( 'Content-type: text/xml' );
$xmlData='';
echo '';
$xmlData .= ' < sites >';
$xmlData.='   < site id="0">';
$xmlData.="     < ttitle >Amit's Blog < /ttitle >";
$xmlData.='    < url >http://amitkgaur.blogspot.com/< / url >';
$xmlData.='     < desc >';
$xmlData.='       < brief >Find interesting stuff in Java, PHP and Dot Net.< / brief >';
$xmlData.='       < long >This site is for Humans, smart Primates and Dolphins only (oh and ALIENS).';
$xmlData.='     < /desc >';
$xmlData.='   < / site >';
$xmlData.='   < site id="2" >';
$xmlData.='     < ttitle >Auto Resume Broken File Upload Applet With Progress Bar< /ttitle >';
$xmlData.='    < url >http://amitkgaur.blogspot.com/2010/10/file-upload-applet-with-auto-resume.html< /url >';
$xmlData.='     < desc >';
$xmlData.='       < brief >Upload unlimited GBs file without fear of internet connection break.< / brief >';
$xmlData.='       < long >I have created this Java Auto Resume Broken and Progress Bar File Uploader Applet.< / long >';
$xmlData.='     < / desc >';
$xmlData.='   < / site >';
$xmlData.='   < site id="3" >';
$xmlData.='     < ttitle >Desktop Screen Recorder< / ttitle > ';
$xmlData.='    < url >http://amitkgaur.blogspot.com/2010/09/desktop-screen-recorder.html< /url >';
$xmlData.='     < desc >';
$xmlData.='       < brief >This Screen Recorder will record your screen and generate .MOV file,
I have created it in Java Swing Framework.< / brief >';
$xmlData.='       < long >This Screen Recorder will record your screen and generate .MOV file,
I have created it in Java Swing Framework.
I recommend VLC player to play this file.< / long >';
$xmlData.='     < / desc >';
$xmlData.='   < / site >';
$xmlData.=' < / sites >';
echo $xmlData;
? >



sites.html

   < script type="text/javascript" src="jquery-1.6.js" > < / script >
     < script >
         $(document).ready(function(){
            $.ajax({
                type: "POST",
                url: "sites.php",
                dataType: "xml",
                success: function(xml) {
                    $(xml).find('site').each(function(){
                        var id = $(this).attr('id');
                        var ttitle = $(this).find('ttitle').text();
                        var url = $(this).find('url').text();
                    $('
').html(''+ttitle+'').appendTo('#siteMap');
                        $(this).find('desc').each(function(){
                            var brief = $(this).find('brief').text();
                            var long = $(this).find('long').text();
                            $('
').html(brief).appendTo('#link_'+id);
                            $('
').html(long).appendTo('#link_'+id);
                        });
                    });
                }
            });
        });
    
    <div id="siteMap" >
         Sitemap with jQuery
     </div>

       

        



    


No comments:

Post a Comment