Jquery

Making Beautiful JQuery Graphs With JqPlot by Eric on February 1, 2020

One of the best ways to make a page of data better is having a nice, visual way of looking at the data and graphs and charts do a great job of that.  Figuring out which graph works best for your situation is up to you but in almost all of the cases jqPlot has a way of rendering that on your website.  JqPlot is an open-source project with a ton of features, graph and chart types, and visual options to make wonderful graphs for your site.  Today I'm going to go over a few of the different types of graphs and then give some more advanced tips on using jqPlot.Line Graph and Others One of the big features of jqPlot is its plug-ability.  You don't need to load every jqPlot script in on every page you only need to load in the relevant script used for the graphs on your page.  This cuts down on loading time and makes your code easier to read. Line graphs are the most basic of graphs and they are so easy to setup with jqPlot.  Below is the code and the result.  I've inserted it as an image ...

Getting Started With jQuery by Eric on February 1, 2020

I write a lot of posts that use jQuery but I haven't gone through the basics of getting started with jQuery on your new website.  There are just a couple of steps that you need to do to get started with using jQuery and getting it started right. The first thing you'll need to do is load jQuery into your website.  The easiest way to do that is to add the following line inside the <body> of your base HTML template that will be used throughout the site.<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> Google hosts a number of web libraries and they are a great way to get the latest version of various libraries without have to hit your servers with serving those same files.  If you are using an older version, or an altered version, of jQuery you'll want to host it yourself but this is the simplest way to get started. Once that has been loaded into the <body> of your base HTML file you can start writing JavaScript using jQuery.  The best way to ensure...

Bootstrap Tabs with Dynamic Content Loading by Eric on February 1, 2020

Bootstrap comes with a lot of different JavaScript tools to make your website more user friendly.  Today I'm going to cover Tabs and then give a more advanced example for making your tabs have dynamic content using AJAX.  We all know what tabs look like and in a website they can be very useful to group similar content without having to create a new page for each chunk of data.  Below is an example of the basic Bootstrap tabs.<ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li class=""><a href="#profile" data-toggle="tab">Profile</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li> <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li> </ul> </li> </ul> <div...

JQuery Find, Parents, and Siblings by Eric on February 1, 2020

A very important tool when working with JQuery is the ability to traverse through elements in the DOM.  When a user clicks on a button you may want to change the color of the nearest row to display the click.  Maybe after an input you want to change the nearest column to be hidden or show that input value.  Whenever you need to walk through the elements in your page JQuery has a way to do it.  All of the methods shown here can be called with no arguments but are more helpful if you call them with a selector of some kind either an id, class, or element type. The first question you have to ask yourself is where is the element I'm looking for from my current location?  For instance, that button that was clicked is on a row.  The row element contains the button so we need to travel upwards.  When traveling up you can do one of two things, $.parent() or $.parents().  The difference between the two is that the latter travels more than just a single level in the DOM.  Obviously that makes...

jQuery Drag and Drop Image Upload by Eric on February 1, 2020

As we continue to push forward on development our users have asked for a robust way of dragging and dropping images and linking them to a work order.  I was putting this off for a while because I thought it would be a pretty difficult task but after a few Google searches I found a great jQuery plugin from blueimp called jQuery-File-Upload.  Take a look at their demo and check out how awesome it is.  We didn't need any of the fancy bells and whistles that came with the Basic Plus UI so this tutorial focuses on just the Basic but you can scale yours how you'd like.  The tutorial will also focus on getting it to work and save to a MySQL database through Django. To start off let's get the drag and drop area set up on our page.  To do that you'll need to add these things to your HTML template, Django tags are added because that is what we are using to render the page.image_upload.html{% block css %} <!-- jQuery Upload Files --> <link rel="stylesheet" href="{% static 'jQuery-File...