Solved

Including external page on JS "onchange"?

Posted on 2007-03-19
5
258 Views
Last Modified: 2012-05-05
I have a drop-down select menu:

<select name="pageID" onchange="insertTemp(this.options[this.selectedIndex].value);">
                                    <option value="form1.php">Form1 template</option>
                                    <option value="form2.php">Form2 template</option>
</select>

<div id="pageInc">Page form goes here</div>


Now, how would I write a JS such that, when someone chooses a value (a page), an external page  gets included?

I have this JS:

function insertTemp(val)
{

var tmpObj = document.getElementById('pageInc');

                  tmpObj.innerHTML = val; //include
}

</script>

I know it might something to do with AJAX, but I am a bit stuck. Can anyone help?
0
Comment
Question by:identityless
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 10

Expert Comment

by:BobSiemens
ID: 18752278
Don't do tmpObj.innerHTML, use document.load
0
 

Author Comment

by:identityless
ID: 18752722
I tried it, but how would I actually include the external page?
0
 
LVL 3

Accepted Solution

by:
exoska earned 500 total points
ID: 18762859
well, yes you need an ajax, or some more complex iframe based solution,
and for the ajax simply get the prototype, if you still d not checked out. basic and most powerful.
(http://www.prototypejs.org/) it is one of the top most js libs for ajax and general developing (IMHO)

below i simply pasted a code that s fit enough to include a remote page.
if you d like to send some other paramaters, fill in the parameters property.

<html>
  <head>
  <script src="js/prototype.js"></script>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script>
  function insertTemp(val)
{

    var tmpObj = document.getElementById('pageInc');
   
            var req= new Ajax.Request(
            val,
            {method: 'post',parameters:'',  onComplete:
                  function(resp){
                    alert(resp.responseText)
        tmpObj.innerHTML = resp.responseText;
                  }
            }
            );
                 
}

</script>
  </script>
  </head>
  <body><select name="pageID" onchange="insertTemp(this.value);">
                                    <option value="">select</option>
                                    <option value="form1.php">Form1 template</option>
                                    <option value="form2.php">Form2 template</option>
</select>

<div id="pageInc">Page form goes here</div>
  </body>
</html>

very important thing is, for IE you have to be running it on a web server( like your localhost or something on the net) , but using mozilla you can test them out on a regular file( if 'form1.php' exists :) )

er, btw http://www.petefreitag.com/item/515.cfm check here out for some ajax tutorial, using the mighty prototype.
0
 
LVL 3

Expert Comment

by:exoska
ID: 18762865
sorry for the editor metatag(pspad :) )
and of course you can remove the alert function after you are finished.
0
 
LVL 10

Expert Comment

by:BobSiemens
ID: 18765247
You could use an IFRAME for example:
(from http://www.cryer.co.uk/resources/javascript/script4.htm)

    <iframe name="IFrameName"></iframe>

Any html between the <iframe> and </iframe> will be visible if the browser does not support inline frames. The <iframe> takes a number of other parameters, such as:
frameborder       yes or no       Whether the inline frame should have a border.
height       number or percentage       The height of the frame in pixels or as a percentage of the available height.
scrolling       yes, no or auto       Whether scroll bars are provided. The default is auto.
src       file name       The name of the html file to include an display at that point.
width       number or percentage       The width of the frame in pixels or as a percentage of the available width.

It is the 'src' parameter that is of interest here. To change it dynamically either:

    frames['IFrameName'].location.href='http://www.cryer.co.uk/emily'

Note, the alternative:

    document.all.IFrameName.src='www.cryer.co.uk'

0

Featured Post

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

696 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