Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unable to set data-url value using jQuery in Bootstrap table

I checked your example, and it's working in your example, but when I tried it in my example, it doesn't work. I don't know where I am making mistakes. Is it that I am using old jQuery files? I am posting the whole HTML code here.

HTML CODE

@{
    Layout = null;
}


<!DOCTYPE html>
<html>
<head>
    <title>Refresh method with new url</title>
    <meta charset="utf-8">
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-table.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/bootstrap-table.js"></script>
</head>
<body>
    <div class="container">
        <div class="ribbon">
            <a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/409.html">View Source on GitHub</a>
        </div>
        <h1>Refresh method with new url(<a href="https://github.com/wenzhixin/bootstrap-table/issues/409">#409</a>).</h1>
        <div class="toolbar">
            <button id="refresh" class="btn btn-default">Refresh</button>
        </div>
        <table id="table"
               data-toggle="table"
               data-toolbar=".toolbar"
               data-url='/Report/GetShipments'>
            <thead>
                <tr>
                    <th data-field="id">ID</th>
                    <th data-field="name">Item Name</th>
                    <th data-field="price">Item Price</th>
                </tr>
            </thead>
        </table>
    </div>
    <script>
        var $table = $('#table');
        $(function () {
            $('#refresh').click(function () {
                $table.bootstrapTable('refresh', {
                    url: '/Report/ShowShipment'
                });
            });
        });
    </script>
</body>
</html>

Controller code.

public class ReportController : Controller
    {
        // GET: Report
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetShipments()
        {
            //IShipments shipments = new ShipmentsClient();
            //var data = shipments.GetShipments(string.Empty, string.Empty, string.Empty, string.Empty);
            //return Json(data, JsonRequestBehavior.AllowGet);

            return Json("test" , JsonRequestBehavior.AllowGet);
            //return new Json()
        }

        public ActionResult ShowShipment()
        {
            //IShipments shipments = new ShipmentsClient();
            //var data = shipments.GetShipments(string.Empty, string.Empty, string.Empty, string.Empty);
            //return Json(data, JsonRequestBehavior.AllowGet);

            return Json("test", JsonRequestBehavior.AllowGet);
            //return new Json()
        }

        public ActionResult Test()
        {
            return View();
        }

    }

When the page loads and hits the GetShipment() method in the controller, and then we click the refresh button, it should hit the ShowShipment() method, but unfortunately it always hits the GetShipment() method. I don't know what mistake I am making.

like image 808
Awadhendra Avatar asked Sep 15 '25 00:09

Awadhendra


2 Answers

You can use refresh method:

$table.bootstrapTable('refresh', {
    url: 'new url'
});

I have added a example here: http://issues.wenzhixin.net.cn/bootstrap-table/#issues/409.html

The documentation: http://bootstrap-table.wenzhixin.net.cn/documentation/#methods

Hope to help you.

like image 198
wenyi Avatar answered Sep 16 '25 15:09

wenyi


The best way to set/change data-url of bootstrap table is to use refresh method together with refreshOptions:

$table.bootstrapTable('refreshOptions', {url: 'new url'});
$table.bootstrapTable('refresh', {url: 'new url'});

If you don't do refreshOptions then BootstrapTable still will use Old url for next refreshes. For example for pagination/sorting/search when server-side enabled.

If you need to add loader icon, then you should add before calling refresh method, and delete loader icon with onLoadSuccess, onLoadError events.

like image 26
Артур Курицын Avatar answered Sep 16 '25 17:09

Артур Курицын