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

NeMO! Just being silly, but seriously, need more info, like what are you having problems with?

Code:

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

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 ?

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 ?

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?

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...

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.

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.

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.

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.

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!

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.