reload content via ajax

[ngrmm]

my ajax-reload leads into a 500 error (console)
am i missing something?

i just want to reload the random content of the the #data-div

template-markup:

if(!$config->ajax) {
	
	include("./inc/header.inc");
	
	echo "<a href='$page->url' class='button' >PRESS THE BUTTON</a>";
	
	echo "<section class='content' id='data'>";
		// some images
	echo "</section>";
	
	include("./inc/footer.inc");	 
}  

else {
	echo "<a href='$page->url' class='button' >PRESS THE BUTTON</a>";
	echo "<section class='content' id='data'>";
		// some images
	echo "</section>";
} 

and js:
 

$(".button").click(function() {
	
	$("#date").html("<p>Loading...</p>");
	
	$.get($(this).attr('href'), function(data) { 
		$("#data").html(data); 
	}); 
	
	return false; 

}); 

 

 

[Autofahrn]

Did you check your error log for a more comprehensive analysis?

Apart from the error:

$("#date").html("<p>Loading...</p>");

should probably refer to #data and your template code should probably only return the part "// some images", otherwise you'll nest a new section for each button click.

I case you intend to do more dynamic updates, returning a JSON instead of pure HTML may be an option:

 

[ngrmm]

thx

i had also another typo ?
no errors now.
but after clicking, the whole page is reloaded ☹️

[Autofahrn]

2 minutes ago, ngrmm said:

but after clicking, the whole page is reloaded

try:

$(".button").click(function(event) {
	event.preventDefault();	// No default action

 

[ngrmm]

i did, 500 error again!

send	@	jquery.js:2
ajax	@	jquery.js:2
w.(anonymous function)	@	jquery.js:2
(anonymous)	@	main.js:43
dispatch	@	jquery.js:2
y.handle	@	jquery.js:2

main.js:43

$.get($("this").attr('href'), function(data) { 

 

[Autofahrn]

Did you check the PW logs (Setup->Logs->Errors)? Error 500 happens on server side not inside your JS code.

[ngrmm]

yeah! thx @Autofahrn

my mistake. i had a variable defined in my header.inc which was missing!

[Autofahrn]

Wondering if its not just:

$.get(this.attr('href'), function(data) { 

 

[ngrmm]

4 hours ago, Autofahrn said:

Wondering if its not just:

$.get(this.attr('href'), function(data) { 

  

don't think so.

i have a follow up question. i get data as a whole. is there a way to get the content of specific fields. like data->divWithClassX?
i want to update the content of two different divs on the page.

do i have to that with the json-method?

[Autofahrn]

ok, somehow mixed up that this.attr, doesn't work...

To access individual fields and don't want to use JSON (any reason for that), you may inject that into your DOM tree and access relative to the parent element. That way you:

- combine discrete information into some markup
- deal with proper escapement of special chars etc.
- send that markup to client
- client needs to parse markup to retrieve discrete information (and decode handling of special chars)

Using the JSON version is much more straight forward, scalable and takes care of most aspects of proper data escapement.

[ngrmm]

6 minutes ago, Autofahrn said:

ok, somehow mixed up that this.attr, doesn't work...

To access individual fields and don't want to use JSON (any reason for that), you may inject that into your DOM tree and access relative to the parent element. That way you:

- combine discrete information into some markup
- deal with proper escapement of special chars etc.
- send that markup to client
- client needs to parse markup to retrieve discrete information (and decode handling of special chars)

Using the JSON version is much more straight forward, scalable and takes care of most aspects of proper data escapement.

reason is my shitty javascript skills. i'll give it a try ?

[ngrmm]

hmmm...was easier than i thought

however, if someone wants to do it:
here is a good how-to by Ryan:

@Autofahrn you were right. makes more sense by json. it's also way faster ?