Solved

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

Posted on 2015-02-09
7
193 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:mikesExpertExchange
  • 3
  • 2
  • 2
7 Comments
 
LVL 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 400 total points
Comment Utility
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:mikesExpertExchange
Comment Utility
@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 33

Expert Comment

by:Slick812
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 1

Author Comment

by:mikesExpertExchange
Comment Utility
@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 33

Assisted Solution

by:Slick812
Slick812 earned 100 total points
Comment Utility
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 42

Accepted Solution

by:
Chris Stanyon earned 400 total points
Comment Utility
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:mikesExpertExchange
Comment Utility
Thanks to you both for your input / responses / answers!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
.net VBA word safemode 1 23
Library to convert HTML to PDF. 8 44
CSS Divs in Safari 3 18
Different Delete Messages 7 10
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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now