jQuery + JSON + MySQL

43K

05 февраля 2009 года

5 / / 05.02.2009

всем привет, народ помогите назначить переменные данным из SQL и научит скрипт уже работать с ними, а то при совпадении имен в селектах возникает путаница, вот смотрите:

1) PHP-скрипт

Свернуть исходник

Код:

<?php

if (@$_REQUEST['ajax']) {

    // connect to local database 'test' on localhost

    $link = mysql_connect('localhost', 'root', '');

    if ($link == false)

        trigger_error('Connect failed - ' . mysql_error(), E_USER_ERROR);

    $connected = mysql_select_db('test', $link);

    if ($connected) {

        $results = mysql_query('select * from test.select_chain where category="' . strtolower(mysql_real_escape_string(strip_tags($_REQUEST['category']))) . '"');

        $json = array();

        while (is_resource($results) && $row = mysql_fetch_object($results)) {

            //$json[] = '{"id" : "' . $row->id . '", "label" : "' . $row->label . '"}';

            $json[] = '"' . $row->label . '"';

        }

        echo '[' . implode(',', $json) . ']';

        die(); // filthy exit, but does fine for our example.

    } else {

        user_error("Failed to select the database");

    }

}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en">

  <head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>Select Chain</title>

    <style type="text/css" media="screen">

    <!--

      BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; }

      BODY { font-size: 100%; }

      H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;}

      DIV.selHolder { float: left; border: 3px solid #ccc; margin: 10px; padding: 5px;}

      TEXTAREA { width: 80%;}

      FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }

      LEGEND { color: #ccc; font-size: 120%; }

      INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; }

      LABEL { display: block; margin-top: 10px; } 

      IMG { margin: 5px; }

      SELECT { margin: 10px; width: 200px; }

    -->

    </style>

    <script src="/js/jquery.js" type="text/javascript"></script>

    <script src="select-chain.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

    <!--

    $(function () {

        var cat = $('#categorySelect');

        var el = $('#elementSelect');

        var attr = $('#attributeSelect');

        el.selectChain({

            target: attr,

            url: 'select-chain.php',

            data: { ajax: true, anotherval: "anotherAction" }            

        });        

        // note that we're assigning in reverse order

        // to allow the chaining change trigger to work

        cat.selectChain({

            target: el,

            url: 'select-chain.php',

            data: { ajax: true }

        }).trigger('change');

    });

    //-->

    </script>

  </head>

  <body id="page">

    <div id="doc">

        <h1>Select Chain</h1>

        <div class="selHolder">

            <h2>Element Category</h2>

            <select id="categorySelect" name="category" size="5">

                <option>Forms</option>

                <option>Scripts</option>

            </select>

        </div>

        <div class="selHolder">

            <h2>Element</h2>

            <select id="elementSelect" name="category" size="5">

                <option>[none selected]</option>

            </select>

        </div>

        <div class="selHolder">

            <h2>Attributes</h2>

            <select id="attributeSelect" name="category" size="5">

                <option>[none selected]</option>

            </select>

        </div>

    </div>

  </body>

</html>

2) плагин jQuery

Свернуть исходник

Код:

(function ($) {

    $.fn.selectChain = function (options) {

        var defaults = {

            key: "id",

            value: "label"

        };

        var settings = $.extend({}, defaults, options);

        if (!(settings.target instanceof $)) settings.target = $(settings.target);

        return this.each(function () {

            var $$ = $(this);

            $$.change(function () {

                var data = null;

                if (typeof settings.data == 'string') {

                    data = settings.data + '&' + this.name + '=' + $$.val();

                } else if (typeof settings.data == 'object') {

                    data = settings.data;

                    data[this.name] = $$.val();

                }

                settings.target.empty();

                $.ajax({

                    url: settings.url,

                    data: data,

                    type: (settings.type || 'get'),

                    dataType: 'json',

                    success: function (j) {

                        var options = [], i = 0, o = null;

                        for (i = 0; i < j.length; i++) {

                            // required to get around IE bug (http://support.microsoft.com/?scid=kb%3Ben-us%3B276228)

                            o = document.createElement("OPTION");

                            o.value = typeof j == 'object' ? j[settings.key] : j;

                            o.text = typeof j == 'object' ? j[settings.value] : j;

                            settings.target.get(0).options = o;

                        }

            // hand control back to browser for a moment

            setTimeout(function () {

                settings.target

                                .find('option:first')

                                .attr('selected', 'selected')

                                .parent('select')

                                .trigger('change');

            }, 0);

                    },

                    error: function (xhr, desc, er) {

                        // add whatever debug you want here.

            alert("an error occurred");

                    }

                });

            });

        });

    };

})(jQuery);

3) база SQL

Свернуть исходник

Код:

drop table if exists test.select_chain;

create table test.select_chain

(

  id int not null auto_increment,

  category char(10) not null,

  label char(20) not null,

  primary key (id),

  index category_id (category)

);

insert into test.select_chain values (null, 'forms', 'Form');

insert into test.select_chain values (null, 'form', 'action');

insert into test.select_chain values (null, 'form', 'method');

insert into test.select_chain values (null, 'form', 'enctype');

insert into test.select_chain values (null, 'form', 'accept');

insert into test.select_chain values (null, 'form', 'name');

insert into test.select_chain values (null, 'form', 'onsubmit');

insert into test.select_chain values (null, 'form', 'onreset');

insert into test.select_chain values (null, 'form', 'accept-charset');

insert into test.select_chain values (null, 'forms', 'Select');

insert into test.select_chain values (null, 'select', 'name');

insert into test.select_chain values (null, 'select', 'size'); 

insert into test.select_chain values (null, 'select', 'multiple');

insert into test.select_chain values (null, 'select', 'disabled');

insert into test.select_chain values (null, 'select', 'tabindex');

insert into test.select_chain values (null, 'select', 'onfocus');

insert into test.select_chain values (null, 'select', 'onblur');

insert into test.select_chain values (null, 'select', 'onchange');

insert into test.select_chain values (null, 'scripts', 'Script');

insert into test.select_chain values (null, 'script', 'charset');

insert into test.select_chain values (null, 'script', 'type');

insert into test.select_chain values (null, 'script', 'src');

insert into test.select_chain values (null, 'script', 'defer');

insert into test.select_chain values (null, 'scripts', 'Noscript');

insert into test.select_chain values (null, 'noscript', '[none]');

4) и конечно же сама библиотека jQuery лежит тут:
http://docs.jquery.com/Downloading_jQuery

5) а вот это все в действии:
http://remysharp.com/wp-content/uploads/2007/09/select-chain.php

единственная проблема, нельзя использовать "имя" какой либо категории несколько раз, в разных значениях(( буду очень благодарен за помощь!

Подписаться на вопросНеобходима регистрация

Ваш аккаунт

Последние темы форума

Почтовая рассылка

jQuery + JSON + MySQL