Javascript file not working after ajax call

Question

I am using a pagination script. I got it from a template. It has search option plus show items like 5,10,15,20 and and and prev button. Script is working nicely but when i use ajax and refresh that table part using

$(#tablerefresh).html(data)

then just a table is show with no search options, no next previous options nothing just all rows show.

 <script type='text/javascript' src='../../js/plugins/Table/Table.js'></script>

thats the script file. I placed this inside the calling php page but nothings work. I will post the code if you want to see the script code.any suggestions?

In sucess function else part runs when updating occurs:

            else
            {
                // Dropdown start option.
                $('select').val(0);

                // Clear fields data. (text).
                $('form :input[type=text]').attr('value','');

                // Password error hide.
                $('#userpassword').css("border-color", "#918C8C");
                $('#userconfirm').css("border-color", "#918C8C");
                $('#usershowdiv').hide();

                // Username - Space error show.
                $('#userspace').css("border-color", "#918C8C");
                $('#usershowdiv3').hide();

                // Username - User already exists error show.
                $('#userexists').css("border-color", "#918C8C");
                $('#usershowdiv4').hide();

                // Show ok image.
                $('#okicon2').show();

                // Hide ok image.
                $('#okicon2').delay(8000).fadeOut();

                // Show success message.
                $('#usersuccess').show();

                // Show success message hide after some time.
                $('#usersuccess').delay(8000).fadeOut();

                // Hide x image.
                $('#crossicon2').hide();

                // Again Display Table after refresh.
                $('#refreshuserlist').html(data);
            }

js:

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

    // dataTable    

        if($(".fTable").length > 0)
            $(".fTable").dataTable({bSort: true, 
                                    "iDisplayLength": 5, "aLengthMenu": [5,10,25,50,100], // can be removed for basic 10 items per page
                                    "aoColumnDefs": [{"bSortable": false,
                                                     "aTargets": [ -1 , 0]}]});

    // eif dataTable
});
</script>

how i use that:

<table class="table fTable lcnp" cellpadding="0" cellspacing="0" width="100%">
</table>

Justinas · Accepted Answer · 2014-03-27 09:50:21Z

1

If your pager and search are dynamically added to page, then in ajax success re-call these functions to apply to new elements, that was replaced in your page:

function createSearchField(){
     $('body').append('<div class="search"></div>');
}

In ajax:

$.ajax({ url: 'example.com', success: function(){ createSearchField(); //Call once more. } })

edited Mar 27, 2014 at 9:50

answered Mar 27, 2014 at 9:45

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

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

10 Comments

user3400389 Over a year ago

can you give an example. should i use the whole script inside ajax success? its too much code

user3400389 Over a year ago

i updated my else part which is inside the success ajax,

user3400389 Over a year ago

will you chk this js i pasted in this link jsfiddle.net/ryXpD/3 i tried to call function(X,l,n); but it didn't worked.

Justinas Over a year ago

@user3400389 if you call you plugin: $('.div').datepicker(); and that .div is changed dynamically, so in ajax: success: function(){ $('.div').datepicker();}

Justinas Over a year ago

@user3400389 so finally you told, that you are using dataTables plugin. Next time start from that. $.ajax({success: function(){$(".fTable").dataTable();}})

|

Collectives™ on Stack Overflow

Javascript file not working after ajax call

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related