Ajax how to get function parameter, example .html(html)

Question

I get code from a website, something like (file name: index.php):

<html>
<body>

<div class="menu" title="example">Click here to change the content from a html file</div>
<div id="content"></div> 

<script>
$(".menu").click(function() {
    var page = $(this).attr("title");
    $.post("content.php", {"page": page}, function(html){ $("#content").html(html);});
  });
</script>

</body>
</html>

In "content.php":

<?php
ob_start();
include 'index.php';
ob_end_clean();

$page =  $_POST['page'];

$file = $page."html"; 
include($file); 

?>

It works fine for a simple $page."html" file. However, if I put some complicated JavaScript in $page."html", it does not work. I'm wondering why, how and what is .html(html)? I can't find any reference about passing parameter as html. What is "html" here?

check this, http://stackoverflow.com/questions/4619668/executing-script-inside-div-retrieved-by-ajax — Vishal Seth, May 05 '11 at 22:16

score 0 · Answer 1 · answered May 03 '11 at 04:17

0

It is just a variable, that contains the response for ajax post request.

answered May 03 '11 at 04:17

zerkms

249,484
69
436
539

score 0 · Answer 2 · answered May 03 '11 at 04:19

$(selector).html(html) is jQuery for

select the item that matches "selector"
set its inner html to the variable called html

In your example, the variable called html is the parameter passed back to the success function of your $.post call. So the $.post talks to the server, fetches the page, then loads the content into your div with id=content. So for more complicated pages, maybe you're not formatting the return properly. Do an alert(html) in that function for a really simple way to debug what html is being set to. Set a breakpoint in something like firebug or Chrome's developer console to dig deeper.

score 0 · Answer 3 · answered May 03 '11 at 04:21

0

function(html){ $("#content").html(html);}

part of the code assigns the content returned from call to your content.php into an existing element with ID set to "content". You can definitely load javascript functions into DOM or execute them as they get loaded to "content" div. What kind of error are you getting?

I'd advise putting an alert in your callback like:

function(html){ **alert(html);** $("#content").html(html);}

answered May 03 '11 at 04:21

Vishal Seth

4,948
7
26
28

If I copy past my $page.html code into
, it works fine. – wordpressquestion May 03 '11 at 04:47
Try using a debugger like Firebug or something similar. Not sure people might help much w/o seeing the code/html thats breaking it for you. – Vishal Seth May 03 '11 at 04:58

score 0 · Accepted Answer · answered May 03 '11 at 04:21

0

$.post("content.php", {"page": page}, function(html) { 
    $("#content").html(html);
});

html in function(html) is an arbitrary name for the output received from server. So, $("#content").html(html); is inserting into $('#content') that info.

answered May 03 '11 at 04:21

morgar

2,339
17
16

score 0 · Answer 5 · answered May 03 '11 at 04:27

0

is the response being reached properly? If you console.log(html) or alert(html), is it the content you're looking for?

Not sure if it makes any difference, but if you don't get the response, can you replace include($html) in your PHP with echo $html?

answered May 03 '11 at 04:27

Atticus

6,585
10
35
57

Yes, I replace my $page."html" file in
, it works fine. The alert(html) simply display whole file's code. – wordpressquestion May 03 '11 at 04:57

score 0 · Answer 6 · answered May 04 '11 at 04:38

Thank you answer! I understand part now:

function(html){ $("#content").html(html);}

the parameter "html" is not default. It is same as:

function(new_content){ $("#content").html(new_content);}
For complicated $page.".html", I simply change the code to:

$.get(page+'.html', function(new_page) {$('#content').html(new_page);});

It works fine. However I'm still puzzling, why I can't load complicated Javascript file by using:

$.post("content.php", {"page": page}, function(html){$("#content").html(html);});

What is exactly "complicated Javascript"? – morgar May 04 '11 at 04:44 — morgar, May 04 '11 at 04:44

score 0 · Answer 7 · answered May 04 '11 at 04:44

0

Just to explain .html(html)

maybe if it is written like this you can better understand.

.html('<p>Some returned html in here</p>')

the html inside the parentheses represent the returned html

answered May 04 '11 at 04:44

Ibu

42,752
13
76
103

Ajax how to get function parameter, example .html(html)

7 Answers7