当我更改为Google JQuery库时，JavaScript不工作？ [英] Javascript not working when I change to Google JQuery Libraries?
问题描述
以前，我使用的是来自这里的JQuery库
http://jquery.com/download/
http://code.jquery.com/jquery-migrate-1.2.1.min.js
我试图包含下面的代码，它完美地工作。
Javascript
$（document）.ready（function（）{
function loading_show（）{
$（'＃loading'）。html（< img src ='images / loading.gif'/>）。fadeIn（'fast'）;
}
函数loading_hide {
$（'＃loading'）。fadeOut（'fast'）;
}
函数loadData（page）{
loading_show（）;
$ .ajax
（{
类型：POST，
网址：listcontact.php，
data：page =+ page，
success：function（msg）
{
$（＃con）。ajaxComplete（function（event，request，settings）
{
loading_hide（）;
$（＃con）。html（msg）;
}）;
}
}）;
}
loadData（1）; //首次加载页面默认结果
$（'＃con .pagination li.active'）。live（'click'，function（）{
var page = $（this）.attr（ 'p'）;
loadData（page）;
}）;
$（'＃go_btn'）。live（'click'，function（）{
var page = parseInt（$（'。goto'）。val（））;
var no_of_pages如果（page！= 0&& page< = no_of_pages）{
loadData（page）; $ parseInt（$（'。total'）。attr（'a'））;
b $ b} else {
alert（'在1和'+ no_of_pages之间输入一个PAGE）;
$（'。goto'）。val（）。focus（）;
返回false;
}
}）;
}）;
HTML
< div id =con>
< div class =data>< / div>
< div class =pagination>< / div>
< / div>
然后我尝试从Google使用JQuery js代替JQuery.com
ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
标签菜单仍然可以工作，但是我无法从listcontact.php获取任何数据
我如何使它在Google JQuery中工作？
这是我所有的脚本标记
< script src =jquery-1.9.1.js>< / script>
< script src =http://code.jquery.com/ui/1.10.3/jquery-ui.js>< / script>
< script type =text / javascriptsrc =ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js>< / script>
这是我的标签菜单
< nav>
< div id =tabs>
< ul>
< li>< b>< a href =＃tabs-1>更多详情< / a>< / b>< / li>
< li>< b>< a href =＃tabs-2>联络人< / a>< / b>< / li>
< li>< b>< a href =＃tabs-3>档案< / a>< / b>< / li>
< li>< b>< a href =＃tabs-4>销售管道线< / a>< / b>< / li>
< li>< b>< a href =＃tabs-5>通话报告< / a>< / b>< / li>
< / ul>
< div id =tabs-1>
<？php //include('viewdetail.php'）;？>
< / div>
< div id =tabs-2>
<？php
if（$ view == 0）
{
include（'contact.php'）;
}
else
{
include（'newcontact.php'）;
}
？>
< / div>
< div id =tabs-3>
<？php //include('filemanagement.php'）;？>
< / div>
< div id =tabs-4>
开发中
< / div>
< div id =tabs-5>
<？php //include('callReport.php'）;？>
< / div>
< / div>
< / nav>
代码位于我的联系页面中，当我尝试将其包含在我的标签中时
你在本地开发吗？或者远程访问？
如果您是本地用户，您通常需要在http：//上添加Google apis
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js>< /脚本>
如果不是，那么只需....
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js\"> ;</script>
应该可以...
还应该将 .live（）替换为 .on（），因为.live（）现已弃用。
$ b $ （'click'，'＃go_btn'，function（）{
var page = parseInt（$（'。goto' ）.val（））;
var no_of_pages = parseInt（$（'。total'）。attr（'a'））;
if（page！= 0&& page< = no_of_pages）{
loadData（page）;
} else {
编辑/更新
您发布了这个...
< script src =jquery-1.9.1.js>< / script>
< script src =http://code.jquery.com/ui/1.10.3/ jquery-ui.js>< / script>
< script type =text / javascriptsrc =ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min。 js>< / script>
更改为...
< script type =text / javascriptsrc =// ajax.googleapis.com/ajax/libs/jquery/1.10.1/ jquery.min.js>< /脚本>
< script src =http://code.jquery.com/ui/1.10.3/jquery-ui.js>< / script>
jquery需要高于jquery-ui，因为ui对Jquery有依赖性，你可以删除v1.9没有意义加载jquery两次
编辑3
我会改变这个..你不需要ajaxComplete调用，因为成功函数正在这样做......
$ .ajax
（{
type：POST，
url：listcontact.php，
data：{page：page}，
success：function（msg）
$ b loading_hide（）;
$（＃con）。html（msg）;
}
}）;
你确定要改变你的live（）的???
你有两个，另一个应该看起来像这样...
$ p $ $（ （'click'，'#con.pagination li.active'function（）{
var page = $（this）.attr（'p'）;
loadData（page） ）;
}）;
Previously I am using JQuery library from here http://jquery.com/download/
http://code.jquery.com/jquery-migrate-1.2.1.min.js
I try to include the following code, it work perfectly.
Javascript
$(document).ready(function(){
function loading_show(){
$('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function loadData(page){
loading_show();
$.ajax
({
type: "POST",
url: "listcontact.php",
data: "page="+page,
success: function(msg)
{
$("#con").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#con").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#con .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
});
HTML
<div id="con">
<div class="data"></div>
<div class="pagination"></div>
</div>
And Then I try to use JQuery js from Google instead from JQuery.com https://developers.google.com/speed/libraries/devguide#jquery
ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
The Tab menu still can work, however I cannot get any data from listcontact.php
How can I make it work in Google JQuery?
this is all my script tag
<script src="jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
This is my tab menu
<nav>
<div id="tabs">
<ul>
<li><b><a href="#tabs-1">More Details</a></b></li>
<li><b><a href="#tabs-2">Contact</a></b></li>
<li><b><a href="#tabs-3">Files</a></b></li>
<li><b><a href="#tabs-4">Sales pipeLine</a></b></li>
<li><b><a href="#tabs-5">Call report</a></b></li>
</ul>
<div id="tabs-1">
<?php //include('viewdetail.php') ;?>
</div>
<div id="tabs-2">
<?php
if( $view == 0)
{
include('contact.php');
}
else
{
include('newcontact.php') ;
}
?>
</div>
<div id="tabs-3">
<?php //include('filemanagement.php') ;?>
</div>
<div id="tabs-4">
Under Development
</div>
<div id="tabs-5">
<?php //include('callReport.php') ;?>
</div>
</div>
</nav>
The code is inside my contact page, when I try to include it inside my tab
Are you developing locally? Or remotely?
If you are local....you usually have to attach http:// to the google apis
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
If not then just....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Should work...
This should also be replaced...from .live() to .on() as .live() is now deprecated
$('body').on('click','#go_btn', function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
EDIT / UPDATE
You posted this...
<script src="jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Change to this...
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
The jquery needs to be above the jquery-ui, as the ui has a dependancy on Jquery, and you can remove v1.9 no sense in loading jquery twice
EDIT 3
I would change this...you don't need that ajaxComplete call, since the success function is doing that anyway...
$.ajax
({
type: "POST",
url: "listcontact.php",
data: {page: page},
success: function(msg)
{
loading_hide();
$("#con").html(msg);
}
});
And you made sure to change both your live()'s???
You had two, the other one should look like this...
$('body').on('click','#con .pagination li.active' function(){
var page = $(this).attr('p');
loadData(page);
});
这篇关于当我更改为Google JQuery库时，JavaScript不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
