Solved

Chained Select Menus + Load AJAX content

Posted on 2010-09-06
5
758 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

895 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now