CODEWITHSUNDEEP
javascriptjqueryajax
The UndertakerGL
The UndertakerGL

Reputation: 75

Showing data from Ajax response

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?

Upvotes: 0

Views: 111

Answers (4)

Shubham Jain
Shubham Jain

Reputation: 930

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>");
}

Upvotes: 1

Parag Jadhav
Parag Jadhav

Reputation: 1899

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!");

Upvotes: 2

6Aashis
6Aashis

Reputation: 306

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>

`

Upvotes: 0

St&#233;phane Ammar
St&#233;phane Ammar

Reputation: 1454

Your success function should be :

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

Upvotes: 3

Related Questions