Learn VBA & Macros in 1 Week!

JavaScript - Double Combo Box - Each Selection Can Load External Div Content

Full Excel VBA Course - Beginner to Expert

Double Combo Box - Each Selection Can Load External Div Content	View Content

Hi guys, I need your help in this...

I try to reuse double combo boz with description in http://www.javascriptkit.com/script/...ombotext.shtml...

I need to make it load content from external div instead of text in array as description. This is because there are so many selection and some can refer to the same description. I already changed the description so it can read html tag. But I have no idea how to put div id inside array and load the div content.

Anyone can help me solve this? Really appreciate your help

Full Excel VBA Course - Beginner to Expert

Using Combo Box To Create Second Combo Box And Add Second Selection To Session

Similar Tutorials

View Content

Hi Everybody

This is probably a very commonly asked question, however after much searching online I can't seem to find a straightforward answer. If anyone knows the code or a link to a place with a simple example it would be great.

What I have got is a form that a user has to fill out and submit (when validated all variables are stored in a session and emailed after multiple forms are completed), currently I have radio buttons, text boxes and a combo box/ drop down list (for location). All parts are working fine and validating fine. My problem is to do with the combo box//ddl. I have successfully validated the ddl so the user must select a location onsubmit and it is added to session and passed fine.

At the moment the ddl only has cities or towns in it however as I would like to include different states and possibly different countries I need a code that validates the state first and then only gives the cities/towns that are in that state (otherwise my ddl would be to large). I can do this with links however I can't seem to do it in a form.

I am trying to do it this way

DDL has list of all states that on mouseover/ onclick the list is revealed. onclick of a specific state populates another ddl with only the cities cities/ towns that are in that state and onclick of specific city selects the location whereby onsubmit the location is stored in the the session for submission by email

Thanks in advance for your help

I still have the following two major issues. 1) Firstly I need to be able to send the selection from the second combo box by php. 2) secondly I need the combo box to appear within the table. (I thought this should be easy, but for the life of me cannot figure out how to get the dynamic combo into my table inside the form)

I have managed to send the selection from the first combo box with the form and also I can send a selection from the second combo, however onsubmit regardless of what is selected in the second combo box it simply sends the last option not the one selected. I have spent many hours trying to figure out why this is the case to no avail.

I have included my code for anyone who may be able to help. Lastly when I have figured out these 2 (with a little help) I should be able to sort out the validation by myself. Please ignore any code that is not relevant

<html>
<head>

<script type="text/javascript">

var this1;

window.onload = function() {
if (!document.all) document.captureEvents(Event.CHANGE);
document.getElementById('myddl').onchange = readDDL1; }

function readDDL1() {
var ddlobj = document.getElementById('myddl');
var currentSelection = ddlobj.options[ddlobj.options.selectedIndex].value;
if (currentSelection == '') currentSelection = ddlobj.options[ddlobj.options.selectedIndex].text;
doDDL2(currentSelection);
}

function doDDL2(ddl1Selection) {

var existingDDL2;
if ((existingDDL2 = document.getElementById('myddl2')) != null) existingDDL2.parentNode.removeChild(existingDDL2);

var ddl2Options;
switch (ddl1Selection) {
case "Western Australia":
ddl2Options = ["Please Select A Location", "Karratha", "Perth"]; break;
case "Queensland":
ddl2Options = ["Please Select A Location", "Brisbane", "Gold Coast"]; break;
}

if (typeof ddl2Options == "object") {
ddl2 = document.createElement('select');

ddl2.id = "myddl2";
var forVar;
for (forVar in ddl2Options) {
var newOption = document.createElement('option');
newOption.appendChild(document.createTextNode(ddl2Options[forVar]));
ddl2.appendChild(newOption);

}
document.body.appendChild(ddl2);

}

document.testform.this1.value = ((ddl2Options[forVar]));

}

function checkFrequency() {
return ShowResults();

}

function validate(){
var digits="0123456789"
var temp

if (document.testform.location.selectedIndex == 0) {
alert("Please Select a State");
return false
}

if (document.testform.location2.selectedIndex == 0) {
alert("Please Select a Location");
return false
}

return true
}

</script>

<style type="text/css">
.td_freq { background-color:yellow;
height:40px;
text-align:center;
}
.td_sev { background-colorink;
height:40px;
text-align:center;
}
.td_wi { background-color:lightgreen;
height:40px;
text-align:center;
}
</style>

