[Codeigniter-users] jQuery/jsonの実装について

Back to archive index

牛坂 孝行 ringo****@gmail*****
2012年 2月 9日 (木) 15:20:08 JST


tabotuと申します。はじめまして。

検証していないので推測ですが、

echo (json_encode($items));

こうしてしまうと、ヘッダーの前にJSONが出力されてしまいませんでしょうか。

$this->output->set_output(json_encode($items));

とかだといかがでしょう。


2012年2月9日14:43 yfa76550 <yfa76****@nifty*****>:
> 色々調べたのですが、解決が見つからず、質問させて下さい。
> 通常のPHPではOKですが、codeigniterに移植すると、出力はPHPと同一なのですが、
> データがviewに伝わりません。
>
> 例は、シンプルな1つのみのセレクトボックスをデータベースから作成するもので、
> 下記のサイトを参考にしました。
> http://www.prodiven.com/jcombo/index.php?lang=ja
>
> (A)通常のPHP + HTMLではOKですが、(B)Controller + Viewに移植すると、選択ボックスの中身が入りません。
> Controllerの出力は、PHPの場合と同一で、以下のjsonです。
> [["1","Brazil"],["2","Canada"],["3","United States"],["4","Venezuela"]]
>
> Firebugでのエラー表示はありません。
> バージョン: CI 2.0.3, XAMPP 1.7.1, PHP 5.2.9, MySQL 5.1.33
>
> 色々と記述を変えてトライしましたが、データを表示出来ません。
> 他の同様のjQueryプラグイン(select-chain.js等)での移植は問題ないのですが。。
> プラグインの記述(Ajaxに関する)の仕方によっては、
> codeigniter側で何か調整する必要があるのでしょうか。。
>
> 長くなりますが、コードを掲載します。
> 宜しくお願い致します。
> 栗田
>
>
> (B)Controller: application/controllers/jcombo.php
> <?php
> class Jcombo extends CI_Controller
> {
>        function Jcombo()
>        {
>                parent::__construct();
>                $this->output->set_header('Content-Type: text/html ;charset=UTF-8');
>                $this->load->database();
>                $this->load->helper('url');
>                $this->load->view('jcombo_view');
>        }
>
>        function getCountries()
>        {
>                $query = "SELECT id_country, country_name FROM countries ORDER BY country_name ASC";
>                $result = mysql_query($query);
>                $items = array();
>                if($result &&   mysql_num_rows($result)>0)
>                {
>                        while($row = mysql_fetch_array($result))
>                        {
>                                $items[] = array( $row[0], $row[1]);
>                        }
>                }
>                echo (json_encode($items));
>        }
> }
> ?>
> ++++++++++++++++++++++++++++
> View: application/views/jcombo_view.php
> <!DOCTYPE html>
> <html>
> <head>
> <meta charset="UTF-8" />
> <title>jcombo</title>
> <script type="text/javascript" src="<?=base_url();?>javascript/jquery.js"></script>
> <script type="text/javascript" src="<?=base_url();?>javascript/jquery.jCombo.min.js"></script>
> <script type="text/javascript">
> $(function() {
>        $("#country").jCombo('<?=base_url();?>jcombo/getCountries');
> });
> </script>
> </head>
> <body>
> <form>
> <select name="country" id="country"></select>
> </form>
> </body>
> </html>
>
> ++++++++++++++++++++++++++++
> ++++++++++++++++++++++++++++
> (A)通常のPHP + HTMLの場合
> PHP: localhost/jcombo/getCountries.php
> <?php
> include("config.php");
>        $query = "SELECT id_country, country_name FROM countries ORDER BY country_name ASC";
>        $result = mysql_query($query);
>        $items = array();
>        if($result &&   mysql_num_rows($result)>0) {
>                while($row = mysql_fetch_array($result)) {
>                        $items[] = array( $row[0], $row[1]);
>                }
>        }
>        echo(json_encode($items));
> ?>
> ++++++++++++++++++++++++++++
> HTML: localhost/jcombo/index.html
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> <title>jQuery Combo</title>
> <script type="text/javascript" src="script/jquery.js"></script>
> <script type="text/javascript" src="script/jquery.jCombo.min.js"></script>
> <script type="text/javascript">
> $(function()
> {
>        $("select[name='country']").jCombo("getCountries.php");
> });
> </script>
> </head>
> <body>
> <form>
>        <select name='country'></select>
> </form>
> </body>
> </html>
> ++++++++++++++++++++++++++++
> ++++++++++++++++++++++++++++
> ++++++++++++++++++++++++++++
> jQueryの外部ファイル: jquery.jCombo.min.js
> /*
>  * jQuery jCombo Plugin (Minified)
>  * Carlos De Oliveira
>  * carde****@gmail*****
>  *
>  * Latest Release: Sep 2011
>  */
> (function(a){a.fn.jCombo=function(b,d){function h(b,d,e,f,g){a.ajax({type:"GET",dataType:"json",url:d+e,success:function
> (a){var d="";if(a.length==0){d+='<option value="0"></option>';b.html(d)}else{if(f!=""&&f!=null){d+='<option value="0">'+
> f+"</option>"}for(var e=0;e<a.length;e++){selected=a[e][0]==g?' selected="selected"':"";c=a[e];d+='<option value="'+c[0]
> +'"'+selected+">"+c[1]+"</option>"}b.html(d)}b.trigger("change")}})}var e={parent:"",selected_value:"0",parent_value:"",
> initial_text:"-- Please Select --"};var d=a.extend(e,d);var f=a(this);if(d.parent!=""){var g=a(d.parent);g.removeAttr
> ("disabled","disabled");g.bind("change",function(c){f.attr("disabled","disabled");if(a(this).val()!="0"&&a(this).val()!=
> "")f.removeAttr("disabled");h(f,b,a(this).val(),d.initial_text,d.selected_value)})}h(f,b,d.parent_value,d.initial_text,d.
> selected_value)}})(jQuery)
> ++++++++++++++++++++++++++++
> 上記のフルバージョン: jquery.jCombo.js
> /*!
>  * jQuery jCombo Plugin
>  * Carlos De Oliveira
>  * carde****@gmail*****
>  *
>  * Latest Release: Sep 2011
>  */
> (function($) {
>        $.fn.jCombo = function(url, user_options) {
>                var default_options = {
>                                parent: "",
>                                selected_value : "0",
>                                parent_value : "",
>                                initial_text: "-- Please Select --"
>                };
>                var user_options = $.extend( default_options, user_options) ;
>                var obj = $(this);
>                if(user_options.parent!="") {
>                        var $parent = $(user_options.parent);
>                        $parent.removeAttr("disabled","disabled");
>                        $parent.bind('change',  function(e) {
>                                obj.attr("disabled","disabled");
>                                if($(this).val()!="0" && $(this).val()!="") obj.removeAttr("disabled");
>                                __fill( obj,
>                                                url,
>                                                $(this).val(),
>                                                user_options.initial_text,
>                                                user_options.selected_value);
>                        });
>                }
>                __fill(obj,url,user_options.parent_value,user_options.initial_text,user_options.selected_value);
>                function __fill($obj,$url,$id,$initext,$inival) {
>                        $.ajax({
>                                type: "GET",
>                                dataType:"json",
>                                url: $url + $id,
>                                success: function(j){
>                                        var choices = '';
>                                        if (j.length == 0) {
>                                                choices += '<option value="0"></option>';
>                                                $obj.html(choices);
>                                        } else {
>                                                if($initext!="" && $initext!=null) {
>                                                        choices += '<option value="0">' + $initext + '</option>';
>                                                }
>                                                for (var i = 0; i < j.length; i++) {
>                                                        selected = (j[i][0]==$inival)?' selected="selected"':'';
>                                                        c = j[i];
>                                                        choices += '<option value="' + c[0] + '"' +
>                                                        selected + '>' + c[1] +
>                                                        '</option>';
>                                                }
>                                                $obj.html(choices);
>                                        }
>                                        $obj.trigger("change");
>                                }
>
>                        });
>                }
>        }
> })(jQuery);
>
> _______________________________________________
> Codeigniter-users mailing list
> Codei****@lists*****
> http://lists.sourceforge.jp/mailman/listinfo/codeigniter-users



-- 
------------------------------------------
 tabotu
 ringo****@gmail*****
------------------------------------------




Codeigniter-users メーリングリストの案内
Back to archive index