CODEWITHSUNDEEP
phpjqueryajax
PugsOverDrugs
PugsOverDrugs

Reputation: 535

I want to use AJAX to dynamically generate layout based on the ID of a link clicked

I am attempting to use AJAX to generate PHP to be displayed inside of a div based on the ID of the link clicked. (I haven't dealt with HTML formatting yet, just want to figure this out first)

My Code:

    <script type="text/javascript">
    jQuery(document).ready(function() 
    {
        $(".myClass h3").click(function(){  

            var clickID = $(this).attr('id'); //For sake of argument lets say id = 1.

            $.ajax({                                                          
                  url: 'landingPage.php',                  
                  data: {ProductIDNumber: clickID}, 
                          success: function(html) {
                      $('#container').append(html); 
                  }
                });
        });
    });
</script>

I have dealt with getting the PHP to run when the url is landingPage.php?ProductIDNumber=1 and that all works properly, I just don't quite grasp how to return the resultant HTML.

Edits made and commented on.

Upvotes: 1

Views: 104

Answers (2)

Chris Brown
Chris Brown

Reputation: 4635

You need to include success, which is run once the response is received, similar to;

<script type="text/javascript">
jQuery(document).ready(function() 
{
    $(".myClass h3").click(function(){  

        var clickID = $(this).attr('id'); //For sake of argument lets say id = 1.

        $.ajax({                                                          
            url: 'landingPage.php',
            data: {
                ProductIDNumber : clickID
            },
            success: function(html) {
                 // Do what you need to here with 'html'
                 $('#container').append(html);   
            }                 
        });
});
</script>

As Alvaro said the structure of the data was also incorrect

Here's a link to the jQuery docs where you can find out more about the parameters and options you have (such as handling fails etc)

Upvotes: 3

Alvaro Hernandorena
Alvaro Hernandorena

Reputation: 610

the data is wrong,

it is like this:

data: {varname: value, varname1: value},

Upvotes: 1

Related Questions