</head>
<body>

<FORM name="testform" action='./emlapd.php' method='post' onsubmit="return checkFrequency()">

<input type='hidden' name='this1'>

<table align="center" border="1" width="40%">

<tr><td><b>Current Worksite State:</b><font color="red">*</font></td>
<td>
<select name="location" width='53' id="myddl">
<option value="0">--- Please Select Your State ---                 & nbs p;                & n bsp;                                 & nbs p;        </option>
<option value="Western Australia">Western Australia</option>
<option value="Queensland">Queensland</option>

</select>

</td></tr>
<tr><td><b>Location:</b><font color="red">*</font></td>
<td>

</td></tr>

</table>

<tr>
<th colspan="2">
<input type="submit" name='submit' value="Submit" onclick= "return validate()">
</th>
<td colspan="10"> </td>
<th>
<input type='reset' name='reset' value='Clear Form'>
</th>
</tr>
</table>

</FORM>
</body>
</html>

Thankyou very much to everyone that may help

So I can place the DDL inside the form, however it places it at the end of the form. I want it somewhere in the middle (immediately following first combo box)

My other main issue is irregardless of the selection it simply posts the last option from the DDL not the one selected. Therefore I still want the second combo box to appear immediately below the first combo box and whatever option is selected from the second combo box I want to be posted with the rest of the form data.

If you have any other ideas that would be great

Obviously the reason I am still getting the same incorrect post is because the variable posted is still this1 from my code which reads the last value from the DDL. I have tried with all other variables to send as well ie ddl2 however still can't seem to send the selection.

So in its current state how can I send the selection and place the second DDL within the form??

Thank you

Double Combo With Image

Similar Tutorials

View Content

hi

I wonder if someone out there can help me.

I am very new to javascript and i have manged to understand a little of a double combo box with description however I would now like to be able to not only change the comment underneth but also add an image.
This image (along with the comment) changes everytime the dropdownbox changes.
I just cant seem to add the image.
Please can anyone help
I would really appreciate it and be extremely grateful.
gr
T

Javascript Experts: Help With Double Combo Box Please.

Similar Tutorials

View Content

Hi, I'm Sam and I'm new to this forum. I have a few question about double combo box. Before I get down on details I have to confess that my knowledge about javascript is almost zer0 so if you're posting any answer please elaborate.

I've found this code somewhere online and I'd like to make some changes to this code. I've searched everywhere but couldn't find any answer yet.

As you can see in this code, the javascript function can open a page in iframe once the user clicks on "Go".

I'd like to know how to add links to the options in the first box so that it can open an iframe by itself, plus loads the next box , so when the user selects an option from the first box, the first box opens a page in iframe then loads the options for the second box.

There should be two iframes side by side, the first iframe to open a page for the first box once the user selects the options in the box and the second ifram opens a page for second box once the user clicks on the "go".

I just don't know how to add links to the options in the first box.

Here's the code:
Code:

<html>
<head>
</head>

<body>



<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>
<select name="stage2" size="1">
<option value="http://cssdrive.com">CSS Drive</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>

<script>
<!--

