Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

JQuery/Ajax Help

Posted on 2014-07-18
5
Medium Priority
?
494 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 33

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 33

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 53

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 53

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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…

722 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