Flexigrid не работает с jQuery 1.4.3? - PullRequest
Новая
       19

Flexigrid не работает с jQuery 1.4.3?

1 голос
/ 25 февраля 2011

Я пытаюсь использовать плагин flexigrid для jquery, проблема в том, что я также хочу использовать плагин fancybox, и этот плагин использует jQuery 1.4.3, но flexigrid, похоже, не работает с этой версией jquery.

Когда я возвращаюсь к старой версии jquery, которая поставляется с flexigrid, сетка работает, а fancybox - нет.

Это код, который я использую: 

        $("#grid1").flexigrid
        (
        {
        url: 'php/get.php',
        dataType: 'json',
        colModel : [
            {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
            {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
            {display: 'Email', name : 'email', width : 120, sortable : true, align: 'left'},
            {display: 'tID', name : 'tid', width : 130, sortable : true, align: 'left'},
            {display: 'Active', name : 'numcode', width : 80, sortable : true, align: 'right'}
            ],
        buttons : [
            {name: 'Add', bclass: 'add', onpress : doAction},
            {separator: true},
            {name: 'Delete', bclass: 'delete', onpress : doAction},
            {separator: true},
            {name: 'Activate', bclass: 'activate', onpress : doAction},
            {separator: true},
            {name: 'Deactivate', bclass: 'deactivate', onpress : doAction},
            {separator: true}
            ],
        searchitems : [
            {display: 'Name', name : 'name', isdefault: true}
            ],
        sortname: "id",
        sortorder: "asc",
        usepager: true,
        title: 'XXX',
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 700,
        height: 200
        }
        );
</script>

И ответ php выглядит следующим образом: 

{
page: 1,
total: 3,
rows: [
{id:'28',cell:['28','test','test','test','1']},
{id:'27',cell:['27','test','test','test','1']},
{id:'26',cell:['26','etrer','ter','trt','0']}]
}

Я использую firebug, и он не показывает ошибку js.

Есть ли способ использовать flexigid с jquery 1.4.3

Ответы [ 4 ]

1 голос
/ 10 марта 2011

Попробуйте визуализировать JSON с использованием двойных, а не одинарных кавычек.

0 голосов
/ 17 ноября 2011

Я работаю над той же проблемой. Я нашел следующие ссылки полезными для начала.

Основная проблема - от groups.google.com
«Начиная с jQuery 1.4, если файл JSON содержит синтаксическую ошибку, запрос обычно завершается молча. По этой причине избегайте частого ручного редактирования данных JSON. JSON - это формат обмена данными с правилами синтаксиса, которые строже, чем правила Буквенная нотация объекта JavaScript. Например, все строки, представленные в JSON, независимо от того, являются ли они свойствами или значениями, должны быть заключены в двойные кавычки. Подробнее о формате JSON см. http://json.org/. В основном вы должны быть осторожны с вашим JSON и убедитесь, что он правильно отформатирован. Я предполагаю, что это связано с этим. Зайдите на сайт json.org и проверьте ваш JSON, чтобы убедиться, что он правильный. "

http://simonwillison.net/2006/oct/11/json/

http://jsonformatter.curiousconcept.com/#jsonformatter

0 голосов
/ 01 июня 2011

Я думаю, что оба плагина работают с jQuery 1.6.1. Очевидно, это зависит как от flexigrid , так и от fancybox jQuery-плагинов и примера файла JSON, который я назвал flexigrid.json. Если вы загрузите эти плагины и убедитесь, что src и href ссылаются на правильные места для JavaScript и CSS, и создадите файл с именем flexigrid.json со следующим содержимым: 

{
  "page": 1,
  "total": 3,
  "rows": [
  {"id":28,"cell":[28,"test","test","test",1]},
  {"id":27,"cell":[27,"test","test","test",1]},
  {"id":26,"cell":[26,"etrer","ter","trt",0]}]
}

Примечание: JSON в вашем примере недопустим (как уже указывал @Josh). Вы можете запустить через сетевой анализатор , чтобы увидеть ошибки.

Вот пример страницы с обоими плагинами: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script src="flexigrid/js/flexigrid.pack.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="flexigrid/css/flexigrid.pack.css"/>
    <script src="fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css"/>
    <script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
    <script type="text/javascript">
        $(function(){
            function doAction() {}

            $("#grid1").flexigrid({
                url: 'flexigrid.json',
                dataType: 'json',
                colModel : [
                    {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
                    {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
                    {display: 'Email', name : 'email', width : 120, sortable : true, align: 'left'},
                    {display: 'tID', name : 'tid', width : 130, sortable : true, align: 'left'},
                    {display: 'Active', name : 'numcode', width : 80, sortable : true, align: 'right'}
                    ],
                buttons : [
                    {name: 'Add', bclass: 'add', onpress : doAction},
                    {separator: true},
                    {name: 'Delete', bclass: 'delete', onpress : doAction},
                    {separator: true},
                    {name: 'Activate', bclass: 'activate', onpress : doAction},
                    {separator: true},
                    {name: 'Deactivate', bclass: 'deactivate', onpress : doAction},
                    {separator: true}
                    ],
                searchitems : [
                    {display: 'Name', name : 'name', isdefault: true}
                    ],
                sortname: "id",
                sortorder: "asc",
                usepager: true,
                title: 'XXX',
                useRp: true,
                rp: 15,
                showTableToggleBtn: true,
                width: 700,
                height: 200
            });

            $("a#example1").fancybox({
                'titleShow'     : false
            });

            $("a#example2").fancybox({
                'titleShow'     : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic',
                'easingIn'      : 'easeOutBack',
                'easingOut'     : 'easeInBack'
            });

            $("a#example3").fancybox({
                'titleShow'     : false,
                'transitionIn'  : 'none',
                'transitionOut' : 'none'
            });
        });
    </script>
</head>
<body>
<table id="grid1"><tr><td></td></tr></table>

<p>Different animations - 'fade', 'elastic' and 'none'<br />
    <a id="example1" href="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg">
        <img alt="example1" src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026_m.jpg" />
    </a>
    <a id="example2" href="http://farm3.static.flickr.com/2489/4234944202_0fe7930011.jpg">
        <img alt="example2" src="http://farm3.static.flickr.com/2489/4234944202_0fe7930011_m.jpg" />
    </a>
    <a id="example3" href="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg">
        <img alt="example3" src="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a_m.jpg" />
    </a>
</p>
</body>
</html>

Примечание: Это не будет работать локально при тестировании в Chrome 13 из-за ограничения безопасности Одинаковой политики происхождения . Вы можете увидеть ошибку в консоли Исходное значение NULL не разрешено Access-Control-Allow-Origin . Вам нужно будет перейти к странице примера и JSON с соответствующего веб-сервера.

Надеюсь, это поможет.

0 голосов
/ 25 февраля 2011

Оба плагина работают с v1.3.2

...