/*
Double Combo Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/

var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("CSS Drive","http://cssdrive.com")
group[0][1]=new Option("News.com","http://www.news.com")
group[0][2]=new Option("Wired News","http://www.wired.com")

group[1][0]=new Option("CNN","http://www.cnn.com")
group[1][1]=new Option("ABC News","http://www.abcnews.com")

group[2][0]=new Option("Hotbot","http://www.hotbot.com")
group[2][1]=new Option("Infoseek","http://www.infoseek.com")
group[2][2]=new Option("Excite","http://www.excite.com")
group[2][3]=new Option("Lycos","http://www.lycos.com")

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
document.getElementById("search").src=temp.options[temp.selectedIndex].value
}
//-->
</script>

</form>

<iframe id="search" name="photos_frame" src="my_photo_page_needs_to_load_into_this_frame.htm" width=800 height=400 marginwidth=0 border=1 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>


</body>
</html>

Double Combo Not Working In Stage 2

Similar Tutorials

View Content

I have the double combo script working on another website for an auto parts dealer with only 1 make so the options are Choose Model and then Choose Years for that model, i.e., 1979-1987 for one model and 1988-1994 for option 2 of the same model, and similar options for the other models. The links go to the cart for that Model/Year and everything works fine.

This time I'm trying to set up the same script where this auto parts dealer has 21 Makes with a span of years for each make: 2011 to 1969, i.e., about 40 years for every Make. This parts dealer wants the years listed first and then the makes and from there I'll link to the cart for the model.

I have the code set up (with only 4 years set up for the first Make as a test, which is VW/Audi) just so I can get it working, however after picking the year it's not letting me pick a make. It appears to choose one randomly with no other options. I have posted the code below minus most of the makes and years to save space

I have three questions:

1. Is this the right script for this search pattern?
2. Is there a way to fix this so I don't have to list 40 years for every make?this would cause massive code bloat.
3. Is there an error in my code?

PS. I'm not a Javascript programmer but do understand some of what it is doing.

<form name="doublecombo">
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option value="">Choose Year</option>
<option>2011</option>
<option>2010</option>
<option>2009</option>
<option>2008</option>
<option>2007</option>
<option>2006</option>
<option>2005</option>
<option>2004</option>
</select><br>

<select name="stage2" size="1">
<option value="">Choose Make</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">

<script>

</script>

</form>

Load From External File

Similar Tutorials

View Content

Hi guys. I've made a html file with three lists to populate different pages of my site. Then i've called the html with SSI. let me show the code

the HTML with the list's
Code:

<div id="list_box">
<ul class="list">
<li><a href="#">item01</a></li>
<li><a href="#">item02</a></li>
<li><a href="#">item03</a></li>
<li><a href="#">item04</a></li>
<li><a href="#">item05</a></li>
</ul>
</div>

<div id="list_box">
<ul class="list">
<li><a href="#">item06</a></li>
<li><a href="#">item07</a></li>
<li><a href="#">item08</a></li>
<li><a href="#">item09</a></li>
<li><a href="#">item10</a></li>
</ul>
</div>


<div id="list_box">
<ul class="list">
<li><a href="#">item11</a></li>
<li><a href="#">item12</a></li>
<li><a href="#">item13</a></li>
<li><a href="#">item14</a></li>
<li><a href="#">item15</a></li>
</ul>
</div>

the HTML with the list loaded
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>



<style type="text/css">
<!--


#list_box {
	height:100%;
	width: 100%;
	padding-top: 15px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 20px;
	background-color: #cccccc;
	overflow: hidden;	
}

ul.list li {
	list-style-type: none;
	text-align: left;
	text-decoration: none;
}


.list a:link,
.list a:visited {
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	line-height: 15px;
	color: #036;
	text-decoration: none;
	text-align: left;
	font-weight: bold;
	font-style: normal;
}

.list a:hover{
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	line-height: 15px;
	color: #ffffff;
	text-decoration: none;
	text-align: left;
	font-weight: bold;
	font-style: normal;
}

-->
</style>

</head>

<body>

<div id="list_box">
<!--#include file="list.html" -->
</div>
</body>
</html>

the zip with the sample I've made
load_external.zip

I wanted to ask how can I make an item from the list's to have a different css in the html with the loaded list's. because in each page one of the items (that are all buttons) will be up or should I say active.

can someone tell me how can I do this please. Maybe with javascript?

thanks in advance

Load External Page Issue

Similar Tutorials

View Content

Hi all,

I'm a bit newbie in scripting, but i'm trying to learn by myself . Hope you can help me with this

I have two main pages, called index.html and news.html. Both pages loads a third page called news_content.html, using AJAX function load.

This third page has a pagination script, but the pagination has to be different if the page has been loaded from index.html or news.html (for example, the max items per page has to be different). The pagination settings are defined inside news_content.html.

How can I know, from the content page, with one has loaded it? Or... its possible to pass values from the main pages into the content page, in order to change the pagination settings?

Thanks in advance!

Lightbox To Load External File

Similar Tutorials

View Content

Hi

anyone knows a lightbox that can be called like this?

Code:

<img src="imgs/edit.png" border="0" onclick="lightbox.open( 'test.php' ,'test');" style="cursor : pointer;">

or modify slimbox to work with iframe?

sorry for bad english

Thanks

On Click Load External Html Into A Div Tag?

Similar Tutorials

View Content

Is there a way onclick to load external html into a DIV tag, but without iFrame usage?

Load External Div Into A Page Via Jquery When The Div Has Script

Similar Tutorials

View Content

Hi I'm trying to load a part of a page (that has script in it) into another page using jquery. However, though the html loads in correctly, none of the script is working.

I'm using code from http://css-tricks.com/video-screenca...namic-content/
ie. the pages all work without java (static pages) and when java is enabled, instead of going to bio.html you get taken to ..#bio.html.

However if I've got any script I would like to be loaded .. ie. lightbox gallery or even a simple jav split and put back together email address hider.

Any help greatly appreciated. I'm not very clued up about jquery at the moment unfortunately and though I've been trying to read and learn, alot is going over my head..

Not sure how best it is to show you the page as it's not live yet. Maybe if it helps I can upload a zip of the site. It's a simple 6 page musician site.
Though my code is exactly like the css-tricks page, just that I have a lightbox on one page (which loads fine if there's no hash in the address - but when hash is there, it shows thumbnails, and when you click one, it just takes you to the larger .jpg destination page (no lightboxness etc).)

Thanks

How Can I Load A Slow External Js After Page Loads?

Similar Tutorials

View Content

I have a slow loading external JavaScript that displays a calendar widget. When I put it in my sidebar, while the page loads, it cuts off where the calendar should be until the JavaScript for it finishes.

How can I make the script load after the page finishes loading?

I tried creating a function at the end of the HTML and calling the function in the sidebar, but I think because the function was being called before the script was executed, it didn't work.

I appreciate any and all help!

Multiple Combo Boxes - Show All Records If Sub-combo Isn't Used

Similar Tutorials

View Content

Hello

I'm using the combo box selection menu by Elviro Mirko from this site (http://www.javascriptkit.com/script/...plecombo.shtml)

I have made amendments to show my own data, however what I would like to happen is if the user selects from the top combo only, then all the records would be shown, whereas selecting from the second combo merely 'drills down' and shows the records required. - Hope that makes sense.

The code is as follows:

Code:

// first combo box

	data_1 = new Option("Douglas - DIS", "$");
	data_2 = new Option("Douglas - COE", "$$");
	data_3 = new Option("Peel - DIS", "$$$");
	data_4 = new Option("Peel - COE", "$$$$");
	data_5 = new Option("Ramsey - DIS", "$$$$$");
	data_6 = new Option("Ramsey - COE", "$$$$$$");
	data_7 = new Option("Castletown - DIS", "$$$$$$$");
	data_8 = new Option("Castletown - COE", "$$$$$$$$");		
// second combo box

	data_1_1 = new Option("Registry Office Douglas", "-");
	data_1_2 = new Option("Broadway Baptist Church Douglas", "-");
	data_1_3 = new Option("Finch Hill Congregational Church Douglas", "-");
	data_2_1 = new Option("St Thomas's Church", "--");
	data_2_2 = new Option("St Barnabas Church", "--");
	data_2_3 = new Option("St George's Church", "--");

The HTML code is as follows:

Code:

<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">	
			
			<option value="">Select a Register...</option>
			<option value="Douglas - DIS">Douglas - DIS</option>
			<option value="Douglas - COE">Douglas - COE</option>
			<option value="Peel - DIS">Peel - DIS</option>
			<option value="Peel - COE">Peel - COE</option>
			<option value="Ramsey - DIS">Ramsey - DIS</option>
			<option value="Ramsey - COE">Ramsey - COE</option>
			<option value="Castletown - DIS">Castletown - DIS</option>
			<option value="Castletown - COE">Castletown - COE</option>
			

			</select>
<BR><BR>
			<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
			<option value="">Select a venue...</option>
			
			</select>

the link for the actual site is

http://www.manxbmd.com/cgi-bin/db.cg...m;db=marriages

If you choose Douglas-COE and search, then 0 records are found, if you choose Douglas-COE followed by St Thomas's then still 0 records are found but if you search the surname Allitson you'll see that there is a record there.

I'm not sure where I've gone wrong - I'm completely new to Javascript.

Any suggestions welcomed.

regards

Pendle

Random Content From External Html File Into A Div

Similar Tutorials

View Content

Hi people, I would like to make the following thing:
Load a random file, from a xml list, into a div. I've made a scheme where I show what I was trying to make, but I don't know how to make it.

I would like to load into a div a random HTML file, loaded from a XML. Does anyone knows an similar example or can tell me how's possible to do this, please? is it better to do with Javascript ?

thanks for the attention guys

After Load The Content Won't Appear

Similar Tutorials

View Content

Hi,
Well this plugin stops working after completely loading the flash content or game. I did a few changes to it but still, it won't show the game after completely loading the flash.
Can someone tell me what's wrong?
Here is the link to live working example http://files.cryoffalcon.com/Piecema...s/testing.html

Does This Script Actually Load Content

Similar Tutorials

View Content

Hello,
Well I have script that claims that it loads the flash content while it is showing seconds or advertisement. So as I don't know about scripts I have no Idea if it actually do that or not as What I visually see is that it let flash content load once the seconds of disappears. So that's why I want an expert advice on it.
And how the seconds of this script works Only if this script actually do what It claims, then I would like to know when does it send alert to load the content (as I would like to put the alert from the start) and how to show it for more or less seconds.

Relevant Markup:
Live Demo http://files.cryoffalcon.com/MyFootP...%20Loader.html

What is the live demo made up of:

Code:

  <div class="colorchooser">
    <!--more-->
    <div class="displaygame_part">
    <center>
    <div id="ads" class="ads">
    <h1>
    ADVERTISEMENT</h1>
    <center>
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-0726197409084548";
    /* bloghutsgame */
    google_ad_slot = "5324930917";
    google_ad_width = 336;
    google_ad_height = 280;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script></center>
    To skip it click <a href="javascript:ShowHide();">here</a>
    <script type="text/javascript">
    window.onload = function() {
    startCountDown(8, 1000);
    }
    
    function startCountDown(i, p, f) {
    // store parameters
    var pause = p;
    var fn = f;
    // make reference to div
    var countDownObj = document.getElementById("countDown");
    if (countDownObj == null) {
    return;
    }
    countDownObj.count = function(i) {
    // write out count
    countDownObj.innerHTML = i;
    if (i == 0) {
    // execute function
    fn();
    // stop
    return;
    }
    setTimeout(function() {
    // repeat
    countDownObj.count(i - 1);
    },
    pause
    );
    }
    // set it going
    countDownObj.count(i);
    }
    </script>
    <center>
    <img border="0" height="117" width="201" src="@---put the link of the image of fancy pants(its the loader)---@" />
    </center>
    <div id="countDown" style="display: inline;">
    </div>
    seconds for the game to load...
    </div>
    <div id="gamecontent" style="visibility:hidden; display:none">
    <div class="gofulldear">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="100%">   <param name="movie" value="http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf">
    <param name="quality" value="high">
    <param name="allowNetworking" value="internal">
    <embed src="http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf" width="100%" height="100%" align="center" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allownetworking="internal"></embed> </object>
    </div>
    </div>
    <script type="text/javascript">
        function turn_vis_on(id) {
            if (document.getElementById) { // DOM3 = IE5, NS6
                document.getElementById(id).style.display = 'inline';
                obj = document.getElementById(id);
                obj.style.visibility = "visible";
                }
        }
        function turn_vis_off(id){
            if (document.getElementById) { // DOM3 = IE5, NS6
                document.getElementById(id).style.display = 'none';
                obj = document.getElementById(id);
                obj.style.visibility = "hidden";
            }
        }
        function ShowHide()
        {
            turn_vis_off("ads");
            turn_vis_on("gamecontent");
            // alert('4sec!');
        }
        document.getElementById("ads").style.zIndex = 100;
        timeoutID = setTimeout(ShowHide, 15000);
    
        </script>
    </center></div>
    </div>

