Page 1 of 3 123 LastLast
Results 1 to 10 of 21

Thread: Hash tag ajax?

  1. #1
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Hash tag ajax?

    Hey, this is some of my code:

    PHP Code:
    <?php
    chdir
    ("../forum"); // path to MyBB
    define("IN_MYBB"1);
    require(
    "./global.php");
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="core.js"></script>  
    <link rel="icon" href="images/favicon.gif" type="image/gif">
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script language="javascript" src="/tweet/jquery.tweet.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HabFab V1</title>
    <link href="css/global.css" rel="stylesheet" type="text/css" />
    <link href="css/navigation.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://vis.im/player/embed?radioIp=193.33.186.20&radioPort=8110&div=radioplayer&playIcon=http://habfab.com/v2/images/play.png&pauseIcon=http://habfab.com/v2/images/pause.png&volumeSlider=http://habfab.com/v2/images/volume-slider.png&volumeController=http://habfab.com/v2/images/volume.png&library=jquery&volumeStart=25"></script>
    <script type="text/javascript">

    /***********************************************
    * Dynamic Ajax Content-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    var bustcacheparameter=""

    function ajaxpage(url, containerid){
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
    try {
    page_request = new ActiveXObject("Msxml2.XMLHTTP")
    }
    catch (e){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    return false
    page_request.onreadystatechange=function(){
    loadpage(page_request, containerid)
    }
    if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
    }

    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }

    function loadobjs(){
    if (!document.getElementById)
    return
    for (i=0; i<arguments.length; i++){
    var file=arguments[i]
    var fileref=""
    if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
    if (file.indexOf(".js")!=-1){ //If object is a js file
    fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", file);
    }
    else if (file.indexOf(".css")!=-1){ //If object is a css file
    fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", file);
    }
    }
    if (fileref!=""){
    document.getElementsByTagName("head").item(0).appendChild(fileref)
    loadedobjects+=file+" " //Remember this object as being already added to page
    }
    }
    }
    </script>
    </head>

    <body>
    <div id="container">
        <div id="wrapper">
            <div id="left">
                <div id="banner_container">
                    <div id="banner"></div>
                    <div id="navigation_bar">
                        <ul>
                            <li></li>
                            <li><a href="http://habfab.com/v2" id="habfab"></a>
                            </li>
                            
                            <li><a href="#" id="radio"></a>
                            <ul>
                            <li><a href="javascript:ajaxpage('/pages/radio/request.php, 'content');">Request line</a></li> 
                            <li><a href="javascript:ajaxpage('/pages/radio/timetable.php', 'content');">Timetable</a></li> 
                            <li><a href="javascript:ajaxpage('/staff/_frontend/listen_record.php', 'content');">Recent Songs</a></li>
                            <li><a href="javascript:ajaxpage('/pages/radio/djotw.php', 'content');">Djotw</a></li>
                            </ul> 
                            </li>
                            
                            <li><a href="javascript:ajaxpage('/staffpanel/_frontend/news.php', 'content');" id="news"></a>
                            <ul>
                            <li><a href="javascript:ajaxpage('/pages/news/sitenews.php', 'content');">Site News</a></li> 
                            <li><a href="javascript:ajaxpage('/pages/news/habbonews.php', 'content');">Habbo News</a></li> 
                            <li><a href="javascript:ajaxpage('/pages/news/reallifenews.php', 'content');">Real Life News</a></li>
                            </ul> 
                            </li>
                            
                            <li><a href="#" id="guides"></a>
                            <ul>
                            <li>Coming soon!</li> 
                            </ul> 
                            </li>
                            
                            <li><a href="#" id="events"></a>
                            <ul>
                            <li><a href="javascript:ajaxpage('/pages/events/eventstoday.php', 'content');">Events Today</a></li> 
                            <li><a href="javascript:ajaxpage('/pages/events/eventsthisweek.php', 'content');">Events This Week</a></li> 
                            </ul> 
                            </li>
                            
                            <li><a href="#" id="media"></a>
                            <ul>
                            <li>Coming soon!</li> 
                            </ul> 
                            </li>
                            
                            <li><a href="#" id="Usables"></a>
                            <ul>
                            <li><A HREF="#" onClick="window.open('/pages/goodies/habbowood.php','Habbowood','resizable,height=635,width=1245,scrollbars=no'); return false;">Habbowood Movie Creator</a></li>
                            <li><a href="#fontgenerator">Font Generator</a></li> 
                            <li><a href="javascript:ajaxpage('/pages/goodies/thronegenerator.php', 'content');">Throne Generator</a></li> 
                            <li><a href="javascript:ajaxpage('/pages/goodies/kissinggenerator.php', 'content');">Kissing Generator</a></li> 
                            <li><a href="javascript:ajaxpage('/pages/goodies/clubsofagenerator.php', 'content');">Club Sofa Generator</a></li> 
                            <li><a href="javascript:ajaxpage('/pages/goodies/djgenerator.php', 'content');">DJ Generator</a></li> 
                            <li><a href="javascript:ajaxpage('/pages/goodies/imager.php', 'content');">Habbo Imager</a></li> 
                            </ul> 
                            </li>
                            
                            <li><a href="#" id="jobs"></a>
                            <ul>
                            <li><a href="javascript:ajaxpage('/pages/jobs/open.php', 'content');">Open Jobs</a></li> 
                            </ul> 
                            </li>
                            
                            
                            <li><a href="#" id="forum"></a>
                            <ul>
                            <li><a href="http://habfab.com/forum" target="_blank">Board</a></li> 
                            <li><a href="http://habfab.com/forum/member.php?action=login" target="_blank">Login</a></li> 
                            <li><a href="http://habfab.com/forum/member.php?action=register" target="_blank">Register</a></li>
                            <li><a href="http://habfab.com/forum/showteam.php" target="_blank">Staff</a></li>
                            <li><a href="http://habfab.com/forum/donate.php" target="_blank">Donate</a></li>
                            </ul> 
                            </li>                                   
                           </ul>
                    </div>
                </div>
                </body>
    </html>
    As I use javascript:ajaxpage to load the content of a page into a div, I need it so that the URL changes to something for example like www.example.com/something

    I've seen this before and it uses a hash tag like so www.example.com/#!/goodies

    Thanks for any support!

    ~ David
    Last edited by jscheuer1; 03-09-2012 at 11:00 AM. Reason: Format

  2. #2
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    I think I nearly have it! I now have this:
    Code:
    <li><a href="#!/events" onclick="ajax.load('/pages/events/eventsthisweek.php','content',false,'#!/events','');return false;">Events This Week</a></li>
    It now loads when I click the link as: http://example.com/v2/#!/events

    But when I try to access it via http://example.com/v2/#!/events in the url bar, it simply loads the index page.

    Please help! Thanks alot guys, much appreciated!

    ~ David
    Last edited by jscheuer1; 03-09-2012 at 11:03 AM. Reason: Format

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,979
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Did you edit the script? If not, this part (highlighted) is meaningless:

    Code:
    <li><a href="#!/events" onclick="ajax.load('/pages/events/eventsthisweek.php','content',false,'#!/events','');return false;">Events This Week</a></li>
    except that it might cause an error that allows the browser to load the hash from the href. Because if the return false; part fires, the href will not load the hash into the address bar.

    If you did edit the script, that last comma (red in the above) could potentially be a problem. And we would need to see your current version.

    Either way, to get the script to fire:

    Code:
    ajax.load('/pages/events/eventsthisweek.php')
    when the page is navigated to via the hash, you would need some extra javascript and/or PHP code.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Vernier (03-05-2012)

  5. #4
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Did you edit the script? If not, this part (highlighted) is meaningless:



    except that it might cause an error that allows the browser to load the hash from the href. Because if the return false; part fires, the href will not load the hash into the address bar.

    If you did edit the script, that last comma (red in the above) could potentially be a problem. And we would need to see your current version.

    Either way, to get the script to fire:

    Code:
    ajax.load('/pages/events/eventsthisweek.php')
    when the page is navigated to via the hash, you would need some extra javascript and/or PHP code.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    Hey,

    This is the code:

    http://codeviewer.org/view/code:238a

    This is my site (still being finished) http://habfab.com/v2
    Last edited by jscheuer1; 03-09-2012 at 11:18 AM. Reason: Format

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,979
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    I see you have jQuery on the page. But this does nothing:

    Code:
    $(function(){
      
      // Bind an event to window.onhashchange that, when the hash changes, gets the
      // hash and adds the class "selected" to any matching nav link.
      $(window).hashchange( function(){
        var hash = location.hash;
        
        // Set the page title based on the hash.
        document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
        
        // Iterate over all nav links, setting the "selected" class as-appropriate.
        $('#nav a').each(function(){
          var that = $(this);
          that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
        });
      })
      
      // Since the event is only triggered when the hash changes, we need to trigger
      // the event now, to handle the hash the page may have loaded with.
      $(window).hashchange();
      
    });
    because there's no hashchange event in javascript or jQuery. You could create one by changing:

    Code:
    $(window).hashchange( function(){
    to:

    Code:
    $(window).bind('hashchange', function(){
    and you could run it by changing:

    Code:
    $(window).hashchange();
    to:

    Code:
    $(window).trigger('hashchange');
    But just as you've misunderstood how to create and trigger a custom event in jQuery, I think the code in your hashchange function would be error prone as well. And I don't think a custom event is required here anyway.

    Those comments in the code look like you may have gotten it from somewhere else, did you?

    In any case, best to skip that for now, keep a copy of it around to play with perhaps. We can add it's intent to what's below.


    And that's not what I thought you were asking about anyway. I thought you wanted to change the hash while loading AJAX content, and to load AJAX content if there was a hash in the form of '#!/something' in the URL as the page loads.

    To do that, put this code in the head of the page after the link to jQuery:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	var hashlinks = $('.jqloadlink').click(function(e){
    		e.preventDefault();
    		hashlinks.removeClass('selected');
    		$(this).addClass('selected');
    		var hash = this.hash, page = this.getAttribute('data-page');
    		$('#content').load(page, function(){location.hash = hash;});
    		document.title = 'The hash is ' + hash.replace(/#?!\//, '');
    	});
    
    	hashlinks.each(function(){
    		var page, hash;
    		if((hash = this.hash) === location.hash && (page = this.getAttribute('data-page'))){
    			hashlinks.removeClass('selected');
    			$('#content').load(page);
    			$(this).addClass('selected');
    			document.title = 'The hash is ' + hash.replace(/#?!\//, '');
    			return false;
    		}
    	});
    });
    </script>
    Change this and similar and/or use it as a template for links you want to do this with:

    Code:
    <a href="#!/events" onclick="ajax.load('/pages/events/eventsthisweek.php','content',false,'#!/events','/pages/events/eventsthisweek.php');return false;">Events This Week</a>
    to:

    Code:
    <a class="jqloadlink" href="#!/events" data-page="/pages/events/eventsthisweek.php">Events This Week</a>
    Use the same class for all of them, but use different href hashes for each one and different data-page attributes for each one.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #6
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your reply John! I've now got this code: http://codeviewer.org/view/code:23bf

    The menu item for "Events this week" has gone white, it does load the content of the page in the div and it does change the url, but when i visit the url it still shows the index page :S

    Thanks

    ~ David
    Last edited by jscheuer1; 03-06-2012 at 07:11 PM. Reason: excessive quoting

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,979
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Code looks OK. But you still have that hashchange stuff on the page. Get rid of it and the:

    Code:
    <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
    If there's still a problem, give me a link to the page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #8
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Wow, thanks John! That works perfectly!

    Also when I change the url in the bar from say /#!/requests to /#!/jobs it only loads the title of the page, I have to press enter twice to load the contents. Also How can I change the title of the loaded page to just say HabFab &raquo; V1 ?

    Thanks

    ~ David
    Last edited by Vernier; 03-06-2012 at 08:16 PM.

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,979
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    I was just about to tell you to get rid of this when I noticed it was working:

    Code:
    <script type="text/javascript">
    $(function(){
      
      // Bind an event to window.onhashchange that, when the hash changes, gets the
      // hash and adds the class "selected" to any matching nav link.
      $(window).bind('hashchange', function(){
        var hash = location.hash;
        
        // Set the page title based on the hash.
        document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
        
        // Iterate over all nav links, setting the "selected" class as-appropriate.
        $('#nav a').each(function(){
          var that = $(this);
          that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
        });
      })
      
      // Since the event is only triggered when the hash changes, we need to trigger
      // the event now, to handle the hash the page may have loaded with.
      $(window).trigger('hashchange');
    });
    </script>
    Now, I'm a little out of my depth here only because there's so much going on on the page that I'm not sure why that's working or if it's cross browser enough to rely upon. But let's not worry about that just yet. If it will work for what we want it to in most browsers, we can try to make adjustments later.

    Here's what we should try. First back up what you have, as it's not so bad.

    Next, get rid of:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	var hashlinks = $('.jqloadlink').click(function(e){
    		e.preventDefault();
    		hashlinks.removeClass('selected');
    		$(this).addClass('selected');
    		var hash = this.hash, page = this.getAttribute('data-page');
    		$('#content').load(page, function(){location.hash = hash;});
    		document.title = 'The hash is ' + hash.replace(/#?!\//, '');
    	});
    
    	hashlinks.each(function(){
    		var page, hash;
    		if((hash = this.hash) === location.hash && (page = this.getAttribute('data-page'))){
    			hashlinks.removeClass('selected');
    			$('#content').load(page);
    			$(this).addClass('selected');
    			document.title = 'The hash is ' + hash.replace(/#?!\//, '');
    			return false;
    		}
    	});
    });
    </script>
    Then change this:

    Code:
    <script type="text/javascript">
    $(function(){
      
      // Bind an event to window.onhashchange that, when the hash changes, gets the
      // hash and adds the class "selected" to any matching nav link.
      $(window).bind('hashchange', function(){
        var hash = location.hash;
        
        // Set the page title based on the hash.
        document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
        
        // Iterate over all nav links, setting the "selected" class as-appropriate.
        $('#nav a').each(function(){
          var that = $(this);
          that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
        });
      })
      
      // Since the event is only triggered when the hash changes, we need to trigger
      // the event now, to handle the hash the page may have loaded with.
      $(window).trigger('hashchange');
    });
    </script>
    to this:

    Code:
    <script type="text/javascript">
    $(function(){
    	var hashlinks = $('.jqloadlink');
      
      // Bind an event to window.onhashchange
      $(window).bind('hashchange', function(){
        var hash = location.hash;
        
        // Set the page title based on the hash.
        //document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
        
        // Iterate over all class="jqloadlink" links, setting the "selected" class and executing their AJAX code as appropriate.
    	hashlinks.each(function(){
    		var page;
    		if(this.hash === hash && (page = this.getAttribute('data-page'))){
    			hashlinks.removeClass('selected');
    			$('#content').load(page);
    			$(this).addClass('selected');
    			return false;
    		}
    	});
      });
      
      // Since the event is only triggered when the hash changes, we need to trigger
      // the event now, to handle the hash the page may have loaded with.
      $(window).trigger('hashchange');
    });
    </script>
    Then bring back:

    Code:
    <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
    It should go just before the hashchange code we just modified. And if you can, upgrade to version 1.3:

    https://raw.github.com/cowboy/jquery...hchange.min.js

    Even if it doesn't work, let me see it before you get rid of it. We may be able to fix it.

    Oh, and now the title will remain whatever the title tag on the page says it is. That currently is:

    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HabFab V1</title>
    <link href="css/global.css" rel="st . . .
    Change it to:

    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HabFab &raquo; V1</title>
    <link href="css/global.css" rel="st . . .
    or HabFab &raquo; V2 - This is version 2, right?

    We could have the hash come after, like:

    HabFab V2 eventstoday
    The browser cache may need to be cleared and/or the page refreshed to see changes.
    Last edited by jscheuer1; 03-07-2012 at 02:24 PM. Reason: tried out some of the code
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. #10
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Hiya John, thanks for your reply!

    My code is now this: http://codeviewer.org/view/code:23cb

    It's still loading as "This hash is X"

    It's also still taking two times after pressing enter to load.

    I cleared my cache, tried holding f5 for a few seconds etc.

    Thanks John

    ~ David

Bookmarks

Posting Permissions

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