Solved

Chained Select Menus + Load AJAX content

Posted on 2010-09-06
5
760 Views
Last Modified: 2012-06-21
Hi Experts,

I am using a script from Dynamic Drive (View script here) to have chained select menus.

In the example I have attached, I have set this up with 2 chained menus and it all works fine, I can easily make the final select menu take the user to a new page however I am trying to make the final selection load in a HTML page inside a div within the same page as opposed to leaving this page.

I am a very weak coder and hoping one of you great experts may be able to assist with this in some way.

Any help at all would be greatly appreciated.
sample.zip
0
Comment
Question by:mobius1980
  • 3
  • 2
5 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33615356
In the 'goListGroup' method of chainedmenu.js, you need to make the ajax call rather than using window.location or window.open.

for making ajax call see
http://www.w3schools.com/ajax/default.asp
http://www.ajaxtutorial.net/
0
 

Author Comment

by:mobius1980
ID: 33616084
I'm sorry, you lost me... When I said I am a weak coder, I mean very weak coder.  :-)

I presume you mean between line 26 and 30?


else if (newwindow==1)
window.open(selectedOptionvalue)
else
window.location=selectedOptionvalue
break

Open in new window

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33616298
Yes, instead of these, you have to make an ajax call to these locations.
0
 

Author Comment

by:mobius1980
ID: 33623018
Ok, I'm still no closer to a result here... I apologise for being a pain, I'm not asking you to write the code for me but I am simply lost. Everything I have tried just either loads a new page or does nothing.

Anybody else able to provide a little assistance for a complete n00b like myself?  :-)
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 33629254
this is how you make a simple ajax request
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
Use the following code


function makeAJAXCall(url)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    { 
    //this is where the ajax response will be loaded. you can change it to do something else with the ajax response
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

Open in new window

0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question