I'm having an application using jquery-easyui using an Accordion on the Web page.
The HTML Code of Accordion is:
<div id="taskAccordion" class="easyui-accordion" data-options="multiple:false" style="width:500px; height:300px;">
<div title="Java" style="padding:10px;">
<p>This is Java.</p>
</div>
<div title="PHP" style="padding:10px;">
<p>This is PHP.</p>
</div>
<div title="JS" style="padding:10px;">
<p>This is JS.</p>
</div>
</div>
I want ao add a new Item into Accordion with JS in runtime.
The JS-function for adding is:
function addItem(){
$('#taskAccordion').accordion('add',{
title: 'Perl',
selected: false,
content:'This is Perl.'
});
}
The question is:
The new Item is under the Item "JS".
How can I add the Item on the top as the first one? Before the "Java"
Thank you!
You can change the position of the item immediately after it is added. The following function moves the last element to the beginning of the accordion. In case you want to move the element to a different position you simply need to specify ids to the existing elements and then modify the selector accordingly.
function addItem(){
$('#taskAccordion').accordion('add',{
title: 'Perl',
selected: false,
content:'This is Perl.'
});
$('#taskAccordion').prepend($("#taskAccordion").children().last());
}
1.delete old panels
2.add new panel
3.add old panels
But, the solution is foolish. hh
Related
I'm trying to find a link in my navbar, nested like so:
<div class="menu logged-out" id="loggedoutmenu">
<a href="/users/auth/twitter?state=navbar_basic" data-no-instant>
<div class="option"> via Twitter</div>
</a>
</div>
I've tried using the following methods and none of them have worked:
find_link("via Twitter")
find_link("via Twitter", {href: "/users/auth/twitter?state=navbar_basic"})
find('div', {class: 'option'})
Not really sure how to grab that element... The main goal is to test the link via click_link.
Edit:
Here's the full HTML structure:
<body>
<div class="top-bar" id="top-bar">
<nav>
<--- other nav elements not listed --->
<div class="navigation-butt desktop" id="navigation-butt">
<div class="menu logged-out" id="loggedoutmenu">
<a href="/users/auth/twitter?state=navbar_basic" data-no-instant>
<div class="option"> via Twitter</div>
</a>
</div>
</div>
</nav>
</div>
</body>
I'm guessing the menu is collapsed and you haven't done anything to open it, so the link isn't actually visible on the page. Assuming you just need to click on the '#loggedoutmenu' item to open the menu you could do something like
find('#loggedoutmenu').click.click_link('via Twitter')
which will click on 'loggedoutmenu' then look for the link inside it, and click the link when found. If clicking on '#loggedoutmenu' isn't how you open the menu then you'll need to provide more info.
Update: You have now indicated that the menu opens on hover - so assuming the user has to hover over an ancestor of the button you want to click you can do
find('<css selector for the visible element the user needs to hover over>').hover.click_link('via Twitter')
Writing my solution as an extension of Thomas Walpole's, which lead me to getting it. Thanks again, Thomas!
find('#navigation-butt').hover.click_link(href:"/users/auth/twitter?state=navbar_basic")
Edit: Updated my answer since the previous explanation was incorrect.
I have a jQuery UI dialog with several tabs, sometimes, I need to pop up one of those tabs as a separate dialog (atop of tabbed initial dialog), so, can I achieve this by re-using the same dialog?
(of course with a bit run-time customizations, JavaScript/DOM HTML manipulations, but with the same <div></div> template initially defined and with the same HTML FORM elements IDs)
This is not the optimal solution, but could be an approach of what should you do.
HTML:
<div id="dialog" title="Basic dialog">
<div class="dtabs">
<ul>
<li>First
</li>
<li>Second
</li>
<li>Third
</li>
</ul>
<div id="tab1">
<p>First!</p>
</div>
<div id="tab2">
<p>Second!</p>
</div>
<div id="tab3">
<p>Third!</p>
</div>
</div>
</div>
<input value="Tab 1 on Dialog" type="button" alt="1" />
<input value="Tab 2 on Dialog" type="button" alt="2" />
<input value="Tab 3 on Dialog" type="button" alt="3" />
Javascript:
$(function () {
// Dialog without autoOpen just to hide it from viewport
$('#dialog').dialog({
autoOpen: false
});
$('input').click(function () {
// Clone the dialog and append it to body
// Get "tab" number to know which tab should I set as active later
var d = $('#dialog').clone().appendTo('body'),
tab = $(this).attr('alt')-1;
// Assign "dialog" behaviour and remove it when I close it
d.dialog({
autoOpen: false,
close: function (e, ui) {
$(this).dialog('destroy').remove();
}
});
// Tabs inside my dialog has "tabs" behaviour by JQueryUI
d.find('.dtabs').tabs({
active: tab
});
// Open up!
d.dialog('open');
});
});
http://jsfiddle.net/franverona/k7cuH/
Let me explain you what I did:
I create my dialog in pure HTML and using JQueryUI assign it a dialog behaviour.
Every button has a property that will tell me later what tab should I open in my future dialog.
When user click on button I clone my previous dialog, append it to body and get "tab" attribute. Then I assign it a dialog behaviour without autoOpen and with a function associated to close event to remove it from DOM (to avoid multiple dialogs on my HTML body).
Before open, I assign a tabs behaviour to all the content inside my recently created dialog (look that I'm using find function) and set as an active tab the correct tab using tab property retrieved before.
Now I'm ready to open my dialog with all set up.
I repeat: this isn't an optimal solution, but should work as a prototype of later development iterations.
Happy coding!
I am using jquery mobile and a dialog to display some multiple select boxes. Some of the content is dynamically created with Ajax based on the selections. I would like to make the Ajax call when the dialog is closed (through the regular x button). The main parts of the html look as follows:
<a href="#queryPage" data-rel="dialog" data-transition="slidedown" >Filter Results</a>
<div data-role="page" id="queryPage" data-theme="a">
<div data-role="header" data-theme="a">
<h1>Select Filters</h1>
</div>
<div data-role="content">
<form action="" method="get" id="filterForm">
<fieldset id ="filterFields"></fieldset>
</form>
</div>
</div>
I am currently making the call by running the code on page hide as follows:
$('#queryPage').live('pagehide', function(event) {
//code for ajax call
});
However, I would like to make the call when the dialog closes because some of the select lists are large and they create a new page that hides the queryPage even though the dialog has not been closed. I have tried:
$('#queryPage').bind('dialogclose', function(event) {
alert('closed');
});
and also tried
$('#queryPage').dialog({close:function(event, ui){
alert("closed");
}});
These I have put in a function called on page load but the alert is not shown when the dialog is closed. Any help will be appreciated.
There are no specific events for dialogs as they are simply pages that are displayed as a dialog. Try the pagehide event.
$("#MyDialog").bind("pagehide",function(){
alert("Dialog closed");
});
Also, the first line of your sample code has a link that is outside of a <div data-role="page"> which should not be done.
Pagehide can be delegated as such:
$(document).delegate("#MyDialog", "pagehide", function() {
alert("Dialog closed");
});
and you will also have access to the screen elements of the calling page.
Andleer shared the appropriate event for closing the dialog using jquery. however, we can also code in this way.
$(document).on("pagehide","#Dialog",function(){
console.log('Dialog has closed.');
});
Behold: a footer template:
<!-- Templates -->
<script type="text/template" id="templateFooter">
<div data-role="navbar">
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</script>
In every mobile page I have:
<div data-role="footer" data-position="fixed">footer</div>
The way I'm currently loading the template is:
$(function() {
$('div[data-role=footer]').html($('#templateFooter').html());
$.mobile.activePage.trigger('create');
});
This works, but I don't really like using $(function(), but I need to load it if any page shows, so pageinit or pageshow does not help. I'll be using knockout.js going forward, if that is of any help.
Is there a better way to do this?
function getTemplateFooter() {
//return footer text here
}
$("div:jqmData(role='page')").live("pagebeforecreate",function() {
// get the footer of the page
// if footer doesn't exist on page, insert it where you want it... in this case after role="content"?
var $content =$(this).page().find('div:jqmData(role="content")');
$content.after(getTemplateFooter());
}
there is also a pageshow event, that one fires even if the user navigates to the page, through a back button press etc... it bubbles up to the page div
I use it for pages where lots of dynamic data could change between subsequent visits, or even when the user just presses back
any help gratefully received
I am trying to get a tab to be active ("clickable") only if there is content present within the div. The content will come from a php sql query.
In it's simplest form
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li>Hello</li>
<li>Goodbye</li>
</ul>
<div id="tabs-1">
if Query returned result, echo results, tabs-1 active
</div>
<div id="tabs-2">
if Query returned 0 results, nothing to echo tabs-2 inactive
</div>
</div>
I guess the active/inactive part does not have to be based on the query result - number of characters in the div or size of div may both be indicators I could use to see if the div is empty.
I know very little about javascript so if there is a solution out there is it possible you could explain it as you were speaking to a small child...
Many thanks in advance and I hope my question is clear enough.
You can intercept the tab change event using select, something like:
$("#tabs").tabs({
select: function(event, ui) {
if ($(ui.panel).html().length < 1) {
alert('no content!');
return false;
}
}
});