bolenka
asked on
How do I code a page to show the next image in an array when clicking on an update panel trigger?
Hi all. I know how to do this with plain javascript if I create a new array in javascript and hardcode the image names that I want to load....but what I WANT to do is use asp.net vb ajax and update panel to click on an image, do a postback and just show the next image in an array.
1) I need the imageurl to come from the database
2)I need the id of the new image for use on the rest of the page.
I just don't know how to code it. I need code examples. The idea is to make all of this dynamic so if my client uploads their images, I don't have to hardcode image names anywhere. I can get it all from the db.
so...please tell me how I can click on an image in my update panel and move to the next image in the array...do I use a datalist or repeater. I really need this as soon as possible...so quick answers would be fantastic.
Thanks.
1) I need the imageurl to come from the database
2)I need the id of the new image for use on the rest of the page.
I just don't know how to code it. I need code examples. The idea is to make all of this dynamic so if my client uploads their images, I don't have to hardcode image names anywhere. I can get it all from the db.
so...please tell me how I can click on an image in my update panel and move to the next image in the array...do I use a datalist or repeater. I really need this as soon as possible...so quick answers would be fantastic.
Thanks.
ASKER
this could be what I am looking for...but I am not that advanced!!! I have to go thru your solution to really make sure, but will this allow for all imagenames to be dynamic....so I never have to hard code any image names? If so, I am so excited. Can I write back with any questions? thanks so much.
ASKER
I had NO idea you could mix javascript and .net code...isnt that what you are doing?
Yes, this will PULL from the DB, and you can access the "Next" image at any time, within JavaScript, within HTML, etc... by referencing the global variable...
Yes, ask away... but note that i am leaving in an hour and it might have to go to tomorrow ;-)
Yes, ask away... but note that i am leaving in an hour and it might have to go to tomorrow ;-)
ASKER
Also...I like your idea...but by any chance could you provide any array code or anything???really, I don't know the backend code very well. any other examples you could provide would be huge:) thanks soooo much.
yes, that's exactly what i'm doing ;)
k give me a few...
ASKER
so, I can use my sqldatasource that I already have put on the page? then how do I get the image names into an array for later use?
also, will this work to loop thru a multiple number of images? It could be 10 images for each collection. meaning there are 10 images for one job (construction jobs), 10 images for the next job, etc. there could be 30 different jobs with any number of images...so really all I am doing is receiving the collectionid from a querystring and then pulling up all images and just change the src? thats brilliant:)
I tend to overcomplicate...
But, I don't want to create 30 pages...so, all of this will be submitted to ONE single page...and within that page, I can see image after image just by clicking it, right? thanks.
also, will this work to loop thru a multiple number of images? It could be 10 images for each collection. meaning there are 10 images for one job (construction jobs), 10 images for the next job, etc. there could be 30 different jobs with any number of images...so really all I am doing is receiving the collectionid from a querystring and then pulling up all images and just change the src? thats brilliant:)
I tend to overcomplicate...
But, I don't want to create 30 pages...so, all of this will be submitted to ONE single page...and within that page, I can see image after image just by clicking it, right? thanks.
ASKER
ok, have to get my kid at the bus...be back in 30min...hopefully that is enough time. thank you so much.
in the HTML page, again, this is JUST AN EXAMPLE SO YOU CAN HAVE AN IDEA OF HOW IT WORKS:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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 runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div id="imagediv" runat="Server"><img src="<%=CurrentImageURL%>" id="MainIMG" /><img src="next.jpg" onclick="JavaScript:LoadNextImage();" /></div>
<asp:Button ID="btnRefreshImageLocation" runat="server" Text="" Visible="false" Enabled="true" />
</form>
<script type="text/javascript">
function LoadNextImage();
{
//load the next image.
document.getElementById("MainIMG").src="<%=NextImage%>";
document.getElementById("<%=Me.btnRefreshImageLocation.ClientID%>").click();
}
</script>
</body>
</html>
in the back-end code:
Partial Class _Default
Inherits System.Web.UI.Page
Public NextImage As String
Public CurrentImageURL As String
Public CurrentImageID As Integer
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
LoadFirstImage()
End Sub
Protected Sub LoadFirstImage()
'this is where you connect to the database and get the first image URL for the user... but i don't have a DB so i will just set it! cool?
CurrentImageID = 1
CurrentImageURL = "~/1.jpg"
NextImage = "~/2.jpg"
End Sub
Protected Sub btnRefreshImageLocation_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnRefreshImageLocation.Click
'once again, you connect to the database, and get the next image, load it into the NextImage variable.
'Again, i will do this manually based on just a number. You would connect to the DB here yourself and get the real URLS.
CurrentImageID = CurrentImageID + 1
CurrentImageURL = "~/" & CurrentImageID & ".jpg"
NextImage = "~/" & CurrentImageID + 1 & ".jpg"
End Sub
End Class
kk...
yes you can do that, just store an array into the public variable, and keep track of the current Array number via JavaScript... and you wouldn't even have to refresh in that case, unless they upload something, then you might want to reload the array... if you need help with that let me know.
yes you can do that, just store an array into the public variable, and keep track of the current Array number via JavaScript... and you wouldn't even have to refresh in that case, unless they upload something, then you might want to reload the array... if you need help with that let me know.
ASKER
yes they will need to upload images...so how would I reload the array? again thank you. i will look at your code and hope to hear from you about keeping track of the current array via javascript and reloading after refresh. thank you thank you thank you.!!!!
easy, once you've uploaded the new image, and saved the changes in the DB, call the UpdateArray function that you will make yourself, which pulls all of the content from the DB from that Job and creates the content of the field again... it will be done in the Upload function basically... that way you always have a fresh array loaded in the public variable.
As for the javaScript keeping track of the current image, just store the current position in a hidden textbox, and reference when moving to the next one and update accordingly... it's quite simple really ;)
you javascript would look like this:
NextImage()
var thearr="<%=ImageURLArrayIn
MainIMG.src=thearr[documen
document.getElementById("C
get how it works? for previous, you just substract 1 instead of adding... etc...
back-end code, in the current upload function:
upload image
update DB
call UpdateArray
UpdateArray
pull all job picture URLs for specific job, and store each URL in the public variable ImageURLArrayInStringSeper
that<s it you're done.
As for the javaScript keeping track of the current image, just store the current position in a hidden textbox, and reference when moving to the next one and update accordingly... it's quite simple really ;)
you javascript would look like this:
NextImage()
var thearr="<%=ImageURLArrayIn
MainIMG.src=thearr[documen
document.getElementById("C
get how it works? for previous, you just substract 1 instead of adding... etc...
back-end code, in the current upload function:
upload image
update DB
call UpdateArray
UpdateArray
pull all job picture URLs for specific job, and store each URL in the public variable ImageURLArrayInStringSeper
that<s it you're done.
ASKER
will it do a continual loop of the image? In other words? go back to the beginning when it gets to the end in the javascript?
no for the way i pseudo-coded it above, BUT, you can code/check it yourself....
//CHECK TO SEE IF THE NEXT NUMBER WOULD BE GREATER THAN THE ARRAY LENGTH
if((document.getElementByI
{
//IF IT IS, RESET TO 0
MainIMG.src=thearr[0];
document.getElementById("C
}
else
{
//IF IT IS NOT, MOVE TO NEXT
MainIMG.src=thearr[documen
document.getElementById("C
}
for the previous, you check against 0... and if it would make it SMALLER than 0, then you reset to the array length instead... the reverse of next. ;)
//CHECK TO SEE IF THE NEXT NUMBER WOULD BE GREATER THAN THE ARRAY LENGTH
if((document.getElementByI
{
//IF IT IS, RESET TO 0
MainIMG.src=thearr[0];
document.getElementById("C
}
else
{
//IF IT IS NOT, MOVE TO NEXT
MainIMG.src=thearr[documen
document.getElementById("C
}
for the previous, you check against 0... and if it would make it SMALLER than 0, then you reset to the array length instead... the reverse of next. ;)
ASKER
wow you are fast...one last question while I have you...this hidden button...how am I actually clicking it?
ASKER
ok, I lied...this is my last question. when I am loading my images from the database where you have it hard coded? what is the best way to load that? into a datareader? and am I looping through? I get really confused about the best method to use...again..thanks so much...you have saved this project really.
here's the thing, in the example, i didn't know you wanted to refresh only on upload... so you can do all of that in the upload... you don't need the hidden button anymore ;) just re-load the variable in your upload function.
the best way to do it, would be to use a datareader, loop through, and save into the variable.
the best way to do it, would be to use a datareader, loop through, and save into the variable.
ASKER
ok, thanks so much...I am just working on this now. it is working so far except from your code, I can see both images on my page...its cool, I am not worrying about the upload so far. most likely that will come in another phase I can go with what you have given me now:
also, you mentioned a hidden field...what is the name of that hidden field?
this is what I have so far:
<img alt="next" src="images/scottandcharli
<asp:Button ID="btnRefreshImageLocatio
<asp:HiddenField ID="nextimage2" runat="server" Value="" /></form>
<script type="text/javascript">
function LoadNextImage() {
alert("loading next image");
//load the next image.
document.getElementById("M
alert(document.getElementB
document.getElementById("<
}
</script>
vb code behind:
Partial Class portfolioofwork
Inherits System.Web.UI.Page
Public NextImage As String
Public CurrentImageURL As String
Public CurrentImageID As Integer
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
LoadFirstImage()
End Sub
Protected Sub LoadFirstImage()
'this is where you connect to the database and get the first image URL for the user... but i don't have a DB so i will just set it! cool?
CurrentImageID = 1
CurrentImageURL = "images/1.jpg"
NextImage = "images/2.jpg"
End Sub
Protected Sub btnRefreshImageLocation_Cl
'once again, you connect to the database, and get the next image, load it into the NextImage variable.
'Again, i will do this manually based on just a number. You would connect to the DB here yourself and get the real URLS.
CurrentImageID = CurrentImageID + 1
CurrentImageURL = "images/" & CurrentImageID & ".jpg"
NextImage = "images/" & CurrentImageID + 1 & ".jpg"
End Sub
the only problem is, why am I seeing the two images on the page. I see the one I am clicking on and then the one next to it that changes. I think I have confused myself...see my hidden field...what do I name that?
also, you mentioned a hidden field...what is the name of that hidden field?
this is what I have so far:
<img alt="next" src="images/scottandcharli
<asp:Button ID="btnRefreshImageLocatio
<asp:HiddenField ID="nextimage2" runat="server" Value="" /></form>
<script type="text/javascript">
function LoadNextImage() {
alert("loading next image");
//load the next image.
document.getElementById("M
alert(document.getElementB
document.getElementById("<
}
</script>
vb code behind:
Partial Class portfolioofwork
Inherits System.Web.UI.Page
Public NextImage As String
Public CurrentImageURL As String
Public CurrentImageID As Integer
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
LoadFirstImage()
End Sub
Protected Sub LoadFirstImage()
'this is where you connect to the database and get the first image URL for the user... but i don't have a DB so i will just set it! cool?
CurrentImageID = 1
CurrentImageURL = "images/1.jpg"
NextImage = "images/2.jpg"
End Sub
Protected Sub btnRefreshImageLocation_Cl
'once again, you connect to the database, and get the next image, load it into the NextImage variable.
'Again, i will do this manually based on just a number. You would connect to the DB here yourself and get the real URLS.
CurrentImageID = CurrentImageID + 1
CurrentImageURL = "images/" & CurrentImageID & ".jpg"
NextImage = "images/" & CurrentImageID + 1 & ".jpg"
End Sub
the only problem is, why am I seeing the two images on the page. I see the one I am clicking on and then the one next to it that changes. I think I have confused myself...see my hidden field...what do I name that?
the only thing i could see, is that you have 2 images on your HTML page? both named MainIMG...
you should definitely be seeing 2 images, one would be a "Previous" button type image, that would change the image to the next one... not the actual previous image... i didn't think that's what you were trying to accomplish... i thought you wanted something like the following:
-------------------------
| MAIN IMAGE |
| |
| |
------------------------
<< Previous -- Next >>
AND NOT
Previous Image --- Main Image --- Next Image
side by side like that... so my "Next" image was just a button ;)
you should definitely be seeing 2 images, one would be a "Previous" button type image, that would change the image to the next one... not the actual previous image... i didn't think that's what you were trying to accomplish... i thought you wanted something like the following:
-------------------------
| MAIN IMAGE |
| |
| |
------------------------
<< Previous -- Next >>
AND NOT
Previous Image --- Main Image --- Next Image
side by side like that... so my "Next" image was just a button ;)
you need to tell me exactly what you want it to look like, and i will provided an adapted solution.
ASKER
Ok...again you are awesome....let me attach a file so you can see it. one sec.
ASKER
Hi: see how there is one big image in the middle of the screen...here are the things my client wants and this is what I was thinking:
1) User selects a menu item (not developed yet) that passes in the id of the job.
2) On this portfolio of work page (.aspx stays the same, yet all of the content on the page changes based on the id from the menu selection
3) the large image can be looped thru by clicking ON the large image itself...in other words...no previous and next buttons ( I did this on another page using javascript looping...but this time, all values have to be dynamic from a database)
4)there can be more than one image for a particular job
5)the small image at the bottom are static...but they will also come from the same database record.
6) the text at the bottom of the page changes based on the id of the job (if its easy, this can change with each new click...if its not, it can just be one description and stay the same regardless of whether or not the top image was clicked....
the reason I need to do it this way is because my client does NOT want to use FLASH or silverlight, even though I have provided slideshows using both tools...because they do not want their customers to have to download anything...and they WANT it to work in EVERY single browser even the old ones....so with all that said....this contract may depend on the help you have so kindly given me...and if I could repay you in anyway I would.
let me know if you have trouble viewing...bottom line...big image needs to change on click...without changing or posting to a new page....small image says same but comes out of db and so does text.
does that make sense? I hope I explained it better. thanks.
1) User selects a menu item (not developed yet) that passes in the id of the job.
2) On this portfolio of work page (.aspx stays the same, yet all of the content on the page changes based on the id from the menu selection
3) the large image can be looped thru by clicking ON the large image itself...in other words...no previous and next buttons ( I did this on another page using javascript looping...but this time, all values have to be dynamic from a database)
4)there can be more than one image for a particular job
5)the small image at the bottom are static...but they will also come from the same database record.
6) the text at the bottom of the page changes based on the id of the job (if its easy, this can change with each new click...if its not, it can just be one description and stay the same regardless of whether or not the top image was clicked....
the reason I need to do it this way is because my client does NOT want to use FLASH or silverlight, even though I have provided slideshows using both tools...because they do not want their customers to have to download anything...and they WANT it to work in EVERY single browser even the old ones....so with all that said....this contract may depend on the help you have so kindly given me...and if I could repay you in anyway I would.
let me know if you have trouble viewing...bottom line...big image needs to change on click...without changing or posting to a new page....small image says same but comes out of db and so does text.
does that make sense? I hope I explained it better. thanks.
ASKER
oops
ee.jpg
ee.jpg
ASKER
can you see it?
give me a few and i will provide a working example...
why does he not want to use flash or silverlight and only javascript? this is a public site correct?
why does he not want to use flash or silverlight and only javascript? this is a public site correct?
ASKER
yep...because the graphic designer/ business owners wife does not want to have to have her clients download a plugin for flash or silverlight...also sivlerlight apparantly doesnt work on old safari browsers on old operating systems...I know.....she has a mac...I have tried to show her all that I have done....even in silverlight...its really cool...but she wants it programmed for the most simple user i guess. yes its a public site. what do you think about that?
I have to run out for an hour or so...I will be checking in when I get back...thanks so much again. i look forward to hearing from you...this has been a very difficult job so thanks.
I have to run out for an hour or so...I will be checking in when I get back...thanks so much again. i look forward to hearing from you...this has been a very difficult job so thanks.
ok, now, keep in mind here that i have created this example under the assumption that the left images, and right content text, will change when you click on the image / go to the next one... you can remove these if you don't find them useful... and in general, this is only an example (though pretty thorough, which i shouldn't be doing because it defeats the purpose of learning ;) ), so you can take the code and play with it and see what you get... but this is basically how i would do it, using basic HTML input tags, ASP.Net, and JavaScript to accomplish everything...
Note that the ASP.Net part is mostly pseudo-coded since i don't know what your connection will be like and DB pull and all of that...
Another thing to note as well, is that i coded the ASP.Net part inside the @Drop-Down Event@ so that when the user selects the job number from the drop, you automatically load all of the variables, and set the first images and text in the proper places...
also, you should tell your boss that not everyone has JavaScript enabled on their browsers... so... ;-) it can still happen!! less likely, but still ;)
Note that the ASP.Net part is mostly pseudo-coded since i don't know what your connection will be like and DB pull and all of that...
Another thing to note as well, is that i coded the ASP.Net part inside the @Drop-Down Event@ so that when the user selects the job number from the drop, you automatically load all of the variables, and set the first images and text in the proper places...
also, you should tell your boss that not everyone has JavaScript enabled on their browsers... so... ;-) it can still happen!! less likely, but still ;)
HTML (NOTE THAT THIS ONLY CONCERNS THE IMAGE SCROLLING, THE REST OF YOUR HTML YOU WILL HAVE TO BUILD.) and JavaScript:
<input type="hidden" id="hidImages" runat="server" value="" />
<input type="hidden" id="hidRightText" runat="server" value="" />
<input type="hidden" id="hidLeftImg" runat="server" value="" />
<input type="hidden" id="hidCurrent" value="0" />
<input type="hidden" id="hidTotal" runat="server" value="" />
</form>
<div id="MainContainer" style="width:100%;">
<img src="" onClick="JavaScript:LoadNext()" id="imgMain" runat="server" />
<div id="divLeft" style="Width:50%;float:left;" runat="Server"></div>
<div id="divRight" style="Width:50%:float:right;" runat="server"></div>
</div>
<script type="text/javascript">
<!--
function LoadNext()
{
//***********************
// this funcion handles the following:
// setting the maing image to the next one
// setting the left images to the next set (remove if not required/remains static on main image change)
// setting the right text to the next set (remove if not required/remains static on main image change)
//************************
var tmpimg=document.getElementById("imgMain");
var tmpleft=document.getElementById("divLeft");
var tmpright=document.getElementById("divRight");
var imgarr=document.getElementById("hidImages").value.split(",");
var rightarr=document.getElementById("hidRightText").value.split("#$%");
var leftarr=document.getELementById("hidLeftImg").value.split("#$%");
var current=document.getElementById("hidCurrent").value;
var totals=document.getElementById("hidTotal").value;
//loop back if total is passed
if((current+1)>totals)
{
current=0;
}
else
{
//set to next
current+=1;
}
//set new current array position.
document.getElementById("Current").value=current;
//set main image src
tmpimg.src=imgarr[current];
//set left HTML block
tmpleft.innerHTML=leftarr[current];
//set right HTML block
tmpright.innerHTML=rightarr[current];
//clear memory
tmpimg=null;
tmpleft=null;
tmpright=null;
imgarr=null;
rightarr=null;
leftarr=null;
current=null;
totals=null;
}
//-->
</script>
ASP.NET
Drop-Down.SelectedIndexChanged
'connect to the DB, and perform the following:
'put ALL required info in a datareader, loop through, and assign a comma (or special character) delimited list to the input tags
'declare local variables
Dim imagelist, rightlist, leftlist As String
Dim total As New Integer
total=0
'RESET INPUT TAGS, IMPORTANT!
Me.hidImages.value=""
Me.hidRightText.value=""
Me.hidLeftImg.value=""
Me.hidCurrent.value="0"
Me.hidTotal.value=""
'LOOP THROUGH DATAREADER
WHILE DR.READ
'ASSIGN VARIABLES to DB VALUES
imagelist=imagelist & dr("ImageURL") & ","
'again, these 2 parts can be removed, or coded manually since it has to be in HTML format... a combo of something like this maybe: "<p>" & dr(text) & "</p>"
rightlist=rightlist & dr("RightTextHTML") & "#$%"
leftlist=leftlist & dr("LeftTextAndImagesHTML") & "#$%"
'save a count of images present in the DB for the array...
total=total+1
WEND
'close the datareader right away... makes performance faster...
DR.CLOSE
'CLEAN UP VARIABLES/REMOVE LAST DELIMITER
imagelist=left(imagelist,imagelist.length-1)
leftlist=left(leftlist,leftlist.length-3)
rightlist=left(rightlist,rightlist.length-3)
'SET INPUT TAGS FOR USE BY JAVASCRIPT
Me.hidImages.value=imagelist
Me.hidRightText.value=rightlist
Me.hidLeftImg.value=leftlist
Me.hidCurrent.value="0"
Me.hidTotal.value=total
'SET THE FIRST IMAGE, LEFT TEXT AND RIGHT TEXT PORTIONS
Me.imgMain.src=split(imagelist,",")(0)
Me.divLeft.innerHTML=split(leftlist,"#$%")(0)
Me.divRight.innerHTML=split(rightlist,"#$%")(0)
'CLEAR YOUR LOCAL MEMORY
imagelist=Nothing
rightlist=Nothing
leftlist=Nothing
total=Nothing
DR=nothing
END Drop-Down.SelectedIndexChanged
SO there you have it... this should do exactly what you want it to do...
ASKER
hi I am back...gone longer than expected...so, I will go over what you sent...thanks so much. believe me...I appreciate all you are willing to teach me. I promise I will leave you alone soon:)
ASKER
ok, after this I am assigning pts because so far it looks like its ALMOST WORKING!!! I did all the things you said to do...but I am getting and error in firefox firebug:
document.getElementById("C
[Break on this error] document.getElementById("C
was this line supposed to reference the hidCurrent?
Hopefully I will be good to go before the weekend...I can see the array list of the pictures separated by a comma.
any suggestions. thanks again...where did you learn all of this???? any tips about how I can learn as much as you know?
document.getElementById("C
[Break on this error] document.getElementById("C
was this line supposed to reference the hidCurrent?
Hopefully I will be good to go before the weekend...I can see the array list of the pictures separated by a comma.
any suggestions. thanks again...where did you learn all of this???? any tips about how I can learn as much as you know?
ASKER
Hi again:
So...I noticed that the hidCurrent html tag does not have a runat server in your code....did you do that on purpose...because its in the codebehind.
also, are the hidCurrent and Current fields two separate things? I am getting some undefined errors when I click to go to the next image. it also seems to append 01 and then 011 and then 0111 etc for the array numbers.
If at all possible please clarify thanks so much.
So...I noticed that the hidCurrent html tag does not have a runat server in your code....did you do that on purpose...because its in the codebehind.
also, are the hidCurrent and Current fields two separate things? I am getting some undefined errors when I click to go to the next image. it also seems to append 01 and then 011 and then 0111 etc for the array numbers.
If at all possible please clarify thanks so much.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
yep...figured it out...had to parseint in javascript...the only thing now I have to figure out is how to reset it so it starts over from the beginning and top pass in the collection id from a menu control (not a dropdown)...do you have any idea why it wouldnt be resetting to the first image? Anyway, thanks for all of your help. You basically saved my project, and helped me develop a whole other way to process images...which it seems to many people want these days.
I hope you are able to help me in the future.
I appreciate it.
I hope you are able to help me in the future.
I appreciate it.
ASKER
are awesome...I'd like to get your email if you are allowed to find out more about your experience...again you were awesome. thanks again.
var totals=document.getElement
should probably be:
var totals=parseInt(document.g
should probably be:
var totals=parseInt(document.g
<asp:Buttin id="hidBtnRefresh" runat="Server" visible="false" />
JavaScript is normal, except that onClick, it fires off a button/hidden button that refreshes the next image name in the hidden input box.
load the image location in the global variable (see next step) ( .src="<%=NextImage%>"; )
document.getElementById("<
And in the .Net back-end code, in the function for the hidBtnRefresh click event, get the next image name/loaction, and store into the public variable NextImage declared globally on the page... that way you can access the image URL/name at any time in the page... you can use other variables for the other information that you want, or store it all in one string seperated by special characters to seperate the array content...
is that what you<re looking for?