Question

I am going to display the Flexigrid in html div tag when click a button.The function for Flexigrid would be in the Javascript function. so i add a image tag with onclick to call a function which is called f_reload() which is going to load the flexigrid function. First time its loaded. by second time click it doest load the grid again.

      <script type="text/javascript">

        function loadFlexiGrid(){
                 //here flexigrid content 
                     $("#flex1").flexigrid{{
                        //...........}}
         }  

        function eventhandler() {
                $("#flex").html(function() {    //this function used to reload grid but it is not called when click second time on the button
            return "<div id='flex1'></div>";});

        javascript:loadGrid();
        }
    </script>

<input type="image" class="btn" id="sub" src="<?=base_url();?>images/rbtnsave.gif"        
                                    onclick="eventhandler();"/>
    <div id="flex"><div id="flex1"></div></div>
    </div>

here flex1 id of the flecigrid and flex is the id of the div.

when click first time on the button it shows the grid. but second time it doesn’t why

Answer 1

When the eventHandler is executed, the nested function in $('#flex').html() is declared, but not executed. Is there a particular reason why you put it there?

Otherwise, try replacing it with:

    function eventhandler() 
    {
        $("#flex").html("<div id='flex1'></div>");
        javascript:loadGrid();
    }

The first time it works fine, since you’ve put <div id="flex1"></div> manually in your HTML.

Besides, are you sure javascript:loadGrid() is correct? Try removing the javascript: part. And – if referring to function loadFlexiGrid(), call it loadFlexiGrid();, not loadGrid();.