Welcome Guest, Not a member yet? Register   Sign In
Non-Javascript Friendly Site
#1

[eluser]Narkboy[/eluser]
I'm building a e-commerce site for a client who dearly wants "web 2.0" (ironic quotes...) functionality. He mentioned Facebook... Anyway:

In order to work properly with users who don't have JS enabled, the entire site is built without javascript and works just fine. Now to add in the fun stuff - I'm using jQuery, jQuery UI and jQuery Tools.

I want to change some links on the fly so that js users get ajax functionality - for example, a non-js user clicks on 'show cart' and the cart page loads; while a js user click and gets the cart in an overlay.

Using rel="overlay" can direct js users to an ajax request, but if they request the same url as a non-js user they get the entire page, rather than just the relevent part. No point reloading the <head> etc. I can use jQuery to change the href only in a tags with an .ajax class.

Is it better to:

1)

http://www.example.com/shop/show_cart - loads the full page with cart details.
http://www.example.com/shop/ajax_show_cart - loads the cart snippet into an overlay.

The problem is that the js to rewrite these links is a pain. I don't want to work out how to do this for all possible controller / function pairs required.

2)

http://www.example.com/shop/show_cart - full page
http://www.example.com/shop/show_cart/ajax - ajax snip

Problem here is that I'll have to edit all controller functiuons that can deliver via ajax to check for the var. Also, if the function requires / permits additional vars to be passed, then the ajax var will probably have to go last.

3)

http://www.example.com/shop/show_cart - full page
http://www.example.com/ajax/shop/show_cart - ajax snip

This requires an entire new controller set for ajax functions.

4)

Something else?

How does everyone else provide ajax / rich functionality while preserving non-js useability?

Help!
#2

[eluser]skunkbad[/eluser]
[quote author="Narkboy" date="1290309045"]I'm building a e-commerce site for a client who dearly wants "web 2.0" (ironic quotes...) functionality. He mentioned Facebook... Anyway:

In order to work properly with users who don't have JS enabled, the entire site is built without javascript and works just fine. Now to add in the fun stuff - I'm using jQuery, jQuery UI and jQuery Tools.

I want to change some links on the fly so that js users get ajax functionality - for example, a non-js user clicks on 'show cart' and the cart page loads; while a js user click and gets the cart in an overlay.

Using rel="overlay" can direct js users to an ajax request, but if they request the same url as a non-js user they get the entire page, rather than just the relevent part. No point reloading the <head> etc. I can use jQuery to change the href only in a tags with an .ajax class.

Is it better to:

1)

http://www.example.com/shop/show_cart - loads the full page with cart details.
http://www.example.com/shop/ajax_show_cart - loads the cart snippet into an overlay.

The problem is that the js to rewrite these links is a pain. I don't want to work out how to do this for all possible controller / function pairs required.

2)

http://www.example.com/shop/show_cart - full page
http://www.example.com/shop/show_cart/ajax - ajax snip

Problem here is that I'll have to edit all controller functiuons that can deliver via ajax to check for the var. Also, if the function requires / permits additional vars to be passed, then the ajax var will probably have to go last.

3)

http://www.example.com/shop/show_cart - full page
http://www.example.com/ajax/shop/show_cart - ajax snip

This requires an entire new controller set for ajax functions.

4)

Something else?

How does everyone else provide ajax / rich functionality while preserving non-js useability?

Help![/quote]

If all you want to do is show the cart via ajax, then why not just pull in the content that would show with a non-javascript view? You can always style it differently if that'w what your after, but the content shouldn't be different, or is it?

Ya gotta love the people that want Facebook type interaction, but want to do it on a tight budget. I've got pretty good at sniffing these types out, and I'll usually give them a really expensive quote.
#3

[eluser]Joseph Wensley[/eluser]
Could you not just just do a post to the same with ajax=true or something like that and then just do

Code:
if($this->input->post('ajax') == true){
    //output partial page
}else{
    //output full page
}
#4

[eluser]Narkboy[/eluser]
skunkbad - I could....

But then the AJAX overlay would load in an entire page - <html>, <head>, the css again, the javascripts again, the logo, menu etc. All I want is the table that displays the actualy cart. About 10% of the full cart page.

Joseph - again, yes I could. But - in a non-javascript client, posting is a PITA unless the user clicks a button, and I don't want a form for every link. This is actually the same as option 2 in the original post, but using POST rather than GET. I may end up using this method...


And yes, hearing the word 'Facebook' did up the quote a little... Wink
#5

[eluser]Joseph Wensley[/eluser]
You don't need to post if the don't have JS. You would only be posting when you do the Ajax call to get the content for the overlay.

When someone without JS enabled clicks the link they would still go to the page and see the full thing.

You probably have to modify your controllers no matter what you do but this way would mean you could keep all the url segments the same, you just need to check for the post and wrap your code in a conditional.
#6

[eluser]Narkboy[/eluser]
[quote author="Joseph Wensley" date="1290312231"]You don't need to post if the don't have JS. You would only be posting when you do the Ajax call to get the content for the overlay.

When someone without JS enabled clicks the link they would still go to the page and see the full thing.

You probably have to modify your controllers no matter what you do but this way would mean you could keep all the url segments the same, you just need to check for the post and wrap your code in a conditional.[/quote]

Aye actually I see what you mean. I'll have a look at easy ways to modify the ajax links to post... Thanks!
#7

[eluser]dudeami0[/eluser]
Code:
function show_cart() {
   $ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
   if (!$ajax) {
      // Full page view
   } else {
      // Partial page view
   }
}

Might work for you Smile
#8

[eluser]Narkboy[/eluser]
[quote author="dudeami0" date="1290331324"]
Code:
function show_cart() {
   $ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
   if (!$ajax) {
      // Full page view
   } else {
      // Partial page view
   }
}

Might work for you Smile[/quote]

Oooooh - this is exactly what I was looking for! Broswer sends the request as AJAX if it can, PHP returns output based on the type of request! Perfect; simple, unobtrusive, invisible to the user. Everything can just work which is the goal Smile

Thanks!!!!
#9

[eluser]Coode[/eluser]
[quote author="Narkboy" date="1290354910"][quote author="dudeami0" date="1290331324"]
Code:
function show_cart() {
   $ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
   if (!$ajax) {
      // Full page view
   } else {
      // Partial page view
   }
}

Might work for you Smile[/quote]

Oooooh - this is exactly what I was looking for! Broswer sends the request as AJAX if it can, PHP returns output based on the type of request! Perfect; simple, unobtrusive, invisible to the user. Everything can just work which is the goal Smile

Thanks!!!![/quote]

In CI 2.0 you can use $this->input->is_ajax_request() instead of isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'
#10

[eluser]Narkboy[/eluser]
[quote author="Coode" date="1290770831"]
In CI 2.0 you can use $this->input->is_ajax_request() instead of isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'[/quote]

I've actually had to extend CI_Session in 2.0 to prevent AJAX calls from updating the session ID, so now I can just use
Code:
if ( IS_AJAX ) {
    ...
}
Which makes life very easy. I didn't realise that 2.0 had anything in the Input class about ajax - I'll check it out; it might mean I don't need the added constant defined!

Thanks!




Theme © iAndrew 2016 - Forum software by © MyBB