Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #12584 > unrolled thread

AJAX loading entire page into div

Back to article view | Back to comp.lang.javascript

Contents

  AJAX loading entire page into div Scott Johnson <noonehome@chalupasworld.com> - 2012-03-10 15:32 -0800
    Re: AJAX loading entire page into div Scott Johnson <noonehome@chalupasworld.com> - 2012-03-10 15:42 -0800

#12584 — AJAX loading entire page into div

I have used ajax with success before but am having an issue I can't 
track down.

I will try to make sense of this.

I have a pull down menu and when the user chooses an item it is suppose 
to load the image into a div place holder.

I have tested it with passed value and it works so I know I am targeting 
the right div and it displays the ID

function display(option) {

var optionId = option.value

var xmlhttp = createXMLHttpRequest()

  xmlhttp.onreadystatechange=function() {
   if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("emblem_image").innerHTML=optionId;
 
//document.getElementById("emblem_image").innerHTML=xmlhttp.responseText;
   }
  }
.......


}
......
But when I add the open() method it gets all buggered up
......

xmlhttp.open("GET","/php_inc/ajax_functions.php?mode=display_emblem&id=" 
. id,true);
xmlhttp.send();

the php page creates a simple image
....
$output = "<img src='/emblem_images/{$emblem['EmblemImage']}' 
width='300px' />";
echo $output;

When I run the page directly in the browser, i get the image displayed.

http://example.com/php_inc/ajax_functions.php?mode=display_emblem&id=1

Which tells me the php code is outputting correctly.

But when it loads into the:

document.getElementById("emblem_image").innerHTML=xmlhttp.responseText;

I get a copy of the entire original html page loaded.

Heeeeelp!

[toc] | [next] | [standalone]

#12585

On 3/10/2012 3:32 PM, Scott Johnson wrote:
> I have used ajax with success before but am having an issue I can't
> track down.
>
> I will try to make sense of this.
>
> I have a pull down menu and when the user chooses an item it is suppose
> to load the image into a div place holder.
>
> I have tested it with passed value and it works so I know I am targeting
> the right div and it displays the ID
>
> function display(option) {
>
> var optionId = option.value
>
> var xmlhttp = createXMLHttpRequest()
>
> xmlhttp.onreadystatechange=function() {
> if (xmlhttp.readyState==4 && xmlhttp.status==200) {
> document.getElementById("emblem_image").innerHTML=optionId;
>
> //document.getElementById("emblem_image").innerHTML=xmlhttp.responseText;
> }
> }
> .......
>
>
> }
> ......
> But when I add the open() method it gets all buggered up
> ......
>
> xmlhttp.open("GET","/php_inc/ajax_functions.php?mode=display_emblem&id="
> . id,true);
> xmlhttp.send();
>
> the php page creates a simple image
> ....
> $output = "<img src='/emblem_images/{$emblem['EmblemImage']}'
> width='300px' />";
> echo $output;
>
> When I run the page directly in the browser, i get the image displayed.
>
> http://example.com/php_inc/ajax_functions.php?mode=display_emblem&id=1
>
> Which tells me the php code is outputting correctly.
>
> But when it loads into the:
>
> document.getElementById("emblem_image").innerHTML=xmlhttp.responseText;
>
> I get a copy of the entire original html page loaded.
>
> Heeeeelp!
>
>
>
>
>
>
  OMG found the problem.

....lay_emblem&id=" . id,true);

Should be

....lay_emblem&id=" + id,true);

The problem switching back and forth between JS and PHP  sheesh.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web