[Solved] assigning a javascript value to Smarty?

[JohnnyB]

Has anyone tried assigning a javascript variable's value to smarty using ajax or something similar?

For example, if I need to test the browser's viewport width using JS, can I somehow assign the result (a number) to a Smarty var using an ajaxy request from a _GET or something?

I realize that assigning a JS var directly to Smarty is not possible because JS is client-side. But I thought using ajax might be a work around - thoughts?

[velden]

Via ajax would be easy but how would that be helpful?
Page is already loaded at least partially.

[JohnnyB]

Well, I'm thinking about hiding something from the viewport for smaller screens, but not exclusive to mobile. Otherwise I would just test for the device type. So, if I can test the viewport width, then assign it to smarty, I can do something like,
{if $viewport > 1024} ... {/if}

I might not be able to reset the smarty var as the user resizes the viewport but I can at least get an initial value.

[calguy1000]

typically this is done by using a session cookie.

a landing page sets the cookie via javascript, then you can read the cookie in PHP/smarty on subsequent pages.

If the cookie doesn't exist, redirect to the landing page.

[JohnnyB]

typically this is done by using a session cookie

Perfect! I've done something similar before and forgot - thanks!

[JohnnyB]

Solved but not really solved.
Setting a cookie via JS and reading the cookie with Smarty works well. But, not when the user visits for the first time, on the first load because smarty can't read the cookie until after the template is parsed again (page reload). The value is empty until smarty parses again.

I could immediately force a header refresh is the Smarty var is empty so that it can read the cookie value set by JS when the page reloads. But that would be a bad user experience, I think.

So, I guess I'm back to seeing if there is a doable ajax method of posting the cookie value set by JS to PHP (maybe a UDT) so I can assign it to a smarty var. I have my doubts that it is possible.

Why can't we just have some kind of viewport detection with PHP!? ugh

[calguy1000]

I did some googling... and there is no good way of doing this.

Because viewport size can change (users can resize windows), but for smaller screens (tablets, mobiles), you may want to have limited display so that you can improve performance and limit database queries etc).

the best method is probably some kind of UserAgent based detection for a default value, then a cookie mechanism to remember it.

i.e (pseudocode)
browser type = desktop
if( cookie does not exist )
if( user agent says browser is mobile ) {
/* cgextensions has this builtin */
set cookie to mobile
browser type = mobile
}
if( user agent says browser is tablet ) {
set cookie to tablet
browser type = tablet
}
}
else {
browser type = cookie value
}

Now you have a variable that has 3 states that you can use in your templates.
if your templates get overly complex because of this variable you may want to consider redirecting to a mobile friendly version of the page.

[JohnnyB]

Yep. I think I'll just have to be happy with device detection alone.
The main goal is not loading resources that won't be used because they are not small screen friendly. So, that will accomplish the goal, but since there are some mobile devices with a 1024px orientation, I was hoping to not exclude them. Ah well...
Thanks!

[calguy1000]

Have you checked out deviceAtlas ? that's the service I use for CGSmartImage (that along with caching to minimze requests).

it returns a 'resolution' for anything that it identifies as a mobile device.... may fug up with funky browsers on android though (really haven't tested).

[JohnnyB]

Have you checked out deviceAtlas

Heard of it and checked it before but never used it because the non-commercial version is a bit out dated now I think.
It might be worth using if the thing I was trying to do was a dealer breaker.

hmm, although, I suppose I could do some device detection logic to allow some of the popular tablets using a 1024px orientation to see the full content. Just found, http://viewportsizes.com/

Thanks again!!

[calguy1000]

I dunno if deviceAtlas is out of date...
I just tested with my android phone running chrome, it successfully found my resolution at 800x480.

[velden]

...
So, I guess I'm back to seeing if there is a doable ajax method of posting the cookie value set by JS to PHP (maybe a UDT) so I can assign it to a smarty var. I have my doubts that it is possible.

You COULD choose to not include the optional parts of the webpage and use js and ajax to load them dynamically only if the viewport has the desired, minimum width.

Then you can even check for resizes of the viewport and dynamically hide/show(load) those parts.

Not sure if that's a reliable method though.

[JohnnyB]

You COULD choose to not include the optional parts of the webpage and use js and ajax to load them dynamically only if the viewport has the desired, minimum width.

Ah, right. That would be a better approach. Thanks!