CODEWITHSUNDEEP
javascriptjqueryhtml
Ryan
Ryan

Reputation: 155

Javascript not working when I change to Google JQuery Libraries?

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

Upvotes: 1

Views: 3665

Answers (4)

weia design
weia design

Reputation: 1330

I had experience with similar issue, it may deal with deprecated functions! check EACH piece of function, so that deprecated methods are corrected :) Hope this help you go to somewhere right :) deprecated-ajax-or-jquery-command-cause-no-result-returned Enjoy!

Upvotes: 0

Kylie
Kylie

Reputation: 11759

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);
            });

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

Looks like live might not work with the latest version

Replace 

.live('click'

with 

.on('click'

If there are any dynamically added elements on the page replace your events with this syntax

$(staticContainer).on('click', 'selector'  function(){

Where staticContainer is the closest static ancestor of the element.

selector is the element to which you want to attach the event.

Upvotes: 0

medBouzid
medBouzid

Reputation: 8442

try to include the same version JQuery from google :

Number of version JQuery from google should be equal number of version JQuery from Jquery website

but if you want to use recent version, there are some changes , and you should modify something in your code, see log console for more info about problem and check documentation of JQuery here

Upvotes: 0

Related Questions