AJAX

Passing from image Array in url

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Oct 2009

Posts: 8

Reputation: darkRoom is an unknown quantity at this point

Solved Threads: 0

darkRoom

Offline

Newbie Poster

Passing from image Array in url

Oct 17th, 2009

My website I'm building has various image Arrays, I have JS code passing data so an image in 1st page exp:[image5] loads into 2nd pages Array as [image5], it works in all browsers except Firefox where 1st page reloads to [image1] in 1st page Array. Being a newbie I can't seem to work around issue any suggestions are greatly appreciated!

•

Join Date: Apr 2009

Posts: 885

Reputation: Airshow will become famous soon enough

Solved Threads: 127

Airshow

Offline

Practically a Posting Shark

Oct 19th, 2009

DarkRoom,

There's not a lot to go on there.

For a diagnosis, you will have to post some actual code.

Airshow

50% of the solution lies in accurately describing the problem!

•

Join Date: Oct 2009

Posts: 8

Reputation: darkRoom is an unknown quantity at this point

Solved Threads: 0

darkRoom

Offline

Newbie Poster

What to send

Oct 19th, 2009

•

Originally Posted by Airshow

DarkRoom,

There's not a lot to go on there.

For a diagnosis, you will have to post some actual code.

Airshow

Thank you for replying being new not really sure how much or which parts of code to submit for you to get an idea of the issue.

•

Join Date: Oct 2009

Posts: 8

Reputation: darkRoom is an unknown quantity at this point

Solved Threads: 0

darkRoom

Offline

Newbie Poster

Oct 20th, 2009

Hope this is what your looking for.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<head>
<script type="javascript/text">
function zoom()
  {
  document.location.replace("stevenbroadypfpaexl4.html?jss="+jss);
  }
</script>
</head>
<body>
<FORM NAME="passed">
<INPUT TYPE="hidden" NAME="variable" SIZE="35">
</FORM>
<div id="apDiv1"><img src="images/P1s.jpg" name=PictureBox width=656 height=429 /></div>
<script type="text/javascript">
 
document.passed.variable.value = window.location
var number = document.passed.variable.value
 
function delineate(str){
theleft = str.indexOf("=") + 1;
theright = str.length;
if(theleft)
	{
	return Number(str.substring(theleft, theright));
	}
else
	{
	return(1);
	}
}
jss=delineate(number);
PictureBox.src=Picture[jss]
 
</script>
<head>
<script type="javascript/text">
function zoom()
  {
  document.location.replace("stevenbroadypfpaexl4.html?jss="+jss);
  }
</script>
</head>
<body>
<FORM NAME="passed">
<INPUT TYPE="hidden" NAME="variable" SIZE="35">
</FORM>
<div id="apDiv1"><img src="images/P1s.jpg" name=PictureBox width=656 height=429 /></div>
<script type="text/javascript">

document.passed.variable.value = window.location
var number = document.passed.variable.value

function delineate(str){
theleft = str.indexOf("=") + 1;
theright = str.length;
if(theleft)
	{
	return Number(str.substring(theleft, theright));
	}
else
	{
	return(1);
	}
}
jss=delineate(number);
PictureBox.src=Picture[jss]

</script>

•

Join Date: Apr 2009

Posts: 885

Reputation: Airshow will become famous soon enough

Solved Threads: 127

Airshow

Offline

Practically a Posting Shark

Oct 20th, 2009

darkRoom,

Put this in document head (replacing current script):

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<script type="javascript/text">
function QueryParser(str) {
  /******************** Query Parser *********************
   ***** A general purpose querysrting parser/builder ****
   ********************* by Airshow **********************
   ********* Please keep this attribution intact *********/
	if (str) {
		str = unescape(str);
		if (str.indexOf("?") === 0) { str = str.substring(1); }
		var args = str.split("&");
		for (var i = 0; i < args.length; i++) {
			var pair = args[i].split("=");
			if (pair.length >= 1) {
				var prop = pair.shift();
				this[prop] = (pair.length == 1) ? pair[0] : (pair.length > 1) ? pair.join('=') : '';
			}
		}
	}
	this.set = function (prop, value) { return this[prop] = value; };
	this.clear = function (prop) {
		if(typeof this[prop] !== 'undefined') {
			this.set(prop, null);
			return true;
		}
		else { return false; }
	};
	this.build = function (baseURL) {
		baseURL = (!baseURL || typeof baseURL !== 'string') ? '' : (baseURL.indexOf("?") === -1) ? (baseURL + '?') : baseURL;
		var strArray = [];
		for (var prop in this) {
			if (typeof this[prop] !== 'undefined' && typeof this[prop] !== 'function' && this[prop] !== null) { strArray.push([prop, '=', this[prop]].join('')); }
		}
		return baseURL + strArray.join('&');
	};
	this.buildLink = function (baseURL, linkTxt) {
		var url = this.build(baseURL);
		return [ '<a href="', url, '">', ((!linkTxt) ? url : linkTxt), '</a>' ].join('');
	};
}
var $q = new QueryParser(location.search);
 