Note: It is game so there can be sound or music in it./ For any more information requirement please let me know I will edit it, so to make it as relevant as possible^^.

Load And Unload Content

Similar Tutorials

View Content

I have reached the max width of the ipad (122900px) and need to find a way to load and unload the content dynamically.

I can load the content using jcarousel (ajax) and I use iscroll to achieve the scrolling effect. However I still hit the ipad's limit in length.

How can I unload the already viewed content when scrolling or clicking the next button? Also how can I load the content when arriving at a new image?

Thank you very much for your help with this.

Cannot Get Js Content From Ajax Page To Load

Similar Tutorials

View Content

I have been searching online for hours, but it is possible I'm just not thinking of the correct keywords. I have included a basic illustration of the current setup (which does not work). The issue lies with the page that is the desired output. I have a far deeper issue which I have narrowed down to javascript on the final .asp page not loading at all.

On default.asp, I am calling a function contained in 'ajax_call-contentselection.js'

Code:

<a onclick="func_displaycontents('restaurants'); return false">displayajaxcontent</a>

Honestly, I don't believe the following piece of code (ajax_call-contentselection.js) is relevant, as it is standard ajax code, but just in case:
Code:

function func_displaycontents(var_type){     
	var xmlHttp = GetXmlHttpObject();     
	var url = "../_include/ajax_display-contentselection.asp";    
	url += "?type="+var_type;

	if (!xmlHttp){          
		alert ("Browser does not support HTTP Request")          
		return     
	}    
		
	xmlHttp.onreadystatechange=function(){     
	if(xmlHttp.readyState == 1){
       		document.getElementById("div_ajaxfillattractions").innerHTML = "<div style='padding-top:50px;color:white;width:930px;text-align:center;'><img src='../_images/ajax-loader.gif'/><br/>Loading...</div>";
	};
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
			document.getElementById("div_ajaxfillattractions").innerHTML=xmlHttp.responseText;
        	}     
	};     
	xmlHttp.open("GET", url, true);     
	xmlHttp.send(null);
}

