Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript HashChange

    Hi, I need some help on calling a Javascript hashChange from an HTML page.

  • #2
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    NeMO! Just being silly, but seriously, need more info, like what are you having problems with?

    Code:
    window.onhashchange=function(){
       alert("Hash has changed!");
    }

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi. This is the script I can't get to work on my page, I have embedded the script within script tags on my page.

    The goal is to load a HTML page within an ID on my page, as I have a series of ID within my page, when a email form is sent a separate HTML page loads I would like this HTML to load within an ID, understand ?

  • #4
    New Coder
    Join Date
    Jan 2011
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi. This is the script I can't get to work on my page, I have embedded the script within script tags on my page.

    The goal is to load a HTML page within an ID on my page, as I have a series of ID within my page, when a email form is sent a separate HTML page loads I would like this HTML to load within an ID, understand ?

  • #5
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    Are you testing it by going to a URL with a specific hash, or by changing the hash after the page loads?

    Also, if your initiated the hash change, why not initiate the changing of what is displayed than detecting the hashchange you did in the first place?

  • #6
    New Coder
    Join Date
    Jan 2011
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also, if your initiated the hash change, why not initiate the changing of what is displayed than detecting the hashchange you did in the first place?
    Hi, I don't follow. Here is what I was told about hashChange, hopefully you can clear up some things. I have a form, when the form is filled out and submitted a separate HTML pages loads telling the user the form has been submitted, I want this separate HTML page to load within a hash or ID as in ID#Form, I was also informed that with hashChange I can give a direct link to whatever is on my page instead of telling the user to go to the main page first then clicking this, then clicking that etc etc. Can this hashChange script do what I was told it can do ? If so then I will proceed...

  • #7
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    If your submitting a form you can do one of many things:

    1. Typical submit the form, new page loads from server
    2. Submit form in a hidden iframe, and then change the page or load a page in an AJAXy way.
    3. Submit form in a hidden iframe and redirect the user to another page.

    You can also redirect the user to a different hash, but that just seems unnecessary.


    Best way to describe what I think your doing is to use a metaphor:

    Would be like turning the key in the car, and instead of it just turning the engine and getting it started, you are wanting it to turn on the daylight headlights, and if the headlights come on, it makes sure the engine comes on, which both get the same end result, just one seems unnecessary.

    Or maybe I am misunderstanding what you are wanting to do.

  • #8
    New Coder
    Join Date
    Jan 2011
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have the form setup, it works the problem is when you submit the form a separate HTML page loads telling the user 'message sent'. I want that 'message sent' HTML page that is sent though the PHP form to be contained within a DIV#ID with CSS width and height that is already on my page.

  • #9
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Ah ok so you're trying to use Ajax with the "hash workaround" method to avoid the usual navigation/bookmarking problem.

    You'll have to do those things:
    1. Provide an onsubmit="doAjax(); return false;" attribute/event handler to the form.
    2. Implement the doAjax() function to setup an Ajax request to the same php that is mentioned in the action="" attribute of the form. When the request is finished (onreadystatechange) show the output of the php in the DIV#ID. Finally set the hash of the current page by writing to window.location.hash
    3. in window.onload check to see whether there is a hash appended to the URL ... you can read it from window.location.hash. Depending on the hash, you call an Ajax function to return the ouput you need

    I think you won't need onhashchange for all that.

  • #10
    New Coder
    Join Date
    Jan 2011
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Visit this page, the form does not work it will atleast go to a page after entering in the information, whatever you want as it's not a valid form, yet. A thank-you.html page will load, I want that thank-you.html page to load within the ID#Content which is on the same page, understand not a separate page.

  • #11
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    First thing you need to do is redirect the form submission, either using javascript to do it, or set the target of the form to a hidden iframe, I would prefer the javascript option. If you are new to javascript, I would use jQuery or some other popular JS library to help you take care of the small details. With jQuery, you can do something like:

    http://api.jquery.com/jQuery.post/
    Code:
    $.post(url, formData, function(data){
       //functions to do on success and read response from server which is in data
    });
    In the success, you will want to change the hash like:
    Code:
    location.href="#test";
    You will also want to load your content in the div, which you can do with jQuery again:

    http://api.jquery.com/load/
    Code:
    $('#containerID').load(urlToPage);
    Finally, you will want to a window.onload like devnull69 said, or use jQuery as well:

    http://api.jquery.com/ready/
    Code:
    $.ready(function(){
      switch(location.hash.toLowerCase()){  //use toLowerCase so its case insensitive
          case '#test':
               $('#containerID').load(urlToPage);
               break;
          default:
               break;
      }
    });
    You can also take a more functional approach:
    Code:
    function loadPage(hash){
       switch(hash.toLowerCase()){
           case '#formsuccess':
              $('#container').load('/formSuccess.html');
              break;
           default:
              break;
       }
    }
    
    function submitForm(){
      $.post(url, formData, function(data){
         loadPage('#formSuccess');
      });
      return false;
    }
    
    $.ready(function(){
      loadPage(location.hash);
    });
    Hope that helps!

  • #12
    New Coder
    Join Date
    Jan 2011
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am new to Javascript, you have at me at a loss on how to apply this to my page and my form to make it work.


  •  

    Posting Permissions

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