使用树枝重构Ajax

Question

I'm trying to refactor a chained ajax call (way too chained) for a simpler way separating HTML, PHP and js using twig. i have something like:

  $.ajax({
    type: "GET",
    dataType: "json", 
    url: "{{ urlsf }}",// THIS WILL LOAD SOME DATA
    success: function (response) {
      $.ajax({
         type: "POST",
         data: { per: response } ,
         url: 'renderPage.php',
         success: function (cont_contador) {
           $('#main_content').html(cont_contador);
         }//end of success
      });//end of ajax for render call
    }//end of success
  });//end of ajax that loads data

This same success->ajax call is repeated several times, but i think one is enough to make my point. The renderPage.php renders another file which had one js/jquery function and one div which uses the twig function, PLUS setting the response as a twig variable passing it to the render array.

I moved the to the main library and the to the main HTML structure (which has twig) while handling the load with my controller.

Now, this is where I'm having these troubles: I can't move the response to twig using javascript. I can't replace the twig with the javascript response var because this twig variable is being used in other places of the code. I don't want to keep the ajax call, in fact, I want to delete it to keep only the json call.

---

edit

I'll try to make a schema of what I'm looking for:

• main controller: loads php connections, sets security, sets main twig variables and renders the main template
• main template: loads CSS and js libraries including jquery and main js custom functions among those, contains HTML and twig block main structures using includes. Invokes the. ready
• js functions: contains the events and functions associated with the HTML

Actually there is a function triggered by one event that makes calls to API, returns data, then renders one part that triggers another event that renders another part, then triggers another ... which can be all triggered/loaded in one go, but at one of this renders it saves one twig variable used in other parts of the web. I want to have that twig variable started in some different way.

Answer 1

For future reference, a small explanation of Twig:

Twig is a template processor. A template processor generates a HTML file from another file that contains HTML with added features such as:

• variables and functions
• text replacement
• file inclusion (or transclusion)
• conditional evaluation and loops

This process happens on the server side. The client side only gets a HTML result. Client side languages, such as JS, can change this HTML directly but not the unrendered variables or loops. This is because JS never sees this logic.

With AJAX however you can still make server side code run. I would advise to initially set your twig variables with a value in your database. Whenever you change this record in you db, all templates will be updated.