Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

JQuery/Ajax Help

Posted on 2014-07-18
5
Medium Priority
?
510 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 34

Accepted Solution

by:
Big Monty earned 2000 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 34

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 54

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 54

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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses

783 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