Jump to content

loading field content with ajax


lecrackffm
 Share

Recommended Posts

Hello, 

since hours i am struggeling to get an ajax call to an page field working. i think im doing something fundamentally wrong.

The Idea is to load some html markup for larger screen sizes.

If i put a .php file with the markup outside the 'site' folder it works fine with a basic XMLHttpRequest.

But if i want to have the markup stored in a textfield on my 'settings page' within the template folder i have no success.

I tried to follow some tips from this thread as well:

my settings.php looks like this:

 

<?php
if($config->ajax) {
    $json = array(
        'id' => $page->id,
        'title' => $page->title, 
        'markup' => $page->markup
        ); 
    echo json_encode($json);
    return;
}

and my inline javascript like this  ( wrapped in enquire.js):

<script type="text/javascript">
enquire.register('screen and (min-width: 700px)', {

	match: function() {

			var xhr = new XMLHttpRequest();
			
			xhr.onload = function(){
				if(xhr.status === 200){

					data = JSON.parse(xhr.responseText);

					document.getElementById('hero').innerHTML = data.markup;

				} 
			}

			xhr.open('GET', 'settings.php', true);
			xhr.send(null);
	},



	unmatch: function() {
	}

});

</script>

<section id="hero">
</section>

Like this, i am just getting a 404 , and if i try with a path i get a 403 forbidden.

Im entirely confused, maybe someone can help.

Thanks a lot.

Link to comment
Share on other sites

  • 3 years later...
14 hours ago, shogun said:

What would that url be??

URL to any viewable page outside your admin:

// same page
const url = "./"
// another page - relative path
const url = "/parent/child/settings-page"
// another page - full path
const url = "www.mysite.com/some/viewable/page"

 

Link to comment
Share on other sites

  • 3 months later...

I have a related question I believe. I had a AJAX working fine, the markup of which is pretty much identical to what is initially loaded normally – except for the variables's values of course – and the AJAX loaded content replaces that. The php file that is loaded via AJAX sits in the folder above /site/. Now I started to use default images for the images fields and it doesn't work anymore. Default image, just to clarify, I set by creating a dummy page with the same template with the same image field. This works for the normally loaded content, but the AJAX call seems to fail to call functions like size() on the images:

Call to a member function size() on bool

When I remove the size()-function, the image is there, just not cropped. And also it fails to access the default value for the image fields.

Forbidden
You don't have permission to access the/path/to/site/assets/files/1234/

Any ideas?

Link to comment
Share on other sites

it's working fine. even got the cropping work now. There's no access problem to the real images, just cannot access the default images.

I could save the default images in another folder on root level, crop them without the API etc. but I'm not sure this is the easiest way.

Any ideas?

Link to comment
Share on other sites

OK I got it working now, a little workaround made it happen it's acceptable…

if (count($item->images) > 0) : 
    $output .= '<img src="'.$item->images->first->size(450, 250, $options)->url.'"/>';
else :
    $defaultID = $fields->images->defaultValuePage;
    $output .= '<img src="'.$pages->get("id=$defaultID")->images->first->size(450, 250, $options)->url.'"/>';
endif;

Also needed to be careful about the if conditions to avoid having ->size() be called on a NULL object.

Hope this helps someone in the future…

cheers

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...