Multiple Data Source for the same form
Status: Alpha
Brought to you by:
valmont
Menu
▾
▴
#3 Multiple Data Source for the same form
open
nobody
None
5
2005-10-03
2005-10-03
Anonymous
No
Hi,
I have two fields on a form and both refer to different data
sources. At the moment the variable "collection" is hard
coded within Wick. Is it possible to create more than
one collection to achieve this?
eg:
collection1=['apple', 'banana', 'orange'];
collection2=['London', 'Manchester', 'Bristol'];
<input class="wickEnabled" name="Fruit"> <!--
Somehow this field refers to collection1 -->
<input class="wickEnabled" name="City"> <!--
Somehow this field refers to collection2 -->
Hopefully someone has already cracked this one. Would
appreciate your support. Thank you.
Logged In: NO
I have it. I'll try to dig it up.
dav
Logged In: YES
user_id=1319775
Below is the code to switch between collections. Paste into a
new HTML doc and paste the other parts into two seperate js
files called colors.js and numbers.js. Plus make sure you
have the wick.css and the wick.js.
The main problem with this is that when you switch
collections, the previous info appears in the "suggestion
area."
So, if you select the numbers collection, you can see words
like one, two, three in the "suggestion area." When you
select the colors, you can see the words, red, green, blue but
you can also see the words that were viewed before like one,
two, three from the previous collection (but only if they were
selected from before).
If somebody can post a complete solution on how to make it
so when you do switch between collections, it only shows the
info from that collection (and does not include the previous
collection). Basically, I need to know how to clear what drops
down each time I change the collection. Email me if you need
more clarification or have any suggestions. Play around with
it and you will see what I mean. Thanks in advance!
Now for what I have in regards to switching between
collections -
Put the following into a blank html file:
<HTML>
<HEAD>
<title>WICK Testing Ground</title>
<!-- WICK STEP 1: INSERT CSS -->
<link rel="stylesheet" type="text/css"
href="./wick.css">
</HEAD>
<body>
<script type="text/javascript"
language="JavaScript">
function checkForm() {
answer = true;
if (siw && siw.selectingSomething)
answer = false;
return answer;
}
function changeScript() {
var newScript
if (document.Form1.Sources.selectedIndex == "0")
{newScript = "numbers.js";}
else {newScript = "colors.js";};
alert(document.Form1.Sources.selectedIndex);
oldScript=document.getElementsByTagName("script" )[1]
var newEl = document.createElement('script');
newEl.setAttribute('type', 'text/javascript');
newEl.setAttribute('src', newScript);
oldScript.parentNode.replaceChild(newEl,oldScript);
changeScript.el = newEl;
setTimeout('test()',400);
return true;
}
function test(){
document.getElementById("wickStatus").innerHTML
= 'Loaded <b>' + collection.length + '</b>';
}
//
</script>
<center>
<div id="wickStatus">
Loading ...
please hold!
</div>
<br>
<br>
<form id="Form1"
method="post" runat="server" onsubmit="return checkForm()"
action="googlesuggests3.aspx"> <!-- WICK STEP 5: this
prevents form from being submitted right-away if a user hits
RETURN to select an address -->
My First
Box:<br>
<input
class="wickEnabled" type="text" size="50"
name="SearchValue"><br>
<div
style="POSITION:relative;TEXT-ALIGN:left">
<table
id="MYCUSTOMFLOATER" class="myCustomFloater"
style="DISPLAY:none;LEFT:0px;VISIBILITY:hidden;POSITION
:absolute;TOP:50px;BACKGROUND-COLOR:#cecece">
<tr>
<td><!--
please see:
http://chrisholland.blogspot.com/2004/09/geekstuff-css-
display-inline-block.html
to explain why
i'm using a table here.
You could
replace the table/tr/td with a DIV, but you'd have to specify it's
width and height
-->
<div
class="myCustomFloaterContent">
you should never
be seeing this
</div>
</td>
</tr>
</table>
&
nbsp;
&nbs
p; &n
bsp;
&nbs
p; &n
bsp;
<SELECT name="Sources"
onchange="changeScript();">
<OPTION selected value="0">numbers</OPTION>
<OPTION value="1">colors</OPTION>
</SELECT>
</center>
</div>
</form>
</center>
<script type="text/javascript"
src="numbers.js"></script> <!-- WICK STEP 2: DEFINE
COLLECTION ARRAY THAT HOLDS DATA -->
<script type="text/javascript"
language="JavaScript" src="wick.js"></script> <!-- WICK
STEP 3: INSERT WICK LOGIC -->
<script>
document.getElementById
("wickStatus").innerHTML = 'Loaded <b>' + collection.length
+ '</b>';
</script>
</body>
</HTML>
Put the following into numbers.js file:
collection = [
'one',
'two',
'three',
'four'
];
Put the following into colors.js file:
collection = [
'red',
'green',
'blue',
'yellow'
];
Logged In: YES
user_id=1319775
Also, the second collection SOMETIMES doesn't come up
right away - less of an issue.
Any thoughts on switching collections and keeping them
seperate? Please post complete solutions...
Thanks,
Dav
Logged In: YES
user_id=1319775
Sorry. I posted the aspx version that wasn't complety
converted over to pure HTML.
Below is the HTML version of switching between collections
(and the revised collection list, since it is easier to see the
collection change when the number of items in each
collection are different). Although, this version still has the
issue of having previous suggestions from one collection
showing up in the suggestions of the other collection. Run it
and you will see what I mean. As I mentioned before if you
know how to clear out the suggestion area after switching
collections, please let us (me) know and post a complete
solution.
Thanks,
Dav
Put the following into a blank html file:
<HTML>
<HEAD>
<title>WICK Testing Ground</title>
<!-- WICK STEP 1: INSERT CSS -->
<link rel="stylesheet" type="text/css"
href="./wick.css">
</HEAD>
<body>
<script type="text/javascript"
language="JavaScript">
function checkForm() {
answer = true;
if (siw && siw.selectingSomething)
answer = false;
return answer;
}
function changeScript() {
var newScript
//alert(Form1.Select1.selectedIndex);
if (Form1.Select1.selectedIndex == "0") {newScript
= "numbers.js";}
else {newScript = "colors.js";};
oldScript=document.getElementsByTagName("script" )[1]
var newEl = document.createElement('script');
newEl.setAttribute('type', 'text/javascript');
newEl.setAttribute('src', newScript);
oldScript.parentNode.replaceChild(newEl,oldScript);
changeScript.el = newEl;
setTimeout('test()',300);
return true;
}
function test(){
document.getElementById("wickStatus").innerHTML
= 'Loaded <b>' + collection.length + '</b>';
}
//
</script>
<center>
<div id="wickStatus">
Loading ...
please hold!
</div>
<br>
<br>
<form id="Form1"
onsubmit="return checkForm()"> <!-- WICK STEP 5: this
prevents form from being submitted right-away if a user hits
RETURN to select an address -->
My First
Box:<br>
<input
class="wickEnabled" type="text" size="50"
name="SearchValue" ID="Text1"><br>
<div
style="POSITION:relative;TEXT-ALIGN:left">
<table
id="MYCUSTOMFLOATER" class="myCustomFloater"
style="DISPLAY:none;LEFT:0px;VISIBILITY:hidden;POSITION
:absolute;TOP:50px;BACKGROUND-COLOR:#cecece">
<tr>
<td><!--
please see:
http://chrisholland.blogspot.com/2004/09/geekstuff-css-
display-inline-block.html
to explain why
i'm using a table here.
You could
replace the table/tr/td with a DIV, but you'd have to specify it's
width and height
-->
<div
class="myCustomFloaterContent">
you should never
be seeing this
</div>
</td>
</tr>
</table>
&
nbsp;
&nbs
p; &n
bsp;
&nbs
p; &n
bsp;
<SELECT name="Sources"
onchange="changeScript();" ID="Select1">
<OPTION selected value="0">numbers</OPTION>
<OPTION value="1">colors</OPTION>
</SELECT>
</center>
</div>
</form>
</center>
<script id='src' type="text/javascript"
src="numbers.js"></script> <!-- WICK STEP 2: DEFINE
COLLECTION ARRAY THAT HOLDS DATA -->
<script type="text/javascript"
language="JavaScript" src="wick.js"></script> <!-- WICK
STEP 3: INSERT WICK LOGIC -->
<script>
document.getElementById
("wickStatus").innerHTML = 'Loaded <b>' + collection.length
+ '</b>';
</script>
</body>
</HTML>
Put the following into numbers.js file:
collection = [
'one',
'two',
'three',
'four',
'five'
];
Put the following into colors.js file:
collection = [
'red',
'green',
'blue',
'yellow'
];
Logged In: NO
Could you give the source, please? I would like to use it.
Thank you.
Tim