Error rendering with jQuery Ajax

Question

Error rendering with jQuery Ajax

Navigation

#1 by (1 votes)

3

Quick information on how this code should work: Ajax takes an html, compiles with Handlebars, the same ajax takes a json from an api, packages everything and renders an index with an append.

var orderTemplate takes a template from index.hbs
var temp compiles the orderTemplate to be rendered in index.hbs
function addOrder (order) makes a append template within index.hbs

In theory, the Ajax request should take the function addOrder (order) and insert it in the index.hbs along with the json Ajax url (url: '/ api') also catches. But on the screen only the Append of the template appears, without the content inside.

Below the code inside main.js:

var orderTemplate = $('#template-html').html();

var temp = Handlebars.compile(orderTemplate); 

function addOrder(order) {
    $orders.append(temp(order));    
}

$.ajax({
    type: 'GET',
    url: '/api',
    success: function(orders){
        $.each(orders, function(i, order){
            addOrder(order);
        });
    },
    error: function(){
        alert('Erro ao listar :(');
    }
});

Below is the template, that the var orderTemplate = $ ('# template-html'). html (); paste via id. I use Handlebars to render.

<script  type="text/x-handlebars-template" id="template-html">
   <div id='conteudo' class='row' data-id='{{_id}}'>
   <h4><span class="noedit nome">{{nome}}</span></h4>
   <p><span class="noedit nome">{{bebida}}</span></p>
   </div> 
</script>

Below the Append photo. Note: Ajax can get the content searched by the api and play in index.hbs, but can not print on the screen.

Belowisapictureofhowthefinalresultshouldbe!

Thank you very much for who you read and tried to help. I've done my best to enter as much detail as possible.

php javascript html jquery ajax

asked by anonymous 19.05.2018 / 05:33

1 answer

Request arrives null in C # WinForms application stops working if the computer goes into hibernation

score 1 · Accepted Answer

It was supposed to be working. Is there no error in the console? Is the addOrder function really being called? If you inspect the #orders element you have nothing? It seems like crossbow questions, but sometimes a detail goes unnoticed.

I made a simple example and it worked, right below:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script><style>#conteudo{max-width:250px;padding:20px;border:1pxsolid;margin:30px;}</style><!--DIVPROAPPEND--><divid="order"></div>

<!-- HTML HANDLEBARS -->
<script  type="text/x-handlebars-template" id="template-html">
   <div id='conteudo' class='row' data-id='{{_id}}'>
   <h4><span class="noedit nome">{{nome}}</span></h4>
   <p><span class="noedit nome">{{bebida}}</span></p>
   </div>
</script>

<!-- SCRIPT "GET" E RENDERIZA -->
<script>

  var json = [{
      nome: 'Nome 1',
      bebida: 'Bebida 1',
      _id: '1'
  },
  {
      nome: 'Nome 2',
      bebida: 'Bebida 2',
      _id: '2'
  }
  ];

  var orderTemplate = $('#template-html').html();

  var temp = Handlebars.compile(orderTemplate);

  var $orders = jQuery('#order');

  function addOrder(order) {
  $orders.append(temp(order));
  }

  $.each(json, function(i, order) {
  addOrder(order);
  });

</script>