How can I load ajax content clicking in a link in an accordion and add that content to jquery ui tabs?
I want something like this PARAM QUERY
I'm just starting with javascript and jquery so I don't know how to achieve this
Thanks
You can add a new tab to the jQuery UI tabs header and then trigger the refresh function and select that new tab. Here is a code snippet that should help:
var $mytabs = $('#mytabs'),
$accordion = $('#accordion'),
addTab = function() {
var time = new Date().getTime();
$mytabs.find('ui-tabs-nav').filter(':first').append('<li>New Tab!</li>').tabs('refresh');
$mytabs.tabs('refresh').tabs('select', 'data.php?t=' + time
};
$accordion.accordion({
activate: addTab
});
Related
I've got a navbar outside the page div in a footer (it is on every page) I tried to do a simple fix for the persistent active state of the navbar It worked for the tabs on one of the pages but does not seem to work for this.
Actually, everything works except for some reason ui-btn-active does not get added
Here is the code
$(document).one( "pageinit", function() {
$('div[data-role="footer"] [data-role="navbar"] a').click(function(e) {
$(this).html("abc");
$('div[data-role="footer"] [data-role="navbar"] .ui-btn-active').removeClass('ui-btn-active ui-state-persist');
$(this).addClass('ui-btn-active ui-state-persist');
});
});
The html of the anchor changes, ui-state-persist gets added on the last line but ui-btn-active just does not get added for some reason...
Ok it seems jquery mobile automatically removes ui-btn-active on page transition, even if your navbar is out of page div (which I find kind of lame...) It seems it does this on or after pagebeforeshow, because this did not work with that event... so I just used pageshow instead.
Here is the working code:
var navbar;
$(document).on("pageshow", function() {
if(navbar) {
$(navbar).addClass('ui-btn-active')
}
});
$(document).one( "pageinit", function() {
$('div[data-role="footer"] [data-role="navbar"] a').click(function() {
navbar = $(this);
});
});
I am trying to add item into listview of jquery mobile dynamically. I add item using a ngClick event and show list using ngRepeat. I have called listview refresh but the latest item cannot style properly. Which event should I use to refresh properly? Thanks.
$scope.addItem = function () {
$scope.userList.push($scope.userInputText);
$scope.userInputText = null;
$("#listview1").listview("refresh");
}
http://jsfiddle.net/hFj2T/
The following directive works for me. Just add list-view to your ul tag and also the data-watch="userList" to tell angular which object to watch for changes.
<ul list-view data-watch="userList" data-role="listview" data-filter="true" >
<li ng-repeat="user in userList">{{user.name}}</li>
</ul>
app.directive('listView', function () {
var link=function(scope, element, attrs) {
$(element).listview();
scope.$watchCollection(attrs.watch, function() {
$(element).listview("refresh");
});
};
return {
restrict: 'EA',
scope:false,
link: link
};
});
Give a timeout for styling the list view:
$scope.addItem = function () {
$scope.userList.push($scope.userInputText);
$scope.userInputText = null;
setTimeout(function(){
$("#listview1").listview("refresh");
},100);
}
This is happening because both JQuery UI and Angular are attempting to update the DOM using the document ready event. A race condition is occurring in which Angular is adding the new data after JQuery has already created the listview. Sheetal's solution works because it forces JQuery to modify the DOM and create the listview after Angular has populated the data.
Another solution is a tool aptly called the jquery mobile angular adapter
I have been tooling around with this all day and can't figure it out...
I have a list of buttons (utilizing the jQuery UI buttonset() functionality) and I am wanting to keep the ui-active class even after I hover off of a button, but for some reason, jQuery UI functionality keeps removing the class and erases the highlight from the button (this is bad because the user then wouldn't know what button they are on).
Here is the code so far:
function showSection(sectionIndex){
$('.listSection').hide();
$('#listSection' + sectionIndex).show();
$('.listSectionHeader.ui-state-active').each(function(){
$(this).removeClass('ui-state-active');
});
$('#listSectionHeader' + sectionIndex).addClass('ui-state-active');
}
var buttons = $( "#listHeader a" );
$.each(buttons, function(){
$(this).bind('mouseleave.button', function(){
if($(this).hasClass('ui-state-active'))
return;
});
});
Something like this: http://jsfiddle.net/4yamQ/ ? Would require an extra class in the css such as:
ui-state-active,
ui-mycustomclass
{
jquery ui styling...
}
Edited to add the solution suggested by #alistair-laing.)
After reading this post reply by #jek, I could make multiple links on my page that would pass an id variable through the URL so that the content of the dialog could be loaded in on the fly. However, I really want this to be a modal dialog:
(edited to include the fix; nb: the original script was in the post linked to above, all I did was break it)
$(function (){
$('a.ajax').click(function() {
var url = this.href;
var dialog = $('<div style="display:none"></div>')
.appendTo('body')
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
modal: true,
width: 500
});
}
);
//prevent the browser to follow the link
return false;
});
});
quiet a few things. Try move the content from your first .dialog into your second .dialog which you call as part of the the .load callback. What youare doing is creating dialog then injecting content into it only to call it again. You could also remove the the autoOpen so that the dialog opens with the content.
This post talks about the problem that jQuery tabs is still having with the back button. What the customer needs is fairly simple - when they press back, they want to go back to what they were just looking at. But jQuery tabs loads the first tab, not the one that was selected when the user left the page.
I've read the accompanying link and it says "It is planned and Klaus is working on it whenever he finds the time."
Has anyone solved the back button problem with jQuery UI tabs?
Using the solution to the history problem easement posted, a dirty fix for the back button problem would be to periodically check the location.hash to see if it has changed, and if it has, fire the click event of the appropriate link.
For example, using the zachstronaut.com updated jQuery Tabs Demo, you could add this to the $(document).ready callback, and it would effectively enable the back button to switch tabs, with no more than a 500ms delay:
j_last_known_hash = location.hash;
window.setInterval(function() {
if(j_last_known_hash != location.hash) {
$('#tabs ul li a[href="'+ location.hash +'"]').click();
j_last_known_hash = location.hash;
}
}, 500);
Have you tired updating the browsers location as you switch tabs?
http://www.zachstronaut.com/posts/2009/06/08/jquery-ui-tabs-fix.html
if you had a class on your tab container that was tabContainer, to update the url when user clicks a tab, you could do this:
$(".tabContainer").tabs({
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
});
then, instead of firing click, you could use the tabs select method if you have some getIndexForHash method that can return the right tab number for the selected hash value:
var j_last_known_hash = location.hash;
window.setInterval(function() {
var newHash = location.hash;
if(j_last_known_hash != newHash) {
var index = getIndexForHash(newHash);
$('.tabContainer').tabs("select",index);
j_last_known_hash = newHash;
}
}, 100);
window.onhashchange = function () {
const $index = $('a[href="' + location.hash + '"]').parent().index();
$('.tabContainer').tabs('option', 'active', $index);
}