Hi All hope you can help its been driving me crazy .. i have a website where i change the content of a div using jquery, however i also want to change the background image at the same time but cant seem to get both to work together, not sure what im doing wriong but i think its something to do with the script and return false

you can also view the page here

http://www.prototype202.com/index_test.html

button1 changes bg image ok
button 2 changes div content ok
button 3 doesnt work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE></TITLE>
<META content="text/html; charset=UTF-8" http-equiv=Content-Type><LINK rel=stylesheet type=text/css href="css/style.css">
<META name=GENERATOR content="MSHTML 8.00.6001.18928">
<SCRIPT language="JavaScript" SRC="js/jquery-1.4.2.js"></SCRIPT> 
<script type="text/javascript">

function ahah(url, target) {
  document.getElementById(target).innerHTML = ' ';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
}  

function ahahDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function load(name, div) {
	ahah(name,div);
	return false;
}


</script>
</HEAD>
<BODY id=page-body>
<DIV id=bg>
<DIV>
<TABLE cellSpacing=0 cellPadding=0>
  <TBODY>
  <TR>
    <TD> <span id=bg_image><img alt="" src="/images/june.jpg"></span>    </TD>
  </TR></TBODY></TABLE></DIV></DIV>

<DIV id=prototype>
 <table width="518" border="0" cellpadding="0" cellspacing="1" class="bgmain">

   <tr>
     <td valign="top"><table width="518" border="0" cellpadding="0" cellspacing="0" class="tablebodytext">
       <tr class="tablebodytext">
         <td height="10" class="tablebodytext"><div align="center"><a href="feb2010.html" onclick="load('bg_feb.html','bg_image');return false;"><img src="images/trklist.png" alt="button1" width="15" height="15" border="0"></a></div></td>
       </tr>
       <tr class="tablebodytext">
         <td height="10" class="tablebodytext"><div align="center"><a href="feb2010.html" onclick="load('tracklists/feb2010.html','prototype_trk');return false"><img src="images/trklist.png" alt="button2" width="15" height="15" border="0"></a></div></td>
       </tr>
       <tr class="tablebodytext">
         <td height="10" class="tablebodytext"><div align="center"><a href="mar2010.html" onclick="load('tracklists/mar2010.html','prototype_trk');return false;" "load('bg_feb.html','bg_image');return false;"><img src="images/trklist.png" alt="button3" width="15" height="15" border="0"></a></div></td>
       </tr>

     </table></td>
   </tr>
 </table>
</DIV>
<div id="prototype_trk">
</BODY></HTML>

You added an excessive " and an extra return false

<a href="mar2010.html" onclick="load('tracklists/mar2010.html','prototype_trk');return false;" "load('bg_feb.html','bg_image');return false;">

needs to be

<a href="mar2010.html" onclick="load('tracklists/mar2010.html','prototype_trk'); load('bg_feb.html','bg_image'); return false;">

~G

PS: There is not a single piece of jQuery in your code.

Hey thanks for the heads up , although i have to admit i had already tried that but no joy so thought i would try keeping the return flase in at the end of each statement .. anyway i amended the code but still no joy

see here

http://www.prototype202.com/index_test_1.html#

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE></TITLE>
<META content="text/html; charset=UTF-8" http-equiv=Content-Type><LINK rel=stylesheet type=text/css href="css/style.css">
<META name=GENERATOR content="MSHTML 8.00.6001.18928">
<SCRIPT language="JavaScript" SRC="js/jquery-1.4.2.js"></SCRIPT> 
<script type="text/javascript">

function ahah(url, target) {
  document.getElementById(target).innerHTML = ' ';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
}  

function ahahDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function load(name, div) {
	ahah(name,div);
	return false;
}


</script>
</HEAD>
<BODY id=page-body>
<DIV id=bg>
<DIV>
<TABLE cellSpacing=0 cellPadding=0>
  <TBODY>
  <TR>
    <TD> <span id=bg_image><img alt="" src="/images/june.jpg"></span>    </TD>
  </TR></TBODY></TABLE></DIV></DIV>

<DIV id=prototype>
 <table width="518" border="0" cellpadding="0" cellspacing="1" class="bgmain">

   <tr>
     <td valign="top"><table width="518" border="0" cellpadding="0" cellspacing="0" class="tablebodytext">
       <tr class="tablebodytext">
         <td height="10" class="tablebodytext"><div align="center"><a href="feb2010.html" onclick="load('bg_feb.html','bg_image');return false;"><img src="images/trklist.png" alt="button1" width="15" height="15" border="0"></a><br>
           this changes background </div></td>
       </tr>
       <tr class="tablebodytext">
         <td height="10" class="tablebodytext"><div align="center"><a href="feb2010.html" onclick="load('tracklists/feb2010.html','prototype_trk');return false"><img src="images/trklist.png" alt="button2" width="15" height="15" border="0"></a><br>
           this loads external div content </div></td>
       </tr>
       <tr class="tablebodytext">
         <td height="10" class="tablebodytext"><div align="center">
           <p><a href="mar2010.html" onclick="load('tracklists/mar2010.html','prototype_trk'); load('bg_mar.html','bg_image'); return false;"><img src="images/trklist.png" alt="button3" width="15" height="15" border="0"></a><br>
             this button should do both but only changes bg or div content whichever is called first in onclick script </p>
           </div></td>
       </tr>

     </table></td>
   </tr>
 </table>
</DIV>
<div id="prototype_trk">
</BODY></HTML>

Also there might be some complications, due to the fact you keep using the same xmlhttp object. The one might not be finished yet, when you call the next one. Perhaps make a different function for the background?

this button should do both but only changes bg or div content whichever is called first in onclick script

That's because your function load () ends with return false; . The first call to load() in button3 thus prevents the second call from even happening.

thanks guys, my scripting aint that hot , how do i get round this ? .. remove the return false in the script ?

keep using the same xmlhttp object

Each call to ahah() instantiates a new object.

Any chance you could show me in the code i'm a designer by trade trying to get a personal project up and I've pretty much hit the limits of my code knowledge here. would really appreciate the help

<script type="text/javascript">

function ahah(url, target) {
  document.getElementById(target).innerHTML = ' ';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
}  

function ahahDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function load(name, div) {
	ahah(name,div);
	return false;
}
</script>

Every call to load() [at least in the snippet you posted] was already followed by return false;, so removing line 36 [which is what you need to do to solve the current problem] won't change anything else.

Still not quite there im afraid or i am still missing something, if i remove return false in the script as mentioned and have this code on the href

<a href="tracklists/mar2010.html" onclick="load('tracklists/mar2010.html','prototype_trk');return false;load('bg_mar.html','bg_image');return false;">

it only changes the div layer content

if i have this code with only one return false

<a href="tracklists/mar2010.html" onclick="load('tracklists/mar2010.html','prototype_trk');load('bg_mar.html','bg_image');return false;">

it only changes the background image


see file

http://www.prototype202.com/index_test_2.html

any ideas ?

With this

function load(name, div) {
	ahah(name,div);
}

in place, that

<a href="tracklists/mar2010.html" onclick="load('tracklists/mar2010.html','prototype_trk');load('bg_mar.html','bg_image');return false;">

should change both.

If it doesn't, I will look into it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.