Loading content in page via jQuery - codeigniter

Question

I have two views main.php and details.php. In main.php there are numerous content and under each content there is a "view more" button. If somebody clicks view more an ajax call will dynamically load rest of the content from details.php which will fetch the data from database w.r.t the ID of the content. And it's a list style view in details.php. In the header of main.php my main script file contains this code snippet to fetch data from details.php -

$('.view_more').click(function(e) {
  $.ajax({
  type: 'POST',
  url: '/path/to/my/controller/method',
  dataType: 'html',
  success: function (html) {
   $('#details_container').html(html);
  }
});
});

Data is loading perfectly. But the problem is there is a add content button in details.php along with each content which has been loaded dynamically is not working. The content adding script is in my main.js added in main.php. But I have to add this particular jquery code snippet of adding the content in details.php, otherwise it's not working. So, whenever view more is being clicked it is returning html data along with a ....code for adding the content.... stick with it. Which is not at all desired.

How to solve this issue? Please help. Thanks in advance.

Here is the code of adding the content.

<script type="text/javascript">
$('.add_this').click(function(){

      var t = jQuery(this);
  var id_add = t.attr("id");
  var content_category_id = t.attr("rel");
  var add_content_id = id_add.substring(id_add.indexOf('_')+1);
  var content_creator_id = t.attr("data-clip-id");

  $.ajax({
            type: "POST",
            url: "/path/to/my/controller/method",
            data: add_content_id,
            cache: false,
            success: function(response){
                if(response)
                {
                    $("#"+id_clip).text("Clipped");
                }
            }
        });
        });
      </script>

I want to add again I am able to add the contents but to do so I have to embed this code snippet in details.php that I dont want to do. I need torun from my main script file.

Show us the click function for add_content so that we may assist you properly. — Ohgodwhy
– Ohgodwhy, Commented Apr 20, 2014 at 16:12
use $(document).on('click','.add_this',function(){ //Your code }); instead of $('.add_this').click(function(){}) — K K
– K K, Commented Apr 20, 2014 at 16:19
I would give you a sincere suggestion.Please do not create the whole html template on the php page.Use it to just return JSON objects.Use your jquery to put them onto the html document. — Tyranicangel
– Tyranicangel, Commented Apr 20, 2014 at 16:23
Okay @Tyranicangel I will consider your valuable advice. But I am not quite a pro on this. How JSON can be used. Can you give an example or any link how I can fetch data from database make JSON encoded and put it in jquery to fill it.Thank you. — user3177114
– user3177114, Commented Apr 20, 2014 at 16:27

K K · Accepted Answer · 2014-04-20 16:21:09Z

1

This should work:

$(document).on('click','.add_this',function(){
  var t = jQuery(this);
  var id_add = t.attr("id");
  var content_category_id = t.attr("rel");
  var add_content_id = id_add.substring(id_add.indexOf('_')+1);
  var content_creator_id = t.attr("data-clip-id");

  $.ajax({
        type: "POST",
        url: "/path/to/my/controller/method",
        data: add_content_id,
        cache: false,
        success: function(response){
            if(response)
            {
                $("#"+id_clip).text("Clipped");
            }
        }
    });
    });

answered Apr 20, 2014 at 16:21

K K

18.2k4 gold badges33 silver badges39 bronze badges

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

3 Comments

user3177114 Over a year ago

Thank you @Kamlesh. Can you please describe the technical part why $(document).on(click) worked ???

K K Over a year ago

The $(selector).click(function(){}) works for the static pages and content. So if you are sure that your content will not change then you can follow this approach. But if you have dynamic content then you need to follow this way: $(parent).on('event','selector',function()) This is introduced in the latest jQuery update and version. Also "live" is replaced with "on" . You can refer jQuery documentation.

K K Over a year ago

@user3177114 you can mark it as answer if it answers your question.

Collectives™ on Stack Overflow

Loading content in page via jQuery - codeigniter

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related