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

jquery html asp.net asp.net-mvc twitter-bootstrap

32,651

Solution 1

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.

Solution 2

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.

32,651

Author by

Awadhendra

Updated on February 26, 2020

Comments

Awadhendra about 4 years

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.

TheDeveloo over 9 years

can you give your HTML please ?
Awadhendra over 9 years

I am using bootstrap table and wants to set data-url attribute using javascript and then wants to refresh table so that it can pull all data from specified url.
TheDeveloo over 9 years

It's data('url', 'yoururl') not data('data-url','')
Awadhendra over 9 years

I tried both but when I called refresh method of table then it send old url not modified one.
Awadhendra over 9 years

I up voted you for your effort but it seems that I am not explaining problem well. Have you tried with any new url because it always hits old urls with old values. Whatever I modified it doesn't work. Thanks.
Awadhendra over 9 years

I updated code. I am surprised why your example working and mine not.
Awadhendra over 9 years

Finally it works for me. I found the problem that I am using old bottstrap-table.js 1.2 which doesn't support refresh method with new url. Finnally I used bootstrap-table.js version 1.5 and it works for me. Thanks a lot everyone for your effort,
TheDeveloo over 9 years

Well bootstrap-table library version problem as I see. The code I gave you is working. My version above should be also working for you now because I directly took the latest versions of the libraries. But wenyi's solution looks better than mine :)