function zoom(jss){
  // jss argumant is optional;
  // if not passed, the existing value of $q.jss is used to build the new url
  // if passed, the value of $q.jss is set to this value and used to build the new url
  if(jss) { $q.set('jss', jss); }
  document.location.replace($q.build('stevenbroadypfpaexl4.html');
}
 
onload = function(){
  //This will run as soon as the page is loaded
  var p = document.getElementById('PictureBox');
  if(p && $q.jss){ PictureBox.src = Picture[$q.jss]; }
}
</script>
<script type="javascript/text">
function QueryParser(str) {
  /******************** Query Parser *********************
   ***** A general purpose querysrting parser/builder ****
   ********************* by Airshow **********************
   ********* Please keep this attribution intact *********/
	if (str) {
		str = unescape(str);
		if (str.indexOf("?") === 0) { str = str.substring(1); }
		var args = str.split("&");
		for (var i = 0; i < args.length; i++) {
			var pair = args[i].split("=");
			if (pair.length >= 1) {
				var prop = pair.shift();
				this[prop] = (pair.length == 1) ? pair[0] : (pair.length > 1) ? pair.join('=') : '';
			}
		}
	}
	this.set = function (prop, value) { return this[prop] = value; };
	this.clear = function (prop) {
		if(typeof this[prop] !== 'undefined') {
			this.set(prop, null);
			return true;
		}
		else { return false; }
	};
	this.build = function (baseURL) {
		baseURL = (!baseURL || typeof baseURL !== 'string') ? '' : (baseURL.indexOf("?") === -1) ? (baseURL + '?') : baseURL;
		var strArray = [];
		for (var prop in this) {
			if (typeof this[prop] !== 'undefined' && typeof this[prop] !== 'function' && this[prop] !== null) { strArray.push([prop, '=', this[prop]].join('')); }
		}
		return baseURL + strArray.join('&');
	};
	this.buildLink = function (baseURL, linkTxt) {
		var url = this.build(baseURL);
		return [ '<a href="', url, '">', ((!linkTxt) ? url : linkTxt), '</a>' ].join('');
	};
}
var $q = new QueryParser(location.search);

function zoom(jss){
  // jss argumant is optional;
  // if not passed, the existing value of $q.jss is used to build the new url
  // if passed, the value of $q.jss is set to this value and used to build the new url
  if(jss) { $q.set('jss', jss); }
  document.location.replace($q.build('stevenbroadypfpaexl4.html');
}

onload = function(){
  //This will run as soon as the page is loaded
  var p = document.getElementById('PictureBox');
  if(p && $q.jss){ PictureBox.src = Picture[$q.jss]; }
}
</script>

Then delete the script in the document body.

Then, in the document body:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
//-- change
<div id="apDiv1"><img src="images/P1s.jpg" name="PictureBox" width="656" height="429" /></div>
//-- to
<div id="apDiv1"><img src="images/P1s.jpg" id="PictureBox" width="656" height="429" /></div>
//-- change
<div id="apDiv1"><img src="images/P1s.jpg" name="PictureBox" width="656" height="429" /></div>
//-- to
<div id="apDiv1"><img src="images/P1s.jpg" id="PictureBox" width="656" height="429" /></div>

The code centres around $q, an instance of my QueryParser object, which automatically parses the querystring of the page's url and makes each parameter available as $q.paramX , $q.paramY , $q.paramZ (fictitious param names). $q also has methods to set and clear parameters individually prior to either building a url or HTML link, with querystring composed from its current properties.

If you need to build url(s)/link(s) which is comletely independent of the current page's url, then you can create further instance(s) of QueryParser .

Enjoy.

Airshow

50% of the solution lies in accurately describing the problem!

•

Join Date: Oct 2009

Posts: 8

Reputation: darkRoom is an unknown quantity at this point

Solved Threads: 0

darkRoom

Offline

Newbie Poster

Oct 21st, 2009

Well I reworked document but maybe I'm missing or not understanding something, or maybe you need to see whole document to make it work. At this point with your script which seems amazing and somewhat unintelligible to this novice, I get no reaction from the button that replaces page(zoom)using onclick="QueryParser()". What I don't grasp in all of this is why in all other browsers url gets passed through <Form> but Firefox doesn't. Sorry don't mean to be a pain in the ass asking silly questions, but I really would like to understand, learn so I can do JS properly.

•

Join Date: Apr 2009

Posts: 885

Reputation: Airshow will become famous soon enough

Solved Threads: 127

Airshow

Offline

Practically a Posting Shark

Oct 21st, 2009

darkRoom,

Please don't worry about asking questions. Javascript is superficialy simple but hides a multidude of complexity.

The script I posted above is designed to go in your 2nd page(s) in order to receive and act on parameter(s) passed from 1st page. You may leave your 1st page as it was.

You don't need to call QueryParser as it is called by the line var $q = new QueryParser(location.search); thus making the global object $q with properties reflecting the parameters passed in the url's querystring.

For example:

Page URL : myPage2.html?name=Fred&birthday=01/01/1985&iq=110

With QueryParser, the parameters ICODE]name[/ICODE], birthday , iq become accessible in Javascript as:

$q.name : Fred
$q.birthday : 01/01/1985
$q.iq : 110

So this is a way to pass values from one page to another. (Other methods involve cookies or server-side scripting).

I hope this better explains how to use my code.

Airshow

50% of the solution lies in accurately describing the problem!

•

Join Date: Oct 2009

Posts: 8

Reputation: darkRoom is an unknown quantity at this point

Solved Threads: 0

darkRoom

Offline

Newbie Poster

Oct 21st, 2009

I placed your script in 2 test pages (orig and enlarge) of my site so in theory it should work. I may be overreaching on construction my first site but being a retouching site it has to be technically and graphically engaging. It has 4 image example pages (about 10 images in each Array) each being able to zoom in and out (switching pages) by pressing a button(image) to allow visitors to better examine my work (it also has flash pages those I'm not worried about) by pressing zoom button new page loads either enlarged or reduced depending where you are at. I don't have my site up yet otherwise I would send a visual which may help not sure how else to facilitate your trying to solve my problem.

•

Join Date: Oct 2009

Posts: 8

Reputation: darkRoom is an unknown quantity at this point

Solved Threads: 0

darkRoom

Offline

Newbie Poster

Oct 23rd, 2009

Ok so I got half my problem solved by adding return false; in the head script and return before onclick to the button .it will open proper page but won't pass array data