PHP AJAX JQUERY load page

Question

I'm using the code below to load the results from a database query in a PHP page:

<a href="results.php?item=itemId">click me</a>

$('.item > a').click(function(){
    var url = $(this).attr('href');
    $('.item-popup').fadeIn('slow');
    $('.item-content').load(url);
    return false; 
});

All works fine right now, but the next bit of functionality is a problem. Inside results.php which ajax loads into .item-content, I have another link that is supposed to update and increment click counts for that link, also without refreshing. The functional PHP bits all work fine. My only problem is the jQuery/AJAX aspect of things.

Maybe I'm going about it the wrong way, but what I really want to do is have a page with a container that loads the result of of a database query from a PHP page, but also in that container, I have a link/button whose click count I want to be able to save and update all without refreshing.

EDIT I guess the most important question I need answering is: When the ajax on index.php loads the content of results.php into the container in index.php, do browsers treat the newly loaded ajax content as part of the parent page (index.php) or is it still treated as a different page loaded into the container like an iFrame?

What is the problem? The click count on the recently ajax loaded content doesn't work? Where is the javascript code handling this fonctionnality? Is it loaded with the ajax content? — Maresh
– Maresh, Commented Jun 14, 2013 at 12:13
Ajax loaded content have another ajax request? Then use api.jquery.com/live — Sibiraj PR
– Sibiraj PR, Commented Jun 14, 2013 at 12:15
@Maresh, You very well understand my struggle. The php function behind the click count on the recently ajax loaded content works, but clicking on it takes me to another page as the ajax for that particular function is in the parent page where the ajax loaded container is; and not loaded with the ajax. If you are suggesting that loading the ajax for the click count with the ajax content will solve my problem... I'll try that now. Thanks. — echez
– echez, Commented Jun 14, 2013 at 13:31
@SibirajPR instead of using .live you should be using the $("baseElement").on("click", ".specificElement", function() {}); function. — David Sherret
– David Sherret, Commented Jun 14, 2013 at 13:42

Kautil · Accepted Answer · 2013-06-14 12:14:18Z

1

If say for example it is click event then you need to write

$('input element').on('click',function() {
     // write code over here
})

answered Jun 14, 2013 at 12:14

Kautil

1,3319 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nil'z · Accepted Answer · 2013-06-14 13:24:43Z

Dont know for sure if you want this, When returning the data in the load function you will have to add a link like this in the resultant HTML which will be clickable:

   <a href="javascript:void(0);" class"clickable" data-id="<?=$id?>" data-counter="0"></a>

Now in javascript you need to catch the click event of the link like this:

   <script type="text/javascript">
    $(function(){
       $(".item-content").on("click", ".clickable", function(){
            var counter = $(this).data('counter');
            var id      = $(this).data('id');
            $.ajax({
               url      : //your url here,
               data     : {'id' : id, 'counter' : counter },
               type     : 'POST',
               success  : function(resp){
                    //update the counter of the current link
                    $(this).data('counter', parseInt( $(this).data('counter') )+1 );
                    //whatever here on successfull calling of ajax request
               },
               error    : function(resp){

               }
            });
       });     
    });
    </script>

Collectives™ on Stack Overflow

PHP AJAX JQUERY load page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related