help AJAX

[frankz]

I saw that in chapter ruoting engine the user guide I just found these 2 lines
$ F3-> route ( 'GET / example [ajax]', 'Page-> getFragment');
$ F3-> route ( 'GET / example [sync]', 'Page-> getFull');
concerning the use of ajax.
There is someone, who kindly I can make a small tutorial or example.
The page where I should use ajax is similar master detail, where the detail is in different tabs.
On the Internet I found something of how ajax, but using only one variable, while I would need to provide the client with different variables taken from various database tables.

[ved]

Hi,

Those [sync] and [ajax] tags on route declarations are just there if you want to have 1 route serve different content depending if it's ajax or not by routing them directly to different methods. You can still use $f3->get('AJAX') to determine if it's an ajax request or not pretty much anywhere. You don't have to use those tags to use ajax unless you really want the functionality that example provides. It's pretty common to have a route that's just called using ajax so in those cases you don't need to use the tags.

Your issue seems to be with understanding ajax requests in the first place so I would suggest you start with learning how to do ajax requests on javascript (like jquery for example). Try: https://learn.jquery.com/ajax/

To use multiple variables one way of doing it is to use post on your ajax requests and then use f3 as if you were dealing with a form.

Cheers

[frankz]

I conceptually I understand how it works.
What I do not understand is the code that I have to enter in the "Page-> getFragment" method.
For example if "getFull" is the full page and contains the html code div1, div2, div3, DIV4, div5 and div6 when an event I request the server to update the text input of div3,4, 5 hatching should I enter in getFragment?
Full div or only the variables type F3-> st (name, value).

[ikkez]

well that depends. if you have data binding on the client side frontend, such as with using angular.js or any similar framework, then you probably only need to return the variables to update. otherwise, if you maybe just use jQuery.load then you need to render the full div container with its html and everything ready to be replaced in that getFragment function and send it to the browser.

[ved]

As ikkez stated depends on what you're running client side.

If jquery, you can return the rendered <div> or whatever with f3 and then call $('#mydiv3id').html(AJAXRESULT); in jquery.

Since you seem to want to update several div's maybe it's best to have f3 return a json object like:

{"div1": "html for div1", "div2": "html for div2"}

And then in jquery call something like:

$('#mydiv1id').html(ajaxresult.div1);
$('#mydiv2id').html(ajaxresult.div2);

[Anatol]

I agree with ved, only a little addition to help you getting started:

you can use the success function from jquery ajax and $.each to loop/build your divs from your json return:

find here a little fiddle which illtustrates this.

http://jsfiddle.net/L6oqq871/2/

  $.ajax({

    type: 'POST',

    dataType: 'json',

    url: '/echo/json/', // your route

    data : { json: JSON.stringify( jsonData ) },

    success: function(data) {

      // loop through the results

      $.each(jsonData, function(i, item) {

      $('#divholder').append('<div>'+item+'</div>')

    });

    }  

  });