Showing data from Ajax response

Question

I am trying to display my ajax response in a div, but I have no idea how to do that.

My code is the following:

<div class="divright">
   Div Content
</div>


< script >
  $(document).on("click", '.tribe-mini-calendar-day-link', function() {
    var date = $(this).data('day');
    $.ajax({

      type: "POST",
      url: TribeMiniCalendar.ajaxurl,
      data: {
        action: 'event_details',
        date: date
      },
      success: function(response) {
        console.log(response)
      },
      error: function(request, error) {
        alert("FOUT:" + error);
      }
    })
  })
</script>

If you click on .tribe-mini-calendar-day-link , the console says the following:

`{status: true, html: "<p><strong>Pratice: </strong> 2017-09-23 till 2017-09-24</p>"}`

Now my question is, how do I display that code in the divright ?

Answer 1

Your success function should be :

success: function (response) {
   if(response !== undefined && response.html !== undefined) {
      $(".divright").html(response.html);
   }
},

Answer 2

In success section of AJAX request, assuming you are parsing response right way.

var data = response.html;
if(data !== undefined)
    $(".divright").html(data);
else
    $(".divright").html("Error!");

Answer 3

Inside your success function you need to append html to the div. This can be done very easily using jquery as

if(response !== undefined && response.html !== undefined){
    $( ".divright" ).html(response.html);
}
else{
    $( ".divright" ).html("<div>Some Error Encountered</div>");
}

Answer 4

You should use Jquery .html response to update data in your div tag . such as $("#your_DIV_ID").html( data);

Here is your your complete code. `

<div id="my_Div_ID" class="divright"> Div Content </div>
    <script>
        $(document).on("click", '.tribe-mini-calendar-day-link', function() {
            var date = $(this).data('day');
            $.ajax({
                type: "POST",
                url: TribeMiniCalendar.ajaxurl,
                data: {
                    action: 'event_details',
                    date: date
                },
                success: function(response) {
                    $("#my_Div_ID").html(response);
                    console.log(response)
                },
                error: function(request, error) {
                    alert("FOUT:" + error);
                }
            })
        })
    </script>

`