Change background image and div content with ajax

Question

Simonwhite80 0 Newbie Poster

14 Years Ago

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>

javascript

3 Contributors
10 Replies
987 Views
13 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by fxm

Graphix 68 ---

14 Years Ago

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.

Edited 14 Years Ago by Graphix because: n/a

Graphix 68 ---

14 Years Ago

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?

fxm 23 Posting Pro

14 Years Ago

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.

Reply to this topic

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.

Simonwhite80 0 Newbie Poster · Answer 1 · 2010-07-01T15:39:00+00:00

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>

Simonwhite80 0 Newbie Poster · Answer 2 · 2010-07-01T16:00:58+00:00

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

fxm 23 Posting Pro · Answer 3 · 2010-07-01T16:29:16+00:00

keep using the same xmlhttp object

Each call to ahah() instantiates a new object.

Simonwhite80 0 Newbie Poster · Answer 4 · 2010-07-01T16:43:21+00:00

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>

fxm 23 Posting Pro · Answer 5 · 2010-07-01T17:33:15+00:00

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.

Simonwhite80 0 Newbie Poster · Answer 6 · 2010-07-01T19:51:10+00:00

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 ?

fxm 23 Posting Pro · Answer 7 · 2010-07-01T20:36:25+00:00

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.