Solved

JQuery/Ajax Help

Posted on 2014-07-18
5
425 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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

705 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

19 Experts available now in Live!

Get 1:1 Help Now