|
JavaScript - Chaining Comboboxes Without Ajax
I am using the technique below (found on codingforumns.com to chain two select boxes. How would I go about adding a THIRD set of selects to the Array?
Essentially, I wish to use this functionality for a Year, Make, and Model lookup I am writing. The current version uses AJAX and makes a round-trip to the server for each stage. I want to adapt it to pull all of the data for each product into a javascript array and then parse that array in the onchange events (essentially what this script does, but I need to add it out to an additional 1 to 2 levels (I will have a total of four levels for some products - year, make, model, and submodel). How can I modify the javascript arrays (and the code that parses them) to achieve this? Code: <html>
<head>
<title>Populate Drop Down List</title>
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?t=152899
var SelectInformation = [
['Main 1','Sub 1-1','Sub 1-2','Sub 1-3'],
['Main 2','Sub 2-1','Sub 2-2'],
['Main 3','Sub 3-1','Sub 3-2','Sub 3-3','Sub 3-4'] // Note: no comma on last entry
];
// Above is sample format for information from a database.
function MainList(selObj) {
var selElem = document.getElementById(selObj);
var tmp = '';
selElem.options.length = 0;
// selElem.options[selElem.options.length] = new Option(tmp,tmp); // for blank display
selElem.options[selElem.options.length] = new Option('Select',tmp);
for (var i=0; i<SelectInformation.length; i++) {
tmp = SelectInformation[i][0]
selElem.options[selElem.options.length] = new Option(tmp,SelectInformation[i].join(','));
}
}
function SubList(newObj,info){
var newElem = document.getElementById(newObj);
var Arr = info.split(',');
newElem.options.length = 0;
for (var i=0; i<Arr.length; i++){
tmp = Arr[i];
//window.alert(tmp);
if (i != 0) { newElem.options[newElem.options.length] = new Option(tmp,tmp); }
}
}
function SubList2(newObj, info) {
var newElem = document.getElementById(newObj);
var Arr = info.split(',');
newElem.options.length = 0;
newElem.options.length = 0;
for (var i=0; i<Arr.length; i++){
tmp = Arr[i];
if (i !=0) { newElem.options[newElem.options.length] = new Options(tmp,tmp); }
}
window.alert(newObj + " " + info);
}
</script>
</head>
<body onload="MainList('SBox0')">
<table>
<tr>
<td>
<select id="SBox0" onchange="SubList('SBox1',this.value)">
<option value=""></option>
</select>
</td>
<td>
<select id="SBox1" onchange="SubList2('SBox2',this.value)">
<option value=""></option>
</select>
</td>
<td>
<select id="SBox2">
<option value=""></option>
</select>
</td>
</tr>
</table>
</body>
</html>
Similar Tutorialsi achieved to make a chain: Code: function getId(id) {
id_elem = document.getElementById(id);
return {
color:function(e){
id_elem.style.color = e;
}
};
}
so this can be getId("test").color("red"); but what happens if i want to do that? Code: function getId(id) {
id_elem = document.getElementById(id);
return id_elem;
return { ????......
how can i chain if i use return in the first place? Hi, I've been playing around trying to recreate the way in which jQuery chains it's functions for it's "select" then "do" behaviour. Note: I don't want to chain functions with jQuery, I want to chain them like jQuery. So based on the jQuery code what I have so far is (doesn't work in IE): Code: var x = function(string) {
return new x.fn.init(string);
};
x.fn = x.prototype = {
message: '',
init: function(string) {
x.fn.message = string;
},
log: function() {
console.log(x.fn.message);
}
};
x.fn.init.prototype = x.fn;
var start = function() {
x('hello world').log();
};
document.addEventListener('DOMContentLoaded', start, false);
The code works but when I watch '$' in jQuery "fn" & "prototype" show up as being "jQuery()" but in my code when I watch "x": "fn" and "prototype" are both shown as objects containing "message", "init" and "log" and in both cases "init" contains "prototype" which contains my three functions again and the nesting continues seemingly infinitely... I'm clearly missing something here. What are they doing in differently in jQuery to prevent this endless nesting loop? Hi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. Hello everyone. I was working on a ajax function and I can't seem to figure out what I'm doing wrong here. I'm kinda new with the prototype method I was wondering if I could get some help figuring out what I'm doing wrong here exactly and how I can fix this. Any help on this would be wonderful. Thanks, Jon W Code: function createAjax() {
if(!this.http && window.ActiveXObject) {
try {
this.http = new ActiveXObject("Msxml2.XMLHTTP" || "Microsoft.XMLHTTP");
}
catch(e1) {
this.http = false;
}
}
if(!this.http && window.XMLHttpRequest) {
try {
this.http = new XMLHttpRequest();
}
catch(e2) {
alert("Sorry we was unable to make a request between your browser.");
}
}
}
createAjax.prototype.request = function(url) {
var rmd = Math.random();
this.http.open('get', url+"&rmd="+rmd, true);
this.http.send(null);
this.http.onreadystatechange = this.responseHandler;
}
createAjax.prototype.responseHandler = function(obj) {
if(this.http.readyState == 4) {
document.getElementById(obj).innerHTML = this.responseText;
}
}
function ajax(url, obj) {
a = new createAjax();
a.request(url);
a.responseHandler(obj);
}
var doAjax = new ajax('ajax.php?name=jon','content');
hi; This is my first post and am abit stuck. I used JQuery AJAX to get data from a different page and show it in my div. This all works fine but now i want the page collected by AJAX to execute a Javascript function which is in the page which request the AJAX page. I have this so far but its not working. This is in the AJAX-ed page. Code: <a href="#" onClick="change_postcode(prompt('Please Enter Your Postcode', 'SW10')");
)">SW10</a>
And the page which requested the AJAX page. Code: <script type="text/javascript">
function change_postcode(postcode){
$('#view8').html('<p><img src="http://www.MySite.com/images/loading.gif"/><br />Loading! Please Wait...</p>');
$('#view8').load("http://www.mywebsite.com/include.php?inc=Events&when=&postcode="+postcode);
}</script>
I though about using top but that didn't work. Code: <a href="#" onClick="top.change_postcode(prompt('Please Enter Your Postcode', 'SW10')");
)">SW10</a>
How can i get my AJAX page to execute a Javascript function which is in the page which contains the the AJAX page. Thankyou all for reading my post Paul P.S Am very sorry for my way with words. I was wondering if someone would have the time to talk and help explain some Ajax things to me... slowly. I'm trying to make my web sites more dynamic. Like I just need someone I can bounce ideas off and they can walk me through step by step on how to do them. Thanks Shelby i have a html wich i am working on .. Code: <html>
<head>
<script language="Javascript">
function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}
function getquerystring() {
var form = document.forms['f1'];
var username = form.username.value;
qstr = 'u=' + escape(username);
return qstr;
}
function updatepage(str){
var s = str;
var a = s.split(',');
var a1 = a[0];
var a1_1 = a[1];
var a2 = a[2];
var a2_1 = a[3];
var a3 = a[4];
var a3_1 = a[5];
var a4 = a[6];
var a4_1 = a[7];
var a5 = a[8];
var a5_1 = a[9];
var a6 = a[10];
var a6_1 = a[11];
var a7 = a[12];
var a7_1 = a[13];
var a8 = a[14];
var a8_1 = a[15];
var a9 = a[16];
var a9_1 = a[17];
var a0 = a[18];
var a0_1 = a[19];
var form = document.forms['f1'];
form.result1.value = a1;
form.result1_1.value = a1_1;
form.result2.value = a2;
form.result2_1.value = a2_1;
form.result3.value = a3;
form.result3_1.value = a3_1;
form.result4.value = a4;
form.result4_1.value = a4_1;
form.result5.value = a5;
form.result5_1.value = a5_1;
form.result6.value = a6;
form.result6_1.value = a6_1;
form.result7.value = a7;
form.result7_1.value = a7_1;
form.result8.value = a8;
form.result8_1.value = a8_1;
form.result9.value = a9;
form.result9_1.value = a9_1;
form.result0.value = a0;
form.result0_1.value = a0_1;
}
</script>
</head>
<body>
<form name="f1">
<p>Username: <input name="username" type="text" id="username">
<p>Password: <input name="password" type="text" id="password">
<input value="Go" type="button" onclick='JavaScript:xmlhttpPost("/cgi-bin/3sms/smscontacts.pl")'></p>
<input name="result1" type="text" id="result1" size="18" maxlength="25">
<input name="result1_1" type="text" id="result1_1" size="11" maxlength="11"><p>
<input name="result2" type="text" id="result2" size="18" maxlength="25">
<input name="result2_1" type="text" id="result2_1" size="11" maxlength="11"><p>
<input name="result3" type="text" id="result3" size="18" maxlength="25">
<input name="result3_1" type="text" id="result3_1" size="11" maxlength="11"><p>
<input name="result4" type="text" id="result4" size="18" maxlength="25">
<input name="result4_1" type="text" id="result4_1" size="11" maxlength="11"><p>
<input name="result5" type="text" id="result5" size="18" maxlength="25">
<input name="result5_1" type="text" id="result5_1" size="11" maxlength="11"><p>
<input name="result6" type="text" id="result6" size="18" maxlength="25">
<input name="result6_1" type="text" id="result6_1" size="11" maxlength="11"><p>
<input name="result7" type="text" id="result7" size="18" maxlength="25">
<input name="result7_1" type="text" id="result7_1" size="11" maxlength="11"><p>
<input name="result8" type="text" id="result8" size="18" maxlength="25">
<input name="result8_1" type="text" id="result8_1" size="11" maxlength="11"><p>
<input name="result9" type="text" id="result9" size="18" maxlength="25">
<input name="result9_1" type="text" id="result9_1" size="11" maxlength="11"><p>
<input name="result0" type="text" id="result0" size="18" maxlength="25">
<input name="result0_1" type="text" id="result0_1" size="11" maxlength="11"><p>
</div>
</form>
</body>
</html>
now my problem is the password is not sent to the perl script i basicly modified an ajax from another form to do this form. when the "go" is pressed the username is sent and a string is recived and devided into the form inputs.. all i need to do now is send the password along with the username the username variable is "u" i would like the password variable to be "p" any ideas I need some help with some javascript I am trying to put on an IF forum. http://s7.invisionfree.com/AJAXTEST/index.php At the very top, you will see a link called "on this link". It is an ajax code. If you click on it, a blank alert box comes up. However, if you go he http://commx.info/will/test.html and click on the same link, the alert box has the text I am looking for. It uses the exact same code, so I can't figure out why it works on a plain page and not on an IF forum. Does anyone have any ideas? The code is Code: <html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><script>
function callback(serverData, serverStatus) {
alert(serverData);
}
function ajaxRequest() {
var AJAX = null;
if (window.XMLHttpRequest) {
AJAX=new XMLHttpRequest();
} else {
AJAX=new ActiveXObject("Microsoft.XMLHTTP");
}
if (AJAX==null) {
alert("Your browser doesn't support AJAX.");
return false
}
AJAX.onreadystatechange = function() {
if (AJAX.readyState==4 || AJAX.readyState=="complete") {
callback(AJAX.responseText, AJAX.status);
}
}
AJAX.open("GET",'http://commx.info/accounts/codes/shout/ipb13/getChatData.php?lastID=0', true);
AJAX.send(null);
}
</script>
</head><body><a href="javascript:ajaxRequest()">on this link</a></body></html>
Hello all, I'm trying to use AJAX for password validation. I've used AJAX before successfully to read and write data back and forth from Javascript and php, but not at the same time. I seem to be coming to the conclusion that the XMLHTTPRequest object is not letting me send data to my php file with the open method and receive data from it with the responseText attribute at the same time. Am I correct? What can I do to get around this? Here's the Javascript function: Code: function pwTest()
{
var pwInput = document.getElementById("removalPassword").value;
var ajaxRequest;
try
{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer Browsers
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
pwGood = ajaxRequest.responseText;
}
ajaxRequest.open("GET", "pwtest.php?pw=" + pwInput, true);
ajaxRequest.send(null);
}
}
And here's the php code: Code: <?php
$string = "blam!";
$input = $_GET["pw"];
if ($string == $input)
{
echo "1";
}
else
{
echo "0";
}
?>
Thank you. Also, I realize that this isn't very secure, but it's only going to be on a local server and I'll encrypt the password once I have it working. I was wondering if there's a quick and simple way to notify a user if an ajax connection is broken, for example you're calling a file, but due to your internet connection, the file cannot be relayed back to you, so the existed javascript code on the initial page you're on, notifys you of the problem. Any ideas? Hello, I am using javascript/ajax to get an adsense script from my server. The script is returned from the server inside <script> tags so it isn't quite as easy as throwing the script into the div after an eval(). I could parse out the <script> tags but it seems to me that there is an easier way to place this code into the DIV without having to do this. Any suggestions? Right for day's i've searching for a jQuery/js/ajax script that opens like facebooks box where you can delete things update posts and so on... But i don't want that facebox thing i want a tut where i can buy things that will insert into the database and delete things and sooo on... I've made the box i just want the script for it.... I'm not good with js/jQuery/ajax.... Thanks. hi everyone.. i am using ajax to change the banner background while pressing on refresh Note:it must be a background image because i will display data from database... http://www.graphicano.com/isis/nile_crown2.php please look at this link... my problem is: when i press refresh button in Firefox browser it changes the background and on pressing refresh again the background will change but in internet explorer 8.0 it changes the background only for the first time and on pressing refresh again the background will not change. how i can fix this problem ?? i want the user to press refresh at any time and the background will change.. not only for the first time? at the same time it must be a background image because i will display text from database... hello all, I am trying to see if the w3schools example works on my site with a collapsible panel. here is what I have: Code: <script type="text/javascript">
function getXMLcontent() {
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
document.getElementById('CollapsiblePanel1').style.visibility = 'visible';
document.getElementById("CollapsiblePanelContent").innerHTML=xmlhttp.responseText;
xmlhttp.open("GET","showfunction.php?fname=" + document.getElementById('functions').value, true);
xmlhttp.send();
alert("showfunction.php?fname=" + document.getElementById('functions').value);
}
</script>
the panel shows up as a thin grey line because no text is being thrown into it from the 'responsetext' property. I don't really know anything about what I'm doing. Just trying to copy and paste what the website example is. is there anything else I should know about what I'm doing, that would at least tell me why I'm not getting the data back out of the server like I should be? the 'functions' element on the page is a dropdown box, but it is not inside of a form tag. does that make a difference since I am using 'GET'?? thanks! i have found a very simple ajaxexample on the internet, when this works i can adept it to my site, but it doesn't work :-( anybody sees why? Code: <div align="center" id="timeval">--:--:--</div>
<button id="stop">Stop</button>
<script src="jquery.js"></script>
<script>
$(document).ready(function()
{
//ajaxTime.php is called every second to get time from server
var refreshId = setInterval(function()
{
$('#timeval').load('ajaxTime.php?randval='+ Math.random());
}, 1000);
//stop the clock when this button is clicked
$("#stop").click(function()
{
clearInterval(refreshId);
});
});
</script>
and the phpscript:
ajaxtime.php
<?php
echo date("g:i:s A");
?>
I am very new to web development and I need a push in the right direction here. This is my problem; I am making a web page that will be used privately by two people. I need to find a way to go to an FTP site that can only be accessed by web browser (that is what IT told me) and download a file that has a constant name "prevhour.log" and save this file to a directory so that it can be read (not sure how, my boss is doing that end) and the data will be dumped, and this data will be extrapolated into a gas gauge style dashboard. I need some way of this to be done as automated as possible. Thank you for your time. Rick Hi, I was just wondering is it possible to have an onclick() JavaScript function that would use PHP to INSERT a new row into a MySQL table? Like is it possible to put some php into a javascript function that runs when I click the button on my page? Something like that? The PHP updates the MySQL database and the JavaScript tells the PHP when to happen? Just wondering what's the best way to go about that. First of all sorry if i have posted in the wrong forum! Ok my problem is with an RSS ticker for my website. I am having the error req is not defined. Im hoping its something very simple is the script is much complete! THIS IS THE GRAB.PHP CODE PHP Code: <? // [email]jim-jh@webcoding.co.uk[/email] // ticker stuff - grab remote stream // begin grab.php $_receivedRemoteData = "" ; $_requestedStream = $_SERVER['QUERY_STRING']; if ( preg_match("/http/i", $_requestedStream ) ) { $fp = @fopen( $_requestedStream, "r" ) ; if ( $fp ) { while ( !feof( $fp ) ) { $_receivedRemoteData .= @fread($fp, 1024); } @fclose($fp); } } header("content-type: text/xml") ; print $_receivedRemoteData ; // end grab.php ?> THIS IS THE TICKER.PHP FILE CODE Code: <style>
.headlines {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #003366;
text-decoration: none;
}
.headlines:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #003366;
text-decoration: none;
}
.globalheader {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #990000;
text-decoration: none;
}
</style>
<span align="left" width="100%" id="scroller" style="align:left;z-index:99; position:relative; display;">
<span class=globalheader>BBC NEWS RSS TICKER:</span><br/>
<span class="headlines">Loading RSS feeds....</span>
</span>
<script src="ticker.js"></script>
AND THIS IS THE JS CODE WHERE I THINK THE PROBLEM MAY BE. PHP Code: function getRequest() { var con = new Array(); var _ms_XMLHttpRequest_ActiveX = ""; var req; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { if (_ms_XMLHttpRequest_ActiveX) { req = new ActiveXObject(_ms_XMLHttpRequest_ActiveX); } else { var versions = ["Msxml2.XMLHTTP.7.0", "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for (var i = 0; i < versions.length ; i++) { try { req = new ActiveXObject(versions[i]); if (req) { _ms_XMLHttpRequest_ActiveX = versions[i]; break; } } catch (objException) { // trap; try next one } } } } con[0]=req; con[1]=_ms_XMLHttpRequest_ActiveX; return con; } function loadRSS(url) { //alert("running"); try { if ( _ms_XMLHttpRequest_ActiveX1 ) { rssRequest.onreadystatechange = processRSS; rssRequest.open("GET", url, true); rssRequest.send(null); } else { if (rssRequest) { rssRequest.onreadystatechange = processRSS; rssRequest.open("GET", url, true); rssRequest.send(null); } } } catch ( rssRequestException ) {} } function getChildNode( myElement, naming ) { return myElement.getElementsByTagName(naming)[0].firstChild.nodeValue; } function processRSS() { var cycle = 0; try { if (rssRequest.readyState == 4) { if (rssRequest.status == 200) { response = rssRequest.responseXML.documentElement; if ( response ) { var items = response.getElementsByTagName("item"); for ( var i = 0 ; i < items.length; i++ ) { var title = getChildNode(items[i],"title"); var desc = getChildNode(items[i],"description"); var link = getChildNode(items[i],"link"); rssItems[cycle] = title + " - " + desc; linkItems[cycle] = link; ++cycle; } } } else { alert("There was a problem retrieving the XML data:\n" + req.statusText); } } } catch ( jsException ) {alert(jsException.message);} } var httpArc2 = getRequest(); var rssRequest = httpArc2[0]; var _ms_XMLHttpRequest_ActiveX1 = httpArc2[1]; var rssItems = new Array(); var linkItems = new Array(); function openWindow(url){ window.open(url); } var storyCount = 0; var itemLen = 0; function tickTock(){ var obj = document.getElementById("scroller"); var myTimeout = 50; var str; var st = rssItems[storyCount]; if ( itemLen > st.length ) { storyCount++; if ( storyCount >= rssItems.length ) { storyCount = 0; } itemLen = 0; myTimeout=2000; setTimeout("tickTock()", myTimeout); } else { ++itemLen; str = rssItems[storyCount].toString(); str = str.substring(0,itemLen) + "_"; obj.innerHTML = "<span class=globalheader>BBC NEWS RSS TICKER:</span><br/><a href=\"javascript:openWindow('"+linkItems[storyCount]+"')\" class=headlines>" + str + "</a>"; setTimeout("tickTock()", myTimeout); } } setTimeout("tickTock()", 3000); loadRSS("/grab.php?http://news.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml"); IS THERE ANYONE THAT CAN HELP WITH THIS? Hello, I am looking to created a login system where a user will take his/her photo via webcam in browser and that picture taken should be related to that user; under a specific timestamp, for example, if my user name is username and I logged In, the system will note my time and by taking a photo (either auto or by clicking a button in browser) and will store that picture in a folder under a unique name related to that customer and the time he logged in, I am stuck how to connect web cam to browser (desirable ajax etc not flash) and then photo taken and stored in a folder with unique name etc anybody did something like this before? help appreciated. |
|||||||