loading field content with ajax

[lecrackffm]

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.

[LostKobrakai]

You cannot access php files inside the site folder. You'd need to use the url of your settings template page. 

[lecrackffm]

Thanks @LostKobrakai. 

That solved my problem. I got it working with jquery now. 

My js above is giving me a "Uncaught SyntaxError: Unexpected end of JSON input" ....

 

[shogun]

On 2/4/2017 at 5:21 PM, LostKobrakai said:

You cannot access php files inside the site folder. You'd need to use the url of your settings template page. 

What would that url be??

[kongondo]

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"

 

[shogun]

Strange it worked after adding a trailing slash to the end of the URL. Simple thing like that took hours to figure out 

[froot]

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?

[shogun]

I wonder if you actually have permissions to those folders. Maybe worth checking that first to be sure. I've had so many issues with read write server permissions on various folders multiple times over. 

[froot]

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?

[froot]

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