The other contents of "ajax_display-contentselection.asp" are displayed properly in "div_ajaxfillattractions" of "default.asp", but no javascript code on that page loads. If I use "ajax_display-contentselection.asp" as an include file on "default.asp", I get the javascript alert of 'Success', but when I initiate the AJAX it does not work, so I know there isn't a problem with the javascript.

Please let me know if I sucked at explaining something, or more detail is needed.

Thanks in advance,
Matt

Open Page And Load Content Into Div

Similar Tutorials

View Content

Hey there

I want to know how i can make a page that opens and loads content in a div tag when i click a certain link on my home page.

i have a javscript code to load content into a div tag when the link is on the same page as the div tag, but i want to get a script where it will open a new page and load content into a div tag on that page.

like the link must be something like main.html?div=content.html

i know how to do this with iframes, but i want to work with div tags

thank you

javascript for loading content into the div tag on the same page :

PHP Code:

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function clientSideInclude(containerid, url){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(containerid, page_request)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(containerid, page_request){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

Hide A Loading Div If Not New Content Available To Load

Similar Tutorials

View Content

Hello,

I have been everywhere still trying to find a solution of this,

I have the following code which loads a new html page into the bottom of my document when the user reaches the bottom of the page.

Code:

alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (alreadyloading == false) {
			$("#loading").slideDown();
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#newcontent').children().last().after(data);
                alreadyloading = false;
                nextpage++;
				$("#loading").slideUp();
            });
        }
    }
});

