CODEWITHSUNDEEP
phpjqueryajax
Jen Mason
Jen Mason

Reputation: 144

jquery ajax function not posting back to div

I have: support_question.php

$('#topic').on('change', function() {  
    var sel = $(this).find('option:selected').val();
    $.ajax({
        url: "support_process.php",
        type: "POST",
        data: {info : sel},
        success: function(data) {
            alert(data);
            $( "#divtopic" ).data("topic", sel);
        }
    });
});

And further down...

In support_process.php, I have:

<?php
   echo $_POST['info'];
?>

I'm wondering why my "divtopic" div isn't being filled with the $_POST information.

Upvotes: 0

Views: 158

Answers (2)

Eddie Monge Jr
Eddie Monge Jr

Reputation: 12730

If that really is the response the whole php file, then this should work 

$('#topic').on('change', function() {
  $.post(
    'support_process.php',
    {info : this.value},
    function(data) {
      console.log(data);
      $("#divtopic").html(data);
    },
    'html'
  );
});

as @nnnnnn said, you need to add something that actually display the information to the user like .html().

Also, don't use alert to debug. Use console instead as alert can interrupt things and cause headaches whereas console is more reliable and is built for debugging.

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150080

The .data() method doesn't set text for the user to see. Use:

$( "#divtopic" ).text(data);

or if your response includes markup:

$( "#divtopic" ).html(data);

As an aside, you can get the current value of the dropdown with (as Eddie Monge Jr quite rightly points out), this.value. (Or more generally if you don't already have a reference to the element use $("someSelector").val() - either way there's no need to use .find('option:selected').)

Further reading:

Upvotes: 5

Related Questions