Image Source Not Changing in IE

dreaken667

I'm using this javascript:

Expand|Select|Wrap|Line Numbers

 var curr_type="adherence";

function update(){

  var r=document.getElementById("range").options;

  var range=r[r.selectedIndex].value;

  if(range!="L7D"){

    document.getElementById("compliance").disabled=false;

  }else{

    document.getElementById("compliance").disabled=true;

    document.getElementById("adherence").checked=true;

    change("adherence");

  }

  var csat=document.getElementById("csat");

  var stat=document.getElementById("stat");

  csat.src="process.php?range="+range+"&type=csat";

  var strURL="process.php?range="+range+"&type="+curr_type;

  stat.src=strURL;

}

function change(type){

  var r=document.getElementById("range").options;

  var range=r[r.selectedIndex].value;

  var stat=document.getElementById("stat");

  var strURL="process.php?range="+range+"&type="+type;

  stat.src=strURL;

  curr_type=type;

}

with this HTML:
[HTML]<body>
<select id="range" onchange="update();">
<option value="L7D" selected>Last Week
<option value="L14">Last 2 Weeks
<option value="L1M">Last Month
<option value="MTD">Month to Date
</select>
<input onclick="change(this.value);" type="radio" name="stat" value="adherence" id="adherence" checked> Adherence
<input onclick="change(this.value);" type="radio" name="stat" value="compliance" id="compliance" disabled> Compliance
<br>
<img id="csat" src="process.php?range=L7D&type=csat" width=500 height=190>
<img id="stat" src="process.php?range=L7D&type=adherence" width=500 height=190>
</body>[/HTML]

The image source is a bit unorthodox, but is necessary (process.php takes the get variables, pulls data from a database, and generates a png image using the data). The code works fine in FireFox, but fails in IE and Opera. The problem is that the second image is not updating when update() or change() is called. The first image, however, doesn't have this issue. I am not recieving an error message from IE or Opera (other than it not working). I'm at a loss as to why I'm not recieving an error AND not getting the image updated. I could easily deal with either situation by itself, but this one has me stumped.

Live example

I'm sure it's something simple I've overlooked. Any help would be greatly appreciated.
~Billy~

dmjpro

Quote:

Originally Posted by dreaken667

The image source is a bit unorthodox, but is necessary (process.php takes the get variables, pulls data from a database, and generates a png image using the data).

Sorry for disturbing.
I have a query here.
If possible please answer me.
I always used to use static Source in IMG Tag in HTML, but dynamic Source I never used before. And more over I saw it first time in your code.
So I am very curious about it. Actually when you processing the IMG dynamically then what will be the MIME Type of your target page?
Means when you are about generate the HTML page then it is Text/HTML something like this. So what will be the MIME Type of your target page... here Process.php.
Please help. I want to apply it in my Project Work.

Kind regards,
Dmjpro.

dreaken667

Quote:

Originally Posted by dmjpro

Sorry for disturbing.
I have a query here.
If possible please answer me.
I always used to use static Source in IMG Tag in HTML, but dynamic Source I never used before. And more over I saw it first time in your code.
So I am very curious about it. Actually when you processing the IMG dynamically then what will be the MIME Type of your target page?
Means when you are about generate the HTML page then it is Text/HTML something like this. So what will be the MIME Type of your target page... here Process.php.
Please help. I want to apply it in my Project Work.

Kind regards,
Dmjpro.

No bother. Ok...I think I understood the question: you want to know what mime-type header I'm sending to the browser to make it resolve to an image. I'm using these lines to output the image (and it's not actually process.php that generates the images, by the way. I am redirecting to another php class to generate the image after I have pulled all the data.):
[PHP]
header("Content-type: image/png");
imagepng($image);
imagedestroy($image);
[/PHP]
You would need to change the content-type to be whatever image type you are working with. For instance, image/jpeg or image/bmp.

I actually came back to post that I figured out my own problem above. For some really odd reason, IE was confusing name="stat" (in the radio button attributes) and id="stat" (in the image attributes). I was using getElementById("stat") so it should have been accessing the image by that id, but it was not - it was accessing the radio button with the name "stat" instead. I'm still a bit confused as to why it did not generate an error, but I'm happy to have resolved the issue.

dmjpro

Glad to see that you solved your problem.
Look I am a J2EE man not a PHP man.
That's why I will send it to JAVA forum how I should do code in JSP or Servlet to generate an Image with MIME Type Image/XXX.

Anyway Thanks for your Kind reply

Kind regards,
Dmjpro.

acoder

Quote:

Originally Posted by dreaken667

I actually came back to post that I figured out my own problem above. For some really odd reason, IE was confusing name="stat" (in the radio button attributes) and id="stat" (in the image attributes). I was using getElementById("stat") so it should have been accessing the image by that id, but it was not - it was accessing the radio button with the name "stat" instead. I'm still a bit confused as to why it did not generate an error, but I'm happy to have resolved the issue.

IE misuses names and ids. In all other browsers (as far as I know), if you try to use a name for the id in getElementByID, it would generate an error. In IE, it doesn't - t accepts a name for an id. This obviously causes problems especially in a case like yours.

Image Source Not Changing in IE

re: Image Source Not Changing in IE

re: Image Source Not Changing in IE

re: Image Source Not Changing in IE

re: Image Source Not Changing in IE

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about