How does a person use jQuery UI controls to dynamically load data?

Posted on 2015-02-09
Last Modified: 2015-02-16
How does a person dynamically load jQuery UI (like a tab control for example) controls with data and vice versa upload data from them? Is this a good way to use these kinds of controls? Examples and links to examples and or literature about the ideology or methodology behind this would all be helpful.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//">
<script src="//"></script>
<script src="//"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
$(function() {
$( "#tabs" ).tabs();
<div id="tabs">
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>

Open in new window

Question by:mikesExpertExchange
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
  • 3
  • 2
  • 2
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 400 total points
ID: 40599633
You have a few options to load data with the jQueryUI Tabs. By default, you can just supply a URL in the href and it'll be dynamically loaded when the tab is activated. You can read the Docs here:

If you want to do some processing before or after loading the data, you can hook into various events, such as activate, beforeActivate, load etc. Have a look at the tabs API here and read through the docs for the various Events:

General, dynamic content is often loaded using what's known as AJAX, and jQuery has various methods for doing this. Again, the jQuery docs are your best source of information and contain some simple demos and source code to get your teeth into

Author Comment

ID: 40599638
@Chris: Thank you I will look through them over the next couple of days and get back. Either way this seems like the answer to my question. Thank you.
LVL 34

Expert Comment

ID: 40601650
greeting mikesExpertExchange, , doing an effective user "Tab" browser interface is not that easy, or strait forward thing to accomplish, if you do not have the HTML, CSS and javascript skills to do that task.  There are many many prebuilt "Tab" browser javascript add-on available to use. But they too need some experience , especially if you need to implement an exchange with your server database through AJAX, to process user input, , as you say - "upload data from them". I hope you find some ways , for this, but for us experts to be much help, you may need to tell some more about what you need as user input, and as your final result (database, page output) for that page to work.
Turn Insights Into Action

You’ve already invested in ITSM tools, chat applications, automation utilities, and more. Fortify these solutions with intelligent communications so you can drive business processes forward.

With xMatters, you'll never miss a beat.


Author Comment

ID: 40601703
@Slick812: Thank you for your reply. This will be an on going process, a "work in progress" as my company tries to effectively take some of our websites mobile. I'm sure I will have more detailed and specific questions as I move forward. To your point, and if it helps at all, one of the main concepts we're presently trying to get a grasp of and have a better understanding of, is, what is the best way to communicate to our database if we decide to use jQuery UI controls? Again, I realize that this is a "situation by situation" experiment and thus each hurdle will need to have its details explained so that appropriate suggestions and direction can be given.
LVL 34

Assisted Solution

Slick812 earned 100 total points
ID: 40601757
OK, I begin to see, , but since this is for a specifically "Mobil" situation, that adds additional programming hassles to have effective "responsive" user views, and a complex (interactive) visual presentation. It is true that "jQuery UI controls" can produce many options need for "situation by situation" experiment, but they do need much adjustments, for changing opinions in the development team's changing viewpoint on function and display.
LVL 43

Accepted Solution

Chris Stanyon earned 400 total points
ID: 40602856
Whether you're working with standard websites or mobile-specific websites, the principles remain the same. Your site is coded using standard HTML and CSS - this is the client-side of your web site. If you need to dynamically load data from your database, then you need a 'bridge' - to allow the client-side web page to talk to a server-side script (often coded in PHP but other options are available). The easiest way to implement this bridge is usually with an AJAX request - very simple using jQuery. This script can pass data from the client-side to the server-side. The server-side script can then use that data for processing, such as querying or updating a database (or anything else you need), and then it passes any information you want back through the AJAX response, allowing your client-side jQuery script to handle that data back - for example, displaying to the user.

All jQuery UI controls are effectively part of the HTML markup, so they can be updated dynamically, just like any other element in your page.

The AJAX requests all happen in the background, so your webpage becomes more responsive.

Have a good read through the AJAX doc from jQuery and you'll soon start to see how this client->server communication takes place. Once you've got your head around that, then you'll be able to do some pretty cool stuff on your site.

Author Closing Comment

ID: 40612329
Thanks to you both for your input / responses / answers!

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

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…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…

689 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