Maybe I've been looking at this code too long, I'm sure the ) is there. I'd appreciate any help. Thank you. <?php $paintingBack=$paintingNumber-1; $paintingNext=$paintingNumber+1; if ($paintingBack < 1) { $paintingBack = $paintingBack + 1; } ?> <a href="" class='link' onFocus='if(this.blur)this.blur()' onclick="change_content('imagediv', '<img src='images/painting_<? echo $paintingBack; ?>.jpg'>');"><img src='images/braceL.gif' alt='brace' width='20' height='11' valign='text-bottom'/></a>[\code] Code (markup):
Four opening brackets and four closing brackets. Check! Try escaping the nested quotes (red slashes). <a href="" class='link' onFocus='if(this.blur)this.blur()' onclick="change_content('imagediv', '<img src=[COLOR="red"]\[/COLOR]'images/painting_<? echo $paintingBack; ?>.jpg[COLOR="red"]\[/COLOR]'>');"><img src='images/braceL.gif' alt='brace' width='20' height='11' valign='text-bottom'/></a> Code (markup): They are prematurely closing the second parameter for change_content, which then expects to find a closing bracket but instead sees the rest of the image element.
OK, done. The computed code = <a href="" class='link' onFocus='if(this.blur)this.blur()' onclick="change_content('imagediv', '<img src=\'images/painting_2.jpg\'/>')"><img src='images/braceL.gif' alt='brace' width='20' height='11' valign='text-bottom'/></a><a href="thumbnails.php" class="linkCurrent" target="_self" onFocus="if(this.blur)this.blur)" />PAINTINGS</a> Code (markup): No error message, but the string is not written to 'imagediv'. !
fyi: This is the line of code in prototype.js that doesn't like the string. Line #1530. this.body = this.method == 'post' ? (this.options.postBody || params) : null; 1531 this.transport.send(this.body); Code (markup):
What is this content_change function? I can't find anything about it in the Prototype docs or Google. A link to the website would be a real help. onFocus="if(this.blur)this.blur)" That's not right, where is the other bracket?
<script type="text/javascript"> function change_content(elementname, filename) { new Ajax.Updater(elementname, filename); } </script> Code (markup):
I'm thinking that the escape character '\' is not being recognized for what it is. Been looking around for inspiration and not finding any.
From reading the docs, I see that Updater expects three parameters but you only have two Not sure if the last one is optional but the script seems to hang at that point. Try this: <script type="text/javascript"> function change_content(elementname, filename) { new Ajax.Updater(elementname, filename, { } ); } </script> Code (markup): Or maybe this will work <script type="text/javascript"> function change_content(elementname, filename) { new Ajax.Updater(elementname, filename, { method: 'get' } ); } </script> Code (markup):
www.act-right.net/meg/peek/[/URL] After you click 'Paintings', only the 3 paintings in the upper-left (1st row) are working. Enuf to test. onFocus="if(this.blur)this.blur)" missing bracket?
Thank you, but neither of the functions work. I believe the 3rd parameter is optional. The problem remains. The one about the non-recognition of the escape charac.
Why would you need ajax to load an image into a div? <a href="" id="link1" class='link'> <img src='images/braceL.gif' alt='brace' width='20' height='11' valign='text-bottom'/> </a> <a href="thumbnails.php" class="linkCurrent" target="_self" onFocus="if(this.blur)this.blur" />PAINTINGS</a> <script type="text/javascript"> var l = document.getElementById("link1"); l.onFocus = function() { if(this.blur)this.blur(); } l.onclick = function() { document.getElementById("imagediv").innerHTML = "<img src='images/painting_2.jpg />'"; [B]return false;[/B] } </script> Code (markup): If you don't return false after performing the onclick function on a link then the page will refresh even if the link has no url. Which will clear the div anyway. That is the main reason why your function wouldn't have worked, apart from the other errors.
Hi. Until yesterday I had only a vague idea what ajax did/was and had almost no experience with javascript except to cadge scripts from where I found them. Yeah, so I'm not surprised you found errors! The variable $pictureNumber is passed to this page and is used in determining which painting to display, how would I incorporate that into your lovely function? I did do some research on .innerHTML and came away with the notion that it was better left lost to history. Just my impression. I did several times insert 'return false' after the arguments, but its addition seemed to make things worse. Thanks for your interest!
I don't use PHP but I guess: <a href="" id="link1" class='link'> <img src='images/braceL.gif' alt='brace' width='20' height='11' valign='text-bottom'/> </a> <a href="thumbnails.php" class="linkCurrent" target="_self" onFocus="if(this.blur)this.blur" />PAINTINGS</a> <script type="text/javascript"> var l = document.getElementById("link1"); l.onFocus = function() { if(this.blur)this.blur(); } l.onclick = function() { document.getElementById("imagediv").innerHTML = "<img src='images/painting_<? echo $paintingNumber; ?>.jpg' />"; return false; } </script> Code (markup):
innerHTML is commonly used, especially with AJAX. It is the only way to load a lot HTML directly onto a page. In your case you do not have to use innerHTML because you are only loading one element. But it is the simplest way to do so. You could use: var l = document.getElementById("link1"); l.onFocus = function() { if(this.blur)this.blur(); } l.onclick = function() { var el = document.createElement("img"); var imgdiv = document.getElementById("imagediv"); if(imgdiv.firstChild) imgdiv.removeChild(imgdiv.firstChild); el.src = "images/painting_<? echo $paintingNumber; ?>.jpg"; imgdiv.appendChild(el); return false; } Code (markup): Personally, I would have just loaded the image with the page and had it hidden until the button/link is clicked.
I'm cleaning up your code (I realize it's just a sketch) and will return with news. Thanks very much.
Whoa!!!! The url is perfect, however it is not being written to imagediv. Here's what the code looks like now: <?php $paintingBack=$paintingNumber-1; $paintingNext=$paintingNumber+1; if ($paintingBack < 1) { $paintingBack = $paintingBack + 1; } ?> <a href="" id="link1" class='link'><img src='images/braceL.gif' alt='brace' width='20' height='11' valign='text-bottom'/></a> <script type="text/javascript"> var l = document.getElementById("link1"); l.onFocus = function() { if(this.blur)this.blur(); } l.onclick = function() { document.getElementById("imagediv").innerHTML = "<img src='images/painting_<? echo $paintingBack; ?>.jpg />'"; return false; } </script> <a href="thumbnails.php" class="linkCurrent" target="_self" onFocus="if(this.blur)this.blur)" />PAINTINGS</a> <a href="painting_<?php echo $paintingNext; ?>.php" class="link" target="_self" onFocus="if(this.blur)this.blur()" /><img src="images/braceR.gif" alt="brace" width="20" height="14" valign="text-bottom" onFocus="if(this.blur)this.blur()" /></a> Code (markup):
Yeah sorry the first code I gave you had a mistake, that I later edited and fixed, change: document.getElementById("imagediv").innerHTML = "<img src='images/painting_<? echo $paintingBack; ?>.jpg />'" to: document.getElementById("imagediv").innerHTML = "<img src='images/painting_<? echo $paintingBack; ?>.jpg' />" Had the ' in the wrong place sorry. That should work fine. Oh, and be sure that you have 'imagediv' on the page where you want the image to be displayed. That being: <div id="imagediv"></div>
OK, you are a genius, YES. Now my client will not have a 56 page site, it will be 6 pages. Thank you, thank you! I'm delirious. I've been up for 36 hours or so, yeah, really delirious. Oh, man. I'm going to bed. Take care. See you around.