我想从输入表单传递数据到我的编码器控制器,然后通过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);
}
我不明白的是,为什么你不在你的表单上使用提交按钮,和编码器控制器应该echo
而不是return
。这里有一个解决方案,无论你的形式。
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
}
for your controller:
public function findcategory()
{
$page['content'] = 'hello-testing';
echo json_encode($page); // echo and not return for codeigniter
}
假设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;
}
对于碰巧遇到这个问题的人,这里是我的解决方案,感谢上面的评论。
关于页面提交和重新加载。
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;
});
希望这对你有帮助!
您的表单可能正在进行POST操作,导致刷新。
花> form标签中拿出来放到a标签中
<a href="#" onclick="return findcat();">Click</a>