0

入力フォームから codeigniter コントローラーにデータを渡し、JSON を介してビューを返し、それを jquery ui ダイアログ モーダルで開きたいと思います...ふー!

しかし、それは機能していません。送信時にページが更新され、アラートも機能しません (findcat() 関数の先頭に配置した場合)。

ここに私のJavascript関数があります:

function findcat(){
    var valinput = $('#category_form').val();
    $.ajax({
        type: "POST",
        async: true,
        url: 'http://rickymason.net/omnia/ajax/findcategory',
        dataType: 'json', 
        data: { valinput: valinput },
        success: function(content){
            $('#category_modal').html(content['content']);
            $('#category_modal').dialog({
                autoOpen: false,
                title: 'Hello',
                modal: true,
                height: 350,
                resizable: false 
            });
        return false;
        }
    });  
}

そして私のHTML：

<div class="cus_input">
    <form id="category_form" onsubmit="return findcat();">
        <input type="text" id="category_input" name="category_input" placeholder=" Find Category"/>
        <input type="image" id="category_submit" src="<?php echo base_url() ?>img/board/icons/add.jpg" id="homeSubmit" value="X"/>
    </form>
</div>

私のコントローラは、ある種のコンテンツを送り返すための単なるモックアップです:

    public function findcategory()
    {
        $page['content'] = 'hello-testing';
        return json_encode($page);
    }
4

4 に答える 4

2

私が理解していないのは、フォームで送信ボタンを使用していない理由と、コードイグナイターコントローラーが使用すべきechoではないということreturnです。あなたのフォームに関係なく、ここにあなたのための解決策があります.

Jクエリ:

function findcat(){
    var valinput = $('#category_form').val();
    $.ajax({
        type: "POST",
        async: true,
        url: 'http://rickymason.net/omnia/ajax/findcategory', //you can use site_url here whic is better for you
        dataType: 'json', 
        data: { valinput: valinput },
        success: function(content){
            $('#category_modal').html(content.content);//not content['content'] 
            $('#category_modal').dialog({
                autoOpen: false,
                title: 'Hello',
                modal: true,
                height: 350,
                resizable: false 
            });
        }
    });  
    return false; //should be in your function scope and not the ajax scope
}

あなたのコントローラのために：

public function findcategory()
    {
        $page['content'] = 'hello-testing';
        echo json_encode($page); // echo and not return for codeigniter
    }
于 2013-01-10T19:03:23.160 に答える
1

この質問に出くわした人にとっては、上記のコメントのおかげで私の解決策がここにあります。

ページの送信とリロードについて。

Jquery.liveが処理します。JS で、以下を追加するだけです。

$('#category_form').live('submit', function(){

関数の前に。これにより、送信がキャッチされ、関数が実行され、ページがリロードされます。リロードを防ぐには、関数の最後に追加しますreturn false;

モーダルと AJAX の問題について...私の元のコードでは、ダイアログを「準備」しませんでした。

私の初心者のプログラミング能力のためにそれを認識していませんでしたが、最初に次のコードでダイアログ div を設定する必要があります。

$('#category_modal').dialog({
    autoOpen: false,
    title: 'Hello',
    modal: true,
    height: 350,
    resizable: false
});

その後$("#category_modal").dialog("open");、ajax リクエストに従って「アクティブ化」します。

$('#category_form').live('submit', function(){
    var valinput = $('#category_input').val();
    $.ajax({
        type: "POST",
        async: true,
        url: 'http://rickymason.net/omnia/ajax/findcategory',
        dataType: 'json', 
        data: { valinput: valinput },
        success: function(content){
            $('#category_modal').html(content['content']);
            $("#category_modal").dialog("open");
        }
    });  
    return false;
});

お役に立てれば！

于 2013-01-10T19:35:26.077 に答える
1

return false;がフォームの送信を停止するために使用されていると仮定すると、それは間違った場所にあります。findcatあなたが持っているように、それはajaxの成功関数にあります。

function findcat(){
    var valinput = $('#category_form').val();
    $.ajax({
        type: "POST",
        async: true,
        url: 'http://rickymason.net/omnia/ajax/findcategory',
        dataType: 'json', 
        data: { valinput: valinput },
        success: function(content){
            $('#category_modal').html(content['content']);
            $('#category_modal').dialog({
                autoOpen: false,
                title: 'Hello',
                modal: true,
                height: 350,
                resizable: false 
            });
        }
    });  
    return false;
}
于 2013-01-10T18:55:01.237 に答える
0

フォームがPOSTを実行している可能性があり、これが更新の原因となっています。

取った

onclick="return findcat();

フォームタグから取り出して、タグに付けるだけです。

<a href="#" onclick="return findcat();">Click</a>
于 2013-01-10T18:49:14.780 に答える