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

Back to archive index

yfa76550 yfa76****@nifty*****
2012年 2月 9日 (木) 16:31:32 JST


tabotuさん
早速有り難う御座います。
2回目のメールで、解決しました。
全てのブラウザで完璧です。
1週間位、悩んでいました。
本当に感謝致します。

ご参考までに、1回目のメールの結果です。
echo (json_encode($items)); => $this->output->set_output(json_encode($items));
と、1行のみ変更したところ;
 IE6/FireFox/Safariでは、ダウンロードになってしまいます。
  ファイルの中身は、[["1","Brazil"],["2","Canada"],["3","United States"],["4","Venezuela"]]
 chromeの場合は、変わらず、[["1","Brazil"],["2","Canada"],["3","United States"],["4","Venezuela"]]
のままです。

"ヘッダーの前にJSONが出力されてしまう"、の意味がよくわからないのですが、
ご参考までに、$this->load->view('jcombo_view'); の行を、
上記echoの行の次(即ち最終行)に入れ替えた時は、
[["1","Brazil"],["2","Canada"],["3","United States"],["4","Venezuela"]]
<html>
<head>
と、htmlの前(即ち先頭行)に、jsonが表示されます。

Controllerの書き方、勉強してみます。
お世話になりました。
栗田
---------- Original Message ----------
From:     牛坂 孝行 <ringo****@gmail*****>
To:       codei****@lists*****
Sent:     Thu, 9 Feb 2012 15:20:08 +0900
Subject:  Re: [Codeigniter-users] jQuery/jsonの実装について

>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 mailing list
>Codei****@lists*****
>http://lists.sourceforge.jp/mailman/listinfo/codeigniter-users




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