hi friends
my site is a gallery based on zenphoto but i want to add an ajax theme that gives this error:
"An error occurred in your response function, NOT mybic related. Error Name: TypeError Message:document.getElementById("imageSource") is null"
i have tried almost all!!!
if you want to see my try: http://www.mefistofile.com/zenphoto/secondatutta/aviso3.jpg
Best regards
Rob
Hi, there!
Can you provide the actual code regarding this problem?
Well, obviously the code is trying to reference an element with the id "imageSource" here:
// this function is called after the call to server.
// It's update all some part of the screen :
function respRefreshImage(resp) {
// update the main image:
document.getElementById('imageSource').src = resp.imageSource;
document.getElementById('imageSource').onLoad=imageLoaded();
document.getElementById('imageHrefId').href= resp.fullImageURL;
document.getElementById('imageHrefId').title=resp.imageTitle;
if(document.getElementById('imageDescEditable')!=null) {
document.getElementById('imageDescEditable').innerHTML=resp.imageDescription;
}else {
document.getElementById('imageDesc').innerHTML=resp.imageDescription;
}
document.getElementById('imageTitleInHeaderID').innerHTML=resp.imageTitleInHeader;
// update the comments part :
var size=resp.commentListSize;
var comments="";
for(i=0; i<size; i++){
comments = comments+resp.commentList[i].comment;
}
document.getElementById("commentsList").innerHTML=comments;
document.getElementById("commentNumber").innerHTML=size+" Comment(s)";
// update the comment Form action :
document.getElementById("commentform").action = resp.commentFormAction;
// init l'ajax
if(document.getElementById('imageDescEditable')!=null) {
initEditableDesc('imageDescEditable');
}
}It may have something to do with code that may have been changed or some type of incompatibility with the javascript and the theme.
Based on the code, I'd try adding the id imageSource to the img tag of the large image on the page. That's just an educated guess though.
Hi, there!
Can you provide the actual code regarding this problem?
this is the page that give error ...do you need something else? help me ...please...
Rob
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<?php include_once("snack_function.php"); ?>
<title><?php printGalleryTitle(); ?> | <?=getAlbumTitle();?></title>
<link rel="stylesheet" href="<?= $_zp_themeroot ?>/zen.css" type="text/css" />
<script type="text/javascript" src="/zenphoto/fnclient/fnclientlib/js/fnclient.js"></script>
<link rel="stylesheet" type="text/css" href="/zenphoto/fnclient/fnclientlib/styles/fnclient.css" />
<script type="text/javascript">
function toggleComments() {
var commentDiv = document.getElementById("comments");
if (commentDiv.style.display == "block") {
commentDiv.style.display = "none";
} else {
commentDiv.style.display = "block";
}
}
</script>
<?php zenJavascript(); ?>
<script type="text/javascript" src="<?= $_zp_themeroot ?>/mybic.js">
</script>
<script>
var ajaxObj = new XMLHTTP("<?= $_zp_themeroot ?>/mybic_server.php");
var selectedThumnbails="";
function callAjax(param,thumbId) {
// update selected thumbnail image :
if(selectedThumnbails!="") {
updateStyle(selectedThumnbails,0);
}
selectedThumnbails=thumbId;
updateStyle(selectedThumnbails,1);
//to display a "Please wait..." during the refresh of the page.
document.getElementById('loadingId').style.display="block";
// call the server using ajax :
ajaxObj.call("action=refreshImage&"+param, respRefreshImage);
}
function imageLoaded() {
// remove the "please wait..." message :
document.getElementById('loadingId').style.display="none";
}
// this function is called after the call to server.
// It's update all some part of the screen :
function respRefreshImage(resp) {
// update the main image:
document.getElementById('imageSource').src = resp.imageSource;
document.getElementById('imageSource').onLoad=imageLoaded();
document.getElementById('imageHrefId').href= resp.fullImageURL;
document.getElementById('imageHrefId').title=resp.imageTitle;
if(document.getElementById('imageDescEditable')!=null) {
document.getElementById('imageDescEditable').innerHTML=resp.imageDescription;
}else {
document.getElementById('imageDesc').innerHTML=resp.imageDescription;
}
document.getElementById('imageTitleInHeaderID').innerHTML=resp.imageTitleInHeader;
// update the comments part :
var size=resp.commentListSize;
var comments="";
for(i=0; i<size; i++){
comments = comments+resp.commentList[i].comment;
}
document.getElementById("commentsList").innerHTML=comments;
document.getElementById("commentNumber").innerHTML=size+" <?= $Label_CommentCount ?>";
// update the comment Form action :
document.getElementById("commentform").action = resp.commentFormAction;
// init l'ajax
if(document.getElementById('imageDescEditable')!=null) {
initEditableDesc('imageDescEditable');
}
}
/* To update opacity on image
0 no Selection
1 selection
*/
function updateStyle(thumbId,selected)
{
curElement=document.getElementById(thumbId);
if (selected==1) {
curElement.setAttribute("style","border: 2px solid #7F9E50;"); //color:#7F9E50;");
}
else {
curElement.setAttribute("style","border: 2px solid #505600;"); //color:#505600;");
}
}
</script>
<?php if (zp_loggedin()){;}else{
echo " <style type=\"text/css\">span.fn-controlbar-edit-inactive { left:155px;
display:hidden;}span.fn-controlbar-edit-active {
display:hidden;}</style>";}
?>
</head>
<body>
<div id="main">
<div id="loadingId">
<?= $Label_Loading ?>
</div>
<div class="leftContent">
<!--
<div class="imgnav">
<?php if (hasPrevImage()) { ?>
<div class="imgprevious"><a id="previousLink" href="<?= getPrevParamURL();?>" title="<?= $Label_PreviousImage_href_title ?>"><?= $Label_PreviousImage_href ?></a></div>
<?php }
else { ?>
<div class="imgprevious"><a id="previousLink" href="#" title="<?= $Label_PreviousImage_href_title ?>"><?= $Label_PreviousImage_href ?></a></div>
<?php }
if (hasNextImage()) { ?>
<div class="imgnext"><a id="nextLink" href="<?=getNextParamURL();?>" title="<?= $Label_NextImage_href_title ?>" id="nextLink"><?= $Label_NextImage_href ?></a></div>
<?php }
else {?>
<div class="imgnext"><a id="nextLink" href="#" title="<?= $Label_NextImage_href_title ?>" id="nextLink"><?= $Label_NextImage_href ?></a></div>
<?php } ?>
</div>
-->
<div class="imageList">
<?php
$_zp_page=$_zp_current_image->getAlbumPage();
$image_index=0;
while (next_image()):
if($_zp_current_image->getIndex()==$_zp_current_image_restore->getIndex()) { ?>
<div class="image">
<div class="imagethumb">
<a href="javascript:callAjax('<?=getImageParamURL();?>','thumbId<?= $image_index ?>');" title="<?=getImageTitle();?>">
<?php printImageThumb(getImageTitle(),null,"thumbId".$image_index); ?>
</a>
</div>
</div>
<script language="JavaScript" type="text/javascript">
selectedThumnbails="thumbId<?= $image_index ?>";
updateStyle(selectedThumnbails,1);
</script>
<?php } else { ?>
<div class="image">
<div class="imagethumb">
<a href="javascript:callAjax('<?=getImageParamURL();?>','thumbId<?= $image_index ?>');" title="<?=getImageTitle();?>">
<?php printImageThumb(getImageTitle(),null,"thumbId".$image_index); ?>
</a>
</div>
</div>
<?php }
$image_index=$image_index+1;
endwhile;
?>
</div>
<div>
<?php printPageListWithNav_snack("« prev", "next »"); ?>
</div>
</div>
<div class="centerContent">
<div id="gallerytitle2">
<h2>
<span><a href="/wordpress">Blog</a></span>
| <span><a href="<?=getGalleryIndexURL();?>" title="Gallery Index"><?=getGalleryTitle();?></a>
| </span> <div id="imageTitleInHeaderID" style="display: inline;"><?php printImageTitle(true); ?></div> </h2>
</div>
<div id="image"><?php printDefaultSizedImage(getImageTitle(),"fn-image",getDefaultSizedImage());?></div><div id="image"><a href="<?php echo getFullImageURL();?>" title="<?php echo getImageTitle();?>">view image</a>
</div>
<div id="narrow">
<div id="imageDesc">
<?php echo getImageDesc(); ?>
</div>
<div id="comments">
<?php $num = getCommentCount(); echo "<h3><div id=\"commentNumber\">$num $Label_CommentCount </div></h3>"; ?>
<div id="commentsList">
<?php while (next_comment()):
echo(getComment());
endwhile; ?>
</div>
<div class="imgcommentform">
<!-- If comments are on for this image AND album... -->
<h3><?= $Label_Comment_Form_Title ?></h3>
<form id="commentform" action="#" method="post">
<input type="hidden" name="comment" value="1" />
<input type="hidden" name="remember" value="1" />
<?php if (isset($error)) { ?><tr><td>
<div class="error">
<?= $Label_Comment_Error_Message ?>
</div></td></tr><?php } ?>
<table border="0">
<tr>
<td><?= $Label_Comment_Form_Name ?></td>
<td><input type="text" id="name" name="name" size="20" value="<?=$stored[0];?>" class="inputbox" />
</td>
</tr>
<tr>
<td><?= $Label_Comment_Form_Email ?></td>
<td><input type="text" id="email" name="email" size="20" value="<?=$stored[1];?>" class="inputbox" />
</td>
</tr>
<tr>
<td><?= $Label_Comment_Form_Site ?></td>
<td><input type="text" id="website" name="website" size="40" value="<?=$stored[2];?>" class="inputbox" /></td>
</tr>
</table>
<textarea name="comment" rows="6" cols="40"></textarea>
<br />
<input type="submit" value="<?=$Label_Comment_Form_SubmitButton ?>" class="pushbutton" /></div>
</form>
</div>
<!-- fin mainImage -->
</div>
</div>
<!-- fin mainImage-->
</div>
<div id="credit"><?php printAdminLink('Admin', '', ' | '); ?>Powered by <a href="http://www.zenphoto.org" title="A simpler web photo album">zenphoto</a></div>
</body>
</html>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.