?
Solved

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

Posted on 2015-02-09
7
Medium Priority
?
209 Views
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">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<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>
</ul>
<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>
<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>
<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>
</div>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:Michael Sterling
[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
  • 3
  • 2
  • 2
7 Comments
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 1600 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:

http://jqueryui.com/tabs/#ajax

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:

http://api.jqueryui.com/tabs/

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
0
 
LVL 1

Author Comment

by:Michael Sterling
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.
0
 
LVL 34

Expert Comment

by:Slick812
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.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 1

Author Comment

by:Michael Sterling
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.
0
 
LVL 34

Assisted Solution

by:Slick812
Slick812 earned 400 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.
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 1600 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.
0
 
LVL 1

Author Closing Comment

by:Michael Sterling
ID: 40612329
Thanks to you both for your input / responses / answers!
0

Featured Post

Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

Question has a verified solution.

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

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
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

770 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