Solved

JQuery/Ajax Help

Posted on 2014-07-18
5
430 Views
Last Modified: 2014-07-18
Over the years I have pulled several widgets from various places using jquery and ajax and used them in my classic asp sites with good success.  However I really don't know what the heck I am doing and I think it is time to figure it out.  I am in the process of adding a datatable to a site using these technologies.  I am a little fuzzy about what I need to use for plugins.  Here is what I have right now on a page that has a drop down menu and that I am trying to place a datatable on.  Please let me know if there is any redundancy, anything missing, or a better way to do this.  (This is in the page head.)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/drop_menu/menu.css"> 

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.googleapis.com/code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.googleapis.com/cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>

Open in new window

0
Comment
Question by:Bob Schneider
  • 2
  • 2
5 Comments
 
LVL 32

Accepted Solution

by:
Big Monty earned 500 total points
ID: 40205438
It looks like you have 3 versions of jquery loaded, you only need one, so I would go with the latest version:

<script type="text/javascript" src="http://ajax.googleapis.com/code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/drop_menu/menu.css"> 

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.googleapis.com/cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
                                  

Open in new window

0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40205442
one thing to note, when using jquery plugins, you always want to load the main jquery file first
0
 

Author Closing Comment

by:Bob Schneider
ID: 40205445
That is what I thought.  Thanks!!
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40205451
On the samples, they give you the code to start with  http://www.datatables.net/examples/ajax/simple.html

<head>
<link rel="stylesheet" type="text/css" href="/drop_menu/menu.css"> 
<script type="text/javascript" src="http://ajax.googleapis.com/code.jquery.com/jquery-1.11.1.min.js"></script>


<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.googleapis.com/cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
                                  

<script>
$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": "data/arrays.txt"
    } );
} );
</script>
</head>

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

Open in new window


You should load all css first, then js in order.  jquery first, then the plug.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40205453
A point of reference, the code was not entirely correct but good enough.

CSS
Jquery
Other JS
HTML
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS Scroll Issue 3 91
What is assert.deepEqual? 4 39
html form to write data to csv 24 97
How can I echo a PHP variable in AJAX function? 7 35
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now