Unable to reinitialize the grid about jquery-bootgrid HOT 8 CLOSED

It very easy just call $("#id-selector").bootgrid("reload");.

from jquery-bootgrid.

$("#grid").bootgrid({
ajax: true,
post: {'datefrom':datefrom,'dateto':dateto},
url:"getData.php",
});
I am populating the grid with a data of particular date range. If i just do "Reload" it will populate the grid with date of same range.
I want reinitialize the same grid with data of different date range when I click on search button. Something think this
$("#search").click(function(){
$("#grid").bootgrid({
ajax: true,
post: {'datefrom':datefrom,'dateto':dateto},
url:"getData.php",
});
But this ain't working because, the javascript checks if the instance is present, if it is then it doesn't reinitialize it.

from jquery-bootgrid.

Just wrap your object with a function body so it returns your extra data as a new instance.

post: function () { return {'datefrom':datefrom,'dateto':dateto}; },

Now the object is not static anymore.

By the way since version 1.1.0 I recommend to use requestHandler instead of post.

from jquery-bootgrid.

Hi, getting the same problem, I change the variables but the grid load the same data before.

function getPosicao() {
        var $carteira = $("#txtIdCart").val();
        var $data = $("#txtData").val();
        var $url = "@Url.Content("~/json/getPosicaoCarteira/")" + $carteira + "/" + $data;

        $("#grid-basic").bootgrid({
            ajax: true,
            navigation: 0,
            url: function () { return $url; }
        });

        $("#grid-basic").bootgrid("reload");
    }

from jquery-bootgrid.

@rafaeldelboni the issue in your code is that the URL is calculated outside of the URL callback handler therefore in a different function scope. To understand the fact you should know that bootgrid is initialized only once per specific selector. For example it's not possible to initialize bootgrid on the following selector #grid-basic twice, because it's already initialized. So what does that mean in your case? That means the URL is calculated only once namely at the first invocation. Let me show you a small example.

// The URL is calculated every time you execute it.
var url = "/persons/" + circle;

// 1 call: "/persons/family"
// 2 call: "/persons/friends"

// The following code initializes bootgrid once for "#grid-basic" (it's handled internally)
$("#grid-basic").bootgrid({
    url: function ()
    {
        // Cause the callback handler is set only once namely on the 
        // first call it's set to "/persons/family"
        return url;
    }
});

To solve the issue in your code you have to move the dynamic URL calculation simply into your URL callback handler. See the example below.

$("#grid-basic").bootgrid({
    ajax: true,
    navigation: 0,
    url: function ()
    {
        var carteira = $("#txtIdCart").val();
        var data = $("#txtData").val();
        return "@Url.Content("~/json/getPosicaoCarteira/")" + $carteira + "/" + $data;
    }
});

$("#grid-basic").bootgrid("reload");

I also recommend you to separate your code into to sections like initialization and reload because it's more elegant, improves readability and much more. See the following example.

var instance = $("#grid-basic");

function initialize()
{
    instance.bootgrid({
        ajax: true,
        navigation: 0,
        url: function ()
        {
            var carteira = $("#txtIdCart").val();
            var data = $("#txtData").val();
            return "@Url.Content("~/json/getPosicaoCarteira/")" + $carteira + "/" + $data;
        }
    });
}

function relaod()
{
    instance.bootgrid("reload");
}

from jquery-bootgrid.

@rstaib Thanks for the fast answer!

As a suggestion, can you post an example of this in your documentation? Because I was searching for this on the web and I didn't found nothing related.

I will share my complete solution, for anyone how is dealing with this same question.

<script>

    var instance = $("#grid-basic");
    var $carteira = null;
    var $data = null;

    function initialize() {
        instance.bootgrid({
            ajax: true,
            navigation: 0,
            url: function () {
                var carteira = $("#txtIdCart").val();
                var data = $("#txtData").val();
                return "@Url.Content("~/json/getPosicaoCarteira/")" + $carteira + "/" + $data;
            }
        });
    }

    // Page Load
    $(document).ready(function () {
        initialize()
    });

    // Button OnClick
    function reload() {
        $carteira = $("#txtIdCart").val();
        $data = $("#txtData").val();

        instance.bootgrid("reload");
    }

</script>

from jquery-bootgrid.

@rafaeldelboni more examples are planned and will be delivered as soon as possibel.

And please keep in mind to put your code always in closures or use the module pattern; Otherwise your code might be overridden by some other code or plugin.

<a id="reload-grid-basic" href="javascript:void(0)">Reload</a>
<script>
    $(function()
    {
        var instance = $("#grid-basic");

        function initialize()
        {
            instance.bootgrid({
                ajax: true,
                navigation: 0,
                url: function ()
                {
                    var carteira = $("#txtIdCart").val();
                    var data = $("#txtData").val();
                    return "@Url.Content("~/json/getPosicaoCarteira/")" + carteira + "/" + data;
                }
            });
        }

        function reload()
        {
            instance.bootgrid("reload");
        }

        initialize();
        $("#reload-grid-basic").on("click", reload);
    });
</script>

from jquery-bootgrid.

hi RafaelDelboni,

i am trying to set the visibility of a column to true dynamically.. , its not working..
Tried both in onchange before reload and requestHandler as well...
could you please help me on this...

$('#filter_group').change(function () {                     
                   // $("#employee_grid").bootgrid("reload");                    
                    $("#th_state").attr("data-visible", true ) ;           
                    instance.bootgrid("reload")

                });

requestHandler: function (request) {
var filterGroup=[];                        
                              $("#filter_group").find("option:selected").each(function (index, value) {
                                 if ($(this).is(':selected')) {
                                       filterGroup.push(this.value);
                                       $("#th_state").attr("data-visible", true ) ;                                                                            
                                 }
                             });

},

from jquery-bootgrid.