I'm trying to use jQuery UI's .tabs() to obtain content via AJAX, but the default behavior is to grab the entire page's content. How would I obtain content from a specific #id and/or multiple #id's?
I have a feeling I will need to use the load: event (http://docs.jquery.com/UI/Tabs#event-load), but I need an assist figuring this out.
Example:
The Page with the tabs that is getting and displaying the tabbed content. I have placed #content after the first #the_tabs link to retrieve in an attempt to obtain that specific region of the content, but the entire page is still loaded.
<div id="tabs">
<div id="tabs_display">
</div>
<ul id="the_tabs">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
</ul>
</div><!-- /#tabs -->
The page being retrieved by the previous markup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Remote HTML Page Example</title>
</head>
<body>
<div id="content">
I want this content
</div>
<div id="other_stuff">
Not this content
</div>
</body>
</html>
the JS (for setup purposes):
$(document).ready(function(){
/* Tabs
--------------------*/
$(function() {
var $tabs = $('#tabs').tabs({
});
});
});
In Jquery-UI 1.9, "ajaxOptions" is depreciated; so instead the code below worked for me:
(ref: http://jqueryui.com/upgrade-guide/1.9/#deprecated-ajaxoptions-and-cache-options-added-beforeload-event)
$(function() {
$( "#the_tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.ajaxSettings.dataType = 'html';
ui.ajaxSettings.dataFilter = function(data) {
return $(data).filter("#content").html();
};
}
});
});
$(document).ready(function(){
/* Tabs
--------------------*/
var $tabs = $('#the_tabs').tabs({
ajaxOptions: {
dataFilter: function(data, type){
return $(data).filter("#content").html();
}
}
});
});
Solution props to Supavisah in #jquery on irc.freenode.net
I have had luck using .find, rather than .filter. Like this:
$(document).ready(function(){
$('#the_tabs').tabs({
ajaxOptions: {
cache : true,
dataFilter: function(data){
return $(data).find('#content');
},
}
});
});
Related
I currently have a mobile site I am building and I am having trouble with integrating a custom JQuery widget. For some reason the the pageshow event is firing twice for whichever page is loaded first.
For ease of understanding I have created two HTML pages
Page 1
<!doctype html>
<head>
<meta charset="utf-8">
<title>One</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).on("mobileinit", function () {
$.mobile.changePage.defaults.reloadPage = true;
});
</script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>
</head>
<body id="default">
<div data-role="page" id="content-one">
<div role="main" class="ui-content" id="one-content">
One<br/>
back to two
</div>
<script type="text/javascript">
(function($, undefined) {
$.widget("test.stuff", {
_create : function() {
console.log("create");
},
_init : function() {
console.log("_init");
},
destroy: function () {
this.element.empty();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
</script>
<script type="text/javascript">
$(document).on("pageshow", "#content-one", function () {
console.log("pageshow1");
$("#content-one").stuff({});
});
$(document).on("pagebeforeshow", "#content-one", function () {
console.log("pagebeforeshow1");
});
</script>
</div>
</body>
</html>
Page 2
<!doctype html>
<head>
<meta charset="utf-8">
<title>Two</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(document).on("mobileinit", function () {
$.mobile.changePage.defaults.reloadPage = true;
});
</script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>
</head>
<body id="default">
<div data-role="page" id="content-two">
<div role="main" class="ui-content">
Two<br/>
back to one
</div>
<script type="text/javascript">
$(document).on("pageshow", "#content-two", function () {
console.log("pageshow2");
});
$(document).on("pagebeforeshow", "#content-two", function () {
console.log("pagebeforeshow2");
});
</script>
</div>
</body>
</html>
To recreate load page one first, navigate to page two using link, then navigate to page one using link.
When page one is loaded again the pageshow event is fired twice. I have the reloadPage set to true as I have dynamic content for my pages and I cannot serve cached pages.
I very well could be using the events incorrectly.
Try substituting your $(document).on("pageshow",...) with $(document).one("pageshow", ...), which restricts the event to one call http://api.jquery.com/one/.
The problem is that using on in the inline script creates a new event each time the page is loaded. So the first time you load the page, the inline script is executed and the pageshow event is triggered. The second time a new event is triggered again, but the first one is still listening to content-one pageshow. In fact, if you repeat the process you'll see the log three, four, ... times.
Another option could be to create a script in the head section which sets up all required triggers in $(document).on("pageshow", "#content-one", ...), $(document).on("pageshow", "#content-two", ...). In this case, the script will only be initialized once, so it will work.
Wasted about 2 hours trying to do all the fixes on here and other sites. I gave up and put an if statement in their to prevent it from firing again
var hasDownload = false;
$(document).on("pageinit", "#mypage",function(event){
if (hasDownload === false) {
hasDownload = true;
// do some work
}
);
Try to remove the page on hide event, like so :
$(document).on("mobileinit", function () {
$.mobile.changePage.defaults.reloadPage = true;
$(docuement).on('pagehide', function (event, ui) {
$(event.target).remove();
});
});
Remenber that if you don't disable ajax, all request will be with AJAX
While their are plenty of posts regarding reloading a jQueryUI tab via the load method, I can't seem to make it work in 1.9+. I wish I could see a way to show this in a fiddle, but as I don't... note that the refresh button/function works every time in the following nested tabs set-up under 1.8+ but works only once under 1.9+, and fails after that. In context, (loading dynamic content via php under wordpress) it doesn't work at all. According to the ajaxStart()ajaxStop() function calls, an ajax call is made every time the refresh button is clicked, however the content (watch the date/time under tab E or tab A/sub parent E) is only reloaded on the first click of the #refresh button, which fails to re-load the tab content on subsequent clicks.
stye.css
div.clear { clear:both; }
#refresh { position: relative; top:-40px; left:300px; }
#loading
{ display:none;
position: absolute;
top:100px;
left:300px;
font-size: 200%;
z-index:1001;
border:3px solid green;
background:#ffffff;
}
tabs.js
jQuery(function()
{ set_tabs();
jQuery('body').on("click", "#refresh", function()
{ jQuery('.tabset ul li a').each(function()
{ var link = jQuery(this);
var tab = link.parent();
var tabset = link.closest('div.tabset');
if(tabset.is(':visible') && tab.hasClass('ui-state-active')) index = link.text().replace(/ /g, '_');
});
jQuery(".tabset").tabs( "load" , index );
});
jQuery("#loading").ajaxStart(function() {jQuery(this).show();});
jQuery("#loading").ajaxStop(function(){ jQuery(this).fadeOut(1500); });
});
function set_tabs()
{ jQuery('.tabset').tabs({ cache:true }); }
index.html
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css" rel="stylesheet"-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="tabs.js"></script>
<link type="text/css" href="style.css" rel="stylesheet" />
<div id="parentTabSet" class="tabset">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<input type='button' id='refresh' value='refresh' />
<div id='loading'>Loading...</div>
<div id="A" class="tabset">
<ul>
<li>A_1</li>
<li>A_2</li>
<li>parent E</li>
</ul>
<div id="A_1"><p>A_1 - FOO</p></div>
<div id="A_2"><p>A_2 - BAR</p></div>
</div>
<div id="B"><p>Div B</p></div>
<div id="C"><p>Div C</p></div>
<div id="D"><p>Div D</p></div>
</div>
tabs_e.html
<script>
jQuery( function()
{ set_tabs();
var d = new Date();
jQuery('#E_1 p').text(d);
jQuery('#E_2 p').text(d);
});
</script>
<div class="tabset">
<ul>
<li>E_1</li>
<li>E_2</li>
</ul>
<div id="E_1"><p>E_1 - BAR</p></div>
<div id="E_2" class='clear'><p>E_2 - BAZ</p></div>
</div>
The .live() function has been deprecated for a while now, and support is completely gone in jQuery 1.9+. Use this:
$(document).on("click", "#refresh", function() {
// your current "live" code
});
So it turns out that not only has the cache option been deprecated in 1.9+ it's legacy behavior has been altered such that (if used) the load method will not reload the tab content.
The approach I've come up with is -- I think -- an abomination which I'm hoping some one might provide a cleaner alternative to. (oh pleeeaazzz!) Anyway, FWIW... here's what I came up with.
tabs.js (revisited)
jQuery(function()
{ set_tabs();
jQuery(document).on("click", "#refresh", function()
{ refresh = {};
refresh.tab = true;
jQuery('.tabset ul li a').each(function()
{ var link = jQuery(this);
var tab = link.parent();
var tabset = link.closest('div.tabset');
if(tabset.is(':visible') && tab.hasClass('ui-state-active')) index = link.text().replace(/ /g, '_');
});
jQuery(".tabset").tabs( "load" , index );
});
jQuery("#loading").ajaxStart(function() {jQuery(this).show();});
jQuery("#loading").ajaxStop(function(){ jQuery(this).fadeOut(1500); });
});
function set_tabs()
{ jQuery('.tabset').tabs(
{ beforeLoad: function( event, ui)
{ if(typeof refresh.tab =='undefined')
{ if ( ui.tab.data( "loaded" ))
{ event.preventDefault();
return;
}
ui.jqXHR.success(function() { ui.tab.data( "loaded", true );});
} else refresh={};
}
});
}
I am working on a web application and was making great progress using JQuery UI Tabs, specifically the 'url' method of dynamically updating the target url of the ajax request which was bound to each tab. I have created a simplified example here:
Each of the 2 Tabs, function 1 & function 2, display the results of some tests based on the parameters that are passed to the test. The tests remain the same throughout, but I was changing the variables used in the functions by manipulating the url bound to the tab. The 'url' method of updating the url being called on a lazy loading Tab allowed me to do this, but its now been deprecated and won't be supported at all soon. So I have been searching for a way to do this using the 'beforeLoad' event in JQuery UI 1.9.
The suggestion was that one could manipulate the ui.ajaxSettings to set the data parameter but there is a bug (http://bugs.jqueryui.com/ticket/8673), and it appears this won't be fixed. The workaround suggested is to manipulate the ui.ajaxSettings.url instead.
My working example is below, but I'm not sure if this is the cleanest / most appropriate way to achieve what I'm after and any suggestions would be most welcome. I struggled to find examples on how to do even this much, so hopefully it will help someone else in a similar situation.
<title> Jquery Tabs AJAX Test</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.9.1.custom.css">
</head>
<body >
<script type=text/javascript>
$(document).ready(function() {
$( '#tabs' ).tabs({ });
$('button.set_variable').click(function() {
var variable = $(this).val();
$( '#tabs' ).tabs({
beforeLoad: function( event, ui ) {
ui.ajaxSettings.url += "&variable=" + variable ;
}
});
var selected_tab = $('#tabs').tabs('option', 'selected');
$( '#tabs' ).tabs("load", selected_tab);
});
})
</script>
<button class="set_variable" value="1">Variable = 1</button>
<button class="set_variable" value="2">Variable = 2</button>
<button class="set_variable" value="3">Variable = 3</button>
<div id="tabs" >
<ul>
<li>Function 1 </li>
<li>Function 2 </li>
</ul>
</div>
</body></html>
N.B. The ajax.php file here just echos back what was passed to it.
<?php
extract($_GET);
var_dump($_GET);
?>
You could do something like this too :
var variable = '';
$( '#tabs' ).tabs({ beforeLoad: function( event, ui ) {
if(variable != '')
ui.ajaxSettings.url += "&variable=" + variable ;
}});
$('button.set_variable').click(function() {
variable = $(this).val();
});
http://jsfiddle.net/DNWzY/1/
I'm building a site which allows users to create an html page which can then be saved and shared on another site. I want them to be able to resize and drag the page elements. I can do this using jQuery, but I'm not sure how I then save that so that when the page is viewed elsewhere, it looks the same.
I haven't decided yet how to store the page info, but what I'm thinking is that I can store each element in the database along with its absolute position, and its contents. Does that sound like a good plan?
If so, how do I get the position for the div to pass to the php so that it can be saved?
Thanks.
JQueryUI Resizable has an event called resize that you can use:
var resposition = '';
$('#divresize').resizable({
//options...
resize: function(event,ui){
resposition = ui.position;
}
});
The same occurs with JQueryUI Draggable and its event drag:
var dragposition = '';
$('#divdrag').draggable({
// other options...
drag: function(event,ui){
dragposition = ui.position;
}
});
resposition and dragposition is going to be arrays. You can see it working here: http://jsbin.com/uvuzi5
EDIT: using a form, you can save dragposition and resposition into hidden inputs
var inputres = '<input type="hidden" id="resposition" value="'+resposition.left+','+resposition.top+'"/>'
$('#myform').append(inputres);
var inputdrag = '<input type="hidden" id="dragposition" value="'+dragposition.left+','+dragposition.top+'"/>'
$('#myform').append(inputdrag);
And in your PHP file to handle the form:
$dragposition = $_GET['dragposition'];
$resposition = $_GET['resposition'];
$dragposition = explode(',',$dragposition);
$resposition = explode(',',$resposition);
Finally, both variables should be arrays with top and left attributes:
$dragposition => [top,left] attributes from draggable
$resposition => [top,left] attributes from resizable
you have to save position at some where so that you can get position
details when next time you open page.
option 1: you can store html elements position details in "localStorage" its default browser storage.
Example: Demo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard</title>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/css/jquery-ui.min.css">
<script src="dist/js/jquery-ui.min.js"></script>
</head>
<body>
<script>
var positions = JSON.parse(localStorage.positions || "{}");
$(function() {
var d = $("[id=draggable]").attr("id", function(i) {
return "draggable_" + i
})
$.each(positions, function(id, pos) {
$("#" + id).css(pos)
})
d.draggable({
containment: "#wrapper",
scroll: false,
stop: function(event, ui) {
positions[this.id] = ui.position
localStorage.positions = JSON.stringify(positions)
}
});
});
</script>
<div id="wrapper">
<div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div1</div>
<div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div2</div>
<div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div3</div>
</div>
</body>
</html>
option 2: you can store html elements position details in "your database"
I'm attempting to create an accordion where I can expand/collapse all sections with a single click. I also need the ability for the user to open and close the sections having 0-n sections open at a time. Using several of the discussions here on stackoverflow and on jquery forums, here's the solution i've come up with:
I've implemented each section as it's own accordion, where each is set to collapsible = true.
<html>
<head>
<title>Accordion Test</title>
<script type="text/javascript" src="../scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui-1.8.4.custom.min.js"></script>
<link rel="stylesheet" href="../_templates/css/jquery-ui-1.8.6.custom.css" type="text/css" />
<link rel="stylesheet" href="../_templates/css/jquery.ui.accordion.css" type="text/css" />
</head>
<body>
<a onClick="expandAll()">Expand All</a>
<br>
<a onClick="collapseAll()">Collapse All</a>
<div id="accordion1" class="accord">
<h5>section 1</h5>
<div>
section 1 text
</div>
</div>
<!-- orders section -->
<div id="accordion2" class="accord">
<h5>section 2</h5>
<div>
section 2 text
</div>
</div>
<!-- section 3 -->
<div id="accordion3" class="accord">
<h5>section 3</h5>
<div>
section 3 text
</div>
</div>
<!-- section 4 -->
<div id="accordion4">
<h5>section 4</h5>
<div>
section 4 text
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
$('#accordion1').accordion({
header: 'h5',
collapsible: true,
autoHeight: false
});
});
$(function() {
$('#accordion2').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});
$(function() {
$('#accordion3').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});
$(function() {
$('#accordion4').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
})
function expandAll() {
alert("calling expandAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":not(:has(.ui-state-active))")
.accordion("activate", 0);
}
function collapseAll() {
alert("calling collapseAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":has(.ui-state-active)")
.accordion("activate", -1);
}
</script>
The problem I'm running into, is when I click the header of an open section, the section is collapsed as expected, but the header still have the "ui-state-focus" class, until I click elsewhere on the page. So what I see in the ui is the header of section just closed has the same background color as my hover effect, until I click elsewhere, and it shifts to the 'default, not focused' color.
In addition, when I use the Collapse All link, all looks great in Firefox. In IE, the last section header has the same hover-focus coloring.
Any suggestions? Do I somehow need to force the accordion to lose focus when it is closed? How would I accomplish that?
After attempting to over-ride my jquery-ui styles on the page, and attempting to hack the accordion javascript to remove the ui-state-focus class, a simple solution came to light.
Because my page is displaying the expected behavior when I click else where on the page, I used blur() to lose focus.
$(document).ready(function() {
// forces lose focus when accordion section closed. IE and FF.
$(".ui-accordion-header").click(function(){
$(this).blur();
});
})
To fix the collapse all issue in IE, I added 1 line to my collapseAll() method.
function collapseAll() {
alert("calling collapseAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":has(.ui-state-active)")
.accordion("activate", -1);
$(".ui-accordion-header").blur();
}
Solution to implement accordion with all open panels. Panels are static and can't be closed.
Do not initialize accordion div with accordion widget!
$("#accordion").addClass("ui-accordion ui-widget ui-helper-reset")
.find('h3')
.addClass("current ui-accordion-header ui-helper-reset ui-state-active ui-corner-top")
.prepend('<span class="ui-icon ui-icon-triangle-1-s"/>')
.next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active");
this is my answer~ hope its help
for multiple open you can do like this by using existing jquery UI just add in a options beforeActivate:
my code below:
$( "#accordion" ).accordion({
header: "> div > h3",
autoHeight: false,
collapsible: true,
active: false,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active',!isPanelSelected)
if (isPanelSelected) { currContent.slideUp('fast'); } else { currContent.slideDown('fast'); }
return false; // Cancels the default action
}
});
refer from :jQuery UI accordion that keeps multiple sections open?
and the function collapse and expand
function accordion_expand_all()
{
var sections = $('#accordion').find("h3");
sections.each(function(index, section){
if ($(section).hasClass('ui-state-default') && !$(section).hasClass('accordion-header-active')) {
$(section).click();
}
});
}
function accordion_collapse_all()
{
var sections = $('#accordion').find("h3");
sections.each(function(index, section){
if ($(section).hasClass('ui-state-active')) {
$(section).click();
}
});
}
that's it..
You can try this small, lightweight plugin.
It will have few options available which we can modify as per our requirement.
URL: http://accordion-cd.blogspot.com/