JQuery 函数有时不起作用
我有 2 个相同的代码块,当它首先从控制器中的索引加载时它可以工作,但是当我提交表单并加载此代码时,我的自动完成功能不适用于字段。
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>public/blue.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" />
<script type="text/javascript" src="<?php echo base_url(); ?>public/jquery-1.6.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('workin');
//$(".publish-bottom").hide();
$(".publish-right").hide();
//title field
$.ajax({
type: "GET",
cache: false,
dataType: 'json',
url: "publishlinks/search_movies",
success:
function(response) {
alert('response received');
alert(response);
$("#title").autocomplete({
source: response,
minLength: 2,
select: function (event, ui) {
var selectedObj = ui.item;
var imgFilename = ui.item;
imgFilename = imgFilename.value;
imgFilename = imgFilename.replace(/ /g,"_");
$(".selected-right").empty();
$(".selected-left").empty();
$(".publish-right").show();
//render selected media
$(".selected-left").append('<a href="<?php echo "#"; ?>"> <img class="movie-img" src="<?php echo base_url(); ?>img_test/' + imgFilename + '"></a>');
$(".selected-right").append('<h4>' + selectedObj.title + '</h4>');
$(".selected-right").append(selectedObj.plot);
//update publication id
$("#movieId").attr("value", selectedObj.movieid);
$("#selected-item").attr("value", "selected");
$(".new-movie").show();
//get selected item's publications
getPublications(selectedObj);
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
var imgFilename = item.label;
imgFilename = imgFilename.replace(/ /g,"_");
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( '<a>' + '<img src="http://localhost/portal/img_test/' + imgFilename + '" width="40" height="63" />' + item.title + '</a>' )
.appendTo(ul);
}
}
});
});
</script>
function search_movies() {
$movies = $this->movie_model->get_movies();
echo json_encode($movies);
}
//works fine
function index() {
$this->load->model('user_model');
$data['user'] = $this->user_model->get_user($this->session->userdata('userid'));
$data['loggedIn'] = $this->is_logged_in() ? true : false;
$this->load->view('header_view', $data);
$this->load->view('publish_links_view');
}
表单提交代码:
//Not working for autocomplete
$error['linksError'] = 'You must select an item to publish links for.';
$data['user'] = $this->user_model->get_user($this->session->userdata('userid'));
$data['loggedIn'] = $this->is_logged_in() ? true : false;
$this->load->view('header_view', $data);
$this->load->view('publish_links_view', $error);
I have 2 identical code blocks, when it is loaded at first from the index in controller it works, but when I submit a form and load this code, my autocomplete isn't working for a field.
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>public/blue.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" />
<script type="text/javascript" src="<?php echo base_url(); ?>public/jquery-1.6.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('workin');
//$(".publish-bottom").hide();
$(".publish-right").hide();
//title field
$.ajax({
type: "GET",
cache: false,
dataType: 'json',
url: "publishlinks/search_movies",
success:
function(response) {
alert('response received');
alert(response);
$("#title").autocomplete({
source: response,
minLength: 2,
select: function (event, ui) {
var selectedObj = ui.item;
var imgFilename = ui.item;
imgFilename = imgFilename.value;
imgFilename = imgFilename.replace(/ /g,"_");
$(".selected-right").empty();
$(".selected-left").empty();
$(".publish-right").show();
//render selected media
$(".selected-left").append('<a href="<?php echo "#"; ?>"> <img class="movie-img" src="<?php echo base_url(); ?>img_test/' + imgFilename + '"></a>');
$(".selected-right").append('<h4>' + selectedObj.title + '</h4>');
$(".selected-right").append(selectedObj.plot);
//update publication id
$("#movieId").attr("value", selectedObj.movieid);
$("#selected-item").attr("value", "selected");
$(".new-movie").show();
//get selected item's publications
getPublications(selectedObj);
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
var imgFilename = item.label;
imgFilename = imgFilename.replace(/ /g,"_");
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( '<a>' + '<img src="http://localhost/portal/img_test/' + imgFilename + '" width="40" height="63" />' + item.title + '</a>' )
.appendTo(ul);
}
}
});
});
</script>
function search_movies() {
$movies = $this->movie_model->get_movies();
echo json_encode($movies);
}
//works fine
function index() {
$this->load->model('user_model');
$data['user'] = $this->user_model->get_user($this->session->userdata('userid'));
$data['loggedIn'] = $this->is_logged_in() ? true : false;
$this->load->view('header_view', $data);
$this->load->view('publish_links_view');
}
Code for form submit:
//Not working for autocomplete
$error['linksError'] = 'You must select an item to publish links for.';
$data['user'] = $this->user_model->get_user($this->session->userdata('userid'));
$data['loggedIn'] = $this->is_logged_in() ? true : false;
$this->load->view('header_view', $data);
$this->load->view('publish_links_view', $error);
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我同意用户555116的观点,我们没有足够的信息。但我确实发现您的代码存在一个问题。这可能是问题,也可能不是。你在这个块中定义了你的函数,你说:
嗯,这是这个的简短形式:
对于这两个块,jquery 所做的就是将代码保存在这些块中。当 jquery 收到 DOM 加载事件时,它会按照您发送给 jquery 的顺序运行每个函数。此外,这些函数中的每一个都不能隐式访问另一个函数。除非您以某种方式创建对文档就绪块内定义的函数的引用,否则它们将在块执行后消失。然而,在这种情况下,更简单(也更正确)的解决方案是简单地从
$(function() { })
中删除函数定义。I agree with user555116, we don't have enough information. But I do see one problem with your code. This may be the issue, may not. You have your functions defined in this block, you say:
Well that, is the short form of this:
For both blocks, all jquery does is save the code in these blocks. When jquery recieves the DOM loaded event, it runs each function, in the order that you sent it to jquery. Also, each of these functions do not implicitly have access to the other. Unless you create a reference to the function defined inside the doc ready blocks in some way, they will disappear after the block executes. However, in this case, the easier (and more correct) solution is to simply remove function definitions that from the
$(function() { })
.