JavaScript not reloading with jquery ajax form even if in $(document).ready

Question

I have this code for show more/less of my comment with toggle. It works great. However I have another form for adding comments and that form is using jQuery ajax. So after adding a form the script is not working. I have to reload the whole page to show it working correctly. In the source I see the script loaded. It is also in side the part that is reloading.

Maybe I should change ready to load?

EDIT: onload is not helping either ;(

<script>
    $(document).ready( function () {
        $(".comment p").each(function() {
            var val = $.trim(this.innerHTML);
            var parsed = val.split(/\s+/);
            var cut = parsed;

            // for each word
            for (var i = 0, k = 0; i < parsed.length; i++) {
                k += parsed[i].length + 1;

                if (k - 1 > 50) {
                    cut = parsed.slice(0, i);
                    break;
                }
            }

            // if one long word
            if (cut.length == 0) {
                cut.push(parsed[0].substring(0, 50));
            }

            val = cut.join(" ");

            // if the text is long enough to cut
            if (cut.length != parsed.length) {
                this.innerHTML = val.replace(/[.,;?!]$/, "")
                    + "<span>...</span> ";

                $("<span />")
                    .css("display", "none")
                    .html(parsed.slice(cut.length).join(" ") + " ")
                    .appendTo(this);

                $("<a />", {
                    href : "#",
                    text : "[show more]"
                }).on("click", function(e) {
                    var sh = this.innerHTML == "[show more]";
                    $(this).prev("span").toggle(sh).prev("span").toggle(!sh);
                    this.innerHTML = sh ? "[show less]" : "[show more]";
                    e.preventDefault();
                }).appendTo(this);
            } else {
                this.innerHTML = val;
            }
        });
    });
</script>

EDIT: My ajax call looks like this (I am using CodeIgniter):

$.ajax({
    url : "<?php echo site_url('comments/add'); ?>",
    type : 'POST',
    data : form_data,
    success : function(msg) {
        var pathname = window.location.pathname;
        $('.comments-tbl-div').load(pathname + ' .comments-tbl-div');
        $('#comment-form-part').html(msg);
    }
});

Luca Rainone · Accepted Answer · 2012-09-23 20:11:12Z

1

The problem is that the ready event is fired just one time (at load of document). The ajax engine fire the success event after ready document. So you should re-call your showMore engine.

First, put your code in a callable function

<script>
        function showMoreEngine($els) {
            $els.each(function() {
            var val = $.trim(this.innerHTML),
                parsed = val.split(/\s+/),
                cut = parsed;

            // for each word
            for (var i = 0, k = 0; i < parsed.length; i++) {
                k += parsed[i].length + 1;

                if (k - 1 > 50) {
                    cut = parsed.slice(0, i);
                    break;
                }
            }

            // if one long word
            if (cut.length == 0) {
                cut.push(parsed[0].substring(0, 50));
            }

            val = cut.join(" ");

            // if the text is long enough to cut
            if (cut.length != parsed.length) {
                this.innerHTML = val.replace(/[.,;?!]$/, "")
                    + "<span>...</span> ";

                $("<span />")
                    .css("display", "none")
                    .html(parsed.slice(cut.length).join(" ") + " ")
                    .appendTo(this);

                $("<a />", {
                    href : "#",
                    text : "[show more]"
                }).on("click", function(e) {
                    var sh = this.innerHTML == "[show more]";
                    $(this).prev("span").toggle(sh).prev("span").toggle(!sh);
                    this.innerHTML = sh ? "[show less]" : "[show more]";
                    e.preventDefault();
                }).appendTo(this);
            } else {
                this.innerHTML = val;
            }
        });
        }
</script>

call this function at ready event

   $(document).ready(function(e) { showMoreEngine($(".comment p"))});

and in your ajax engine

 $.ajax({
        url : "<?php echo site_url('comments/add'); ?>",
        type : 'POST',
        data : form_data,
        success : function(msg)
                  {
                        var pathname = window.location.pathname;
                        // added here a callback function
                        $('.comments-tbl-div').load(pathname + ' .comments-tbl-div',{},function() {showMoreEngine( $(this).find('.comment p') )});
                        $('#comment-form-part').html(msg);
                        showMoreEngine( $('#comment-form-part').find('.comment p') );
                    }
                });

I think that you can optimize the code... but this can be a point of start.

edited Sep 23, 2012 at 20:11

answered Sep 22, 2012 at 7:40

Luca Rainone

16.5k2 gold badges45 silver badges54 bronze badges

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

8 Comments

Derfder Over a year ago

Hmm, I tried it and I still need to reload the page. I think it has something to do with asynchronous behaviour of AJAX. So, I think I need to trigger showMoreEngine after $('.comments-tbl-div').load(pathname + ' .comments-tbl-div'); ...... Right now I think it is performing showMoreEngine before reloading the content, eventhough it is later in code. Can you suggest some techinque how to achieve this?

Luca Rainone Over a year ago

Yes i've note seen the div load sorry. I've not now the DOC. But you should see how call the function after your last ajax call

Luca Rainone Over a year ago

I don't understand your $('.comments-tbl-div').load(pathname + ' .comments-tbl-div');. This is not a url. What is this?

Derfder Over a year ago

It is part of a page that is reloaded, not the entire page.

Derfder Over a year ago

I think I woll start a bounty I need to solve this problem with not reloading when using ajax.

|

Collectives™ on Stack Overflow

JavaScript not reloading with jquery ajax form even if in $(document).ready

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related