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

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

Michael SterlingWeb Applications DeveloperAsked:
Who is Participating?
Chris StanyonConnect With a Mentor Commented:
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.
Chris StanyonConnect With a Mentor Commented:
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
Michael SterlingWeb Applications DeveloperAuthor Commented:
@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.
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

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.
Michael SterlingWeb Applications DeveloperAuthor Commented:
@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.
Slick812Connect With a Mentor Commented:
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.
Michael SterlingWeb Applications DeveloperAuthor Commented:
Thanks to you both for your input / responses / answers!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.