#Loading is a div which contains a loading jpeg which is fixed to the bottom of the screen. This div appears when the user hits the bottom of the screen, and then disappears once the content has fully loaded.

The problem I have is that once the user has loaded all the content that is available. Say I have 'page2.html, page3.html, page4.html' to load one at a time as the user hits the bottom of the screen. I need the loading bar to stay hidden when it tries to load the 'page5' which does not yet exist...

Is this easy to do to alter my javascript code?

I am at a loss with this. Any help would be appreciated. I asked a similar question before but have adapted the code now for the loading bar, just need this little glitch to be fixed.

Thank you!

Website at:

www.jb-design.me/marchupdate2/

so you can see that I mean. (note that the graphics on the website are made by me but are not my work, just for placement)

Onclick Load Content Into Multiple Divs

Similar Tutorials

View Content

Hello Guys,

Seems im moving on from the css forums to java (im scared). I am a keen learner but an absolute beginner to java.

What i need to be able to do is..

When a student clicks on a link in the main menu e.g number I need a something that can load the following two divs.

#contentwindow
#three

I already have jquery running on the page and all css is embeded for now if that is helpful.

http://www.bushcottages.co.uk/new.htm

Thanks your help is supremely appreciated
Peter

Loading External Js Before Page Page Load (specific Span Element)

Similar Tutorials

View Content

Hello. My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer he

The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script>

About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to.

When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00.

I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top.

I appreciate your help.