Php 在jquery ui模式中加载ajax数据（提交后）_Php_Ajax_Jquery Ui_Codeigniter

Php 在jquery ui模式中加载ajax数据（提交后）

php ajax jquery-ui codeigniter

Php 在jquery ui模式中加载ajax数据（提交后）,php,ajax,jquery-ui,codeigniter,Php,Ajax,Jquery Ui,Codeigniter,我想将数据从一个输入表单传递到我的codeigniter控制器，然后通过JSON返回一个视图，该视图将在一个jquery ui对话框模式中打开…呸但它不起作用。在提交时，它会刷新页面，也不会发出警报（如果我将其放在findcat（）函数的开头）下面是我的Javascript函数： function findcat(){ var valinput = $('#category_form').val(); $.ajax({ type: "POST",

我想将数据从一个输入表单传递到我的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>

您的表单可能正在执行导致刷新的POST

接受

把它放在一个a标签上

<a href="#" onclick="return findcat();">Click</a>

您的表单可能正在执行导致刷新的POST

接受

把它放在一个a标签上

<a href="#" onclick="return findcat();">Click</a>

假设

返回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;
}

假设返回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;
}

我不理解的是，为什么您不在表单上使用提交按钮，而codeigniter控制器应该echo
，而不是返回
。这里有一个解决方案，不管你的形式如何
Jquery:
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
    }

我不理解的是，为什么您不在表单上使用提交按钮，而codeigniter控制器应该echo
，而不是返回
。这里有一个解决方案，不管你的形式如何
Jquery:
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
    }

对于任何遇到这个问题的人，这里是我的解决方案，感谢上面的评论
关于页面提交和重新加载
Jquery的.live
将处理它。在JS中，只需添加以下内容
$（“#类别_表单”）.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;
});

希望这对任何遇到这个问题的人都有帮助。
感谢上面的评论，这里是我的解决方案
关于页面提交和重新加载
Jquery的.live
将处理它
$（“#类别_表单”）.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;
});

希望这有帮助！
为什么不使用提交按钮？我想要一个图像。出于某种原因，我一直假设input type='image'
与type='submit'
共享相同的属性……我试过onclick，onsubmittype='image'
是一个提交按钮。@Musa-我不知道：）为什么不使用提交按钮？我想要一个图像。出于某种原因，我一直假设input type='image'
与type='submit'
共享相同的属性。我试过onclick，onsubmittype='image'
是一个提交按钮。@Musa-我不知道：）你会建议然后完全删除表单吗？你会建议然后完全删除表单吗？这个答案帮助我走上了正确的方向。return false
不合适肯定是一个绊脚石。解决了这个问题后，我实际上只是从html中删除了onsubmit
，并使用jquery: $（“#category_form”）.live（'submit'，function（）{/code>这个答案帮助我朝着正确的方向前进。返回false肯定是一个绊脚石。解决了这个问题后，我实际上从html中删除了onsubmit
，并使用jquery:$（'category_form'）.live（'submit'，function（）{
自jQuery的1.9版起，live已替换为.on。自jQuery的1.9版起，live已替换为.on