I'm trying to add new tab (runtime). The addTab function:
function addTab(name,url,ctx) {
var tabs = $("#tabs");
tabs.find( ".ui-tabs-nav" ).append('<li>Nazwa <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>');
tabs.tabs("refresh");
}
The original code for tabs is:
<div id="tabs" class="tabs-bottom" style="background:url(/images/bg_document.png) top center no-repeat;">
<ul>
{foreach from=$master_structure item=item}
<li>{$item->nazwa}</li>
<li>{$item->nazwa}</li>
{/foreach}
</ul>
<div class="tabs-spacer" style="height:0px"></div>
</div>
(the params are not used, because i reduced code to sure values)
I'm very surprised, when I saw new second tab bar with totally new tabs.
It looks like all < li > tags are transformed to tabs.... (those from tab_index.html)
Is it a bug or i have to mark somehow other li tags to be ignored by refresh?
edited:
Now I know, that there is no problem with more < li> - in testing enviroment it works, so the problem has to be somewhere else... but still don't know where...
the source on jsFiddle: http://jsfiddle.net/Sledgehammer/hCdRy/, tab_index.html is:
<ul class="box-menu main-menu">
<li class="active">e-sklep</li>
</ul>
<table class="panel-table">
<tr>
<td><span style="cursor:pointer" onclick="$.addTab();">PRESS HERE TO ADD TAB</span></td>
</tr>
</table>
It was a bug! As you can see here:
http://bugs.jqueryui.com/ticket/9584
Related
I am currently am trying to get this below function working. I would like to use a relative path in order to add an active class for my different ul li a tag in my dom. The problem I am facing is that despite splitting the URL, it doesn't appear to be checking and comparing right part of the url and href. here is an of my HTML structure:
<div class="parent-bar"> <ul> <li>
<a class="parent-link" href="/dummy-parent-2/">
<div class="wrap">
<span class="text">Parent page 2
</span>
</div> </a> <div id="child-menu-1" class="child-menu">
<ul>
<li>
<a href="/dummy-parent-2/dummy-child-1/" class="child-links">
<div class="wrap">
<span class="text">child page 1
</span>
</div>
</a>
</li>
</ul> </div> </li> </ul> </div>
and here is the jQuery supposed to be tracking the url:
jQuery(function($) {
var path = window.location.href;
path = path.split("/");
$(".parent-link").each(function() {
if (this.href === path[3]) {
$(this).addClass('active');
}
});
if($('.parent-link').hasClass('active')){
$('.child-links').addClass('active');
}
});
The console is not showing any errors. I can see the active class is not added. The reason I am looking to do this is to allow the children of the parent items to be active as well. I will apply the same principle to the children to track the parent's respective URL. if that makes sense.
Any help or insight would be much appreciated.
I am creating a Tizen Web App for wearable device and i want to route to a certain point on a separate page but anchor tags don't seem to be working. They route me to the page, but just to the top of the page.
I've tried these 3 options, the first one routes me to the top of the page no matter how far down the tag is and the other two don't work at all.
I've also tried doing it with the second page in a seperate HTML using href="flags.html#A" and this also routed to the top of the page.
I also tried using 'name' instead of 'id' and a 'div' tag in place of an 'a' tag with the same results.
<div class="ui-page ui-page-active" id="main">
<div class="ui-content">
<ul class="ui-listview">
<li><a href="#flags">A
<i>Alfa</i></a></li>
<li><a href="#flags#B">B
<i>Bravo</i></a></li>
<li><a href="#flagsC">C
<i>Charlie</i></a></li>
</ul>
</div>
</div>
<div class="ui-page" id="flags">
<header class="ui-header">
<h2 class="ui-title">Select Flag</h2>
</header>
<div class="ui-content">
<a id="A">A-Alfa</a><br>
<a><b>International Call Signals</b><br>I have a diver down; keep well clear at slow speed</a><br>
<a id="B">B-Bravo</a><br>
<a><b>International Call Signals</b><br></a><br>
<a id="flagsC">C-Charlie</a><br>
<a><b>International Call Signals</b><br>Affirmative</a><br>
</div>
</div>
Any help would be hugely appreciated
Not the cleanest solution but i ended up using a javascript function to achieve my goal.
function loadPage2(flagSelection) {
window.localStorage.setItem("flagSelected", flagSelection);
location.href="flagsPage.html";
}
triggered by;
<li><a onclick=loadPage2("#A");>A
<i>Alfa</i></a></li>
<li><a onclick=loadPage2("#B");>B
<i>Bravo</i></a></li>
<li><a onclick=loadPage2("#C");>C
<i>Charlie</i></a></li>
and on the second page;
var flagSelection = window.localStorage.getItem("flagSelected");
function jumpToFlag() {
location.href="#";
location.href=flagSelection;
}
const load = () => {
console.log("load event detected!");
}
window.onload = jumpToFlag();
We upgraded from Angular 4 to Angular 8.1 and a lot of our drop downs are broken. From what I can tell they all contain these two style classes: the class js-dropdown and js-dropdown-menu. We can't find where these style classes are coming from or how they work. It's hard to search these terms on google because there's no way to have a must-include for hyphens, that I know of. Here's an example of the html:
<div class="select-wrapper" id="searchOption">
<li class="dropdown nav__item is-parent" tabindex="0" style="outline: 0" (blur)="closeDropdown($event)">
<div class="select-dropdown js-dropdown">
<span class="selection">{{ searchType }}</span>
<i class="nav__icon nav__icon--dropdown"></i>
</div>
<ul class="details-search nav__menu js-dropdown-menu">
<li (click)="optionSelected($event, 1)">
<a class="nav__link">Option 1</a>
</li>
<li (click)="optionSelected($event, 2)">
<a class="nav__link">Option 2</a>
</li>
<li (click)="optionSelected($event, 3)">
<a class="nav__link">Option 3</a>
</li>
</ul>
</li>
</div>
Does anyone have any insight to the class js-dropdown and js-dropdown-menu and how to fix them after this upgrade?
Update: so i think i found out where the js-dropdown style class comes from.... it doesn't come from any style... it's just used as a label and component.js looks for that label to show or hide it. The now is that component.js function isn't getting called. Anyone know how to fix this?
$('#app-container').on('click', '.js-dropdown, .js-dropdown-menu > *', function(event){
event.preventDefault();
var that = this;
var parent = $(this).closest('.is-parent');
//is our dropdown open?
if(!parent.hasClass('is-open')){
//... then open it.
parent.addClass('is-open');
//handle clicking away
$(document).one('click', function closeMenu(docEvent){
//if the parent does not contain the clicked element...
if($(parent).has(docEvent.target).length === 0) {
//close it.
parent.removeClass('is-open');
} else {
// else, set up another listener to check the next user click.
$(document).one('click', closeMenu);
}
});
} else {
// ...else we close it.
parent.removeClass('is-open');
}
event.stopPropagation();});
Figured it out. We were not loading a components.js file (as well as other scripts) in the angular.json file. Our previous version of angular did not contain an angular.json file.
I am not able to click on the link nestled inside a list tag.
Here is the HTML code:
<div class="sideBarContent" ng-include="'routes/sidebar/sidebar.tpl.html'">
<div id="innerSidebarContent" ng-controller="SidebarController">
<div>
<ul class="menuItems bounceInDown">
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/">
<li id="menuConfigurator" ui-sref="configurator" ng-click="closeMobileMenu()" href="/configurator/">
<span class="menuIcon regularImage blueHighlight activated icon-selectAndTailor"></span>
<span class="menuIcon icon-selectAndTailor_active activeImage">
<p class="mainMenuLabel multiLine">Select & Tailor Methods</p>
</li>
I tried all these ways to locate the text and click on it:
describe('Test objects in /configurator/ route', function() {
it('Click on select and tailor banner icon', function(){
//element(by.css('ul.menuItems > li[href=/configurator/]')).click();
//element(by.className('menuIcon icon-selectAndTailor_active activeImage')).click();
//element(by.css("li[#id='menuConfigurator' and #href='/configurator/']")).click();
//element(by.id('menuConfigurator')).click();
//element(by.xpath("//div[#class='sideBarContent']/p")).click();
//element(by.css("#menuConfigurator > p")).click();
//element(by.partialLinkText('Select & Tailor Methods')).click();
element(by.linkText("Select & Tailor Methods")).click();
console.log('in the configspec ...');
})});
Can someone help me resolve this?
Just had the same issue.
It turned out that wrapping the list in a < div > block was the problem.
Once the list was moved to be outside any < div > block the < a > tags worked.
li can not have href attribute
Use
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()"></li>
Or
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/"></li>
Instead of
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/"></li>
According to html this is not link.
Select it using other selectors:
element(by.className("multiLine")).click();
element(by.css(".mainMenuLabel.multiLine")).click();
element(by.css("[class='mainMenuLabel multiLine']")).click();
element(by.xpath(".//p[#class='mainMenuLabel multiLine']")).click();
I am trying to output the link in list "li" from json data and pass it to jquery mobile elements. But the link on "li" seem output like regular link (link with blue color instead of properly listview jquery mobile) after I append with jquery, and did not show attribute css for jquery mobile.
Don't know if I explain it correctly, but what am I doing wrong here??
<?php include "_header.php" ?>
<div data-role="header" data-theme="c">
<div align="center">
//some code
</div>
</div><!-- /header -->
<div data-role="content">
<div align="center"><img src="imgs/charmchasers-m.png" alt="Charmchasers logo" width="250px" ></div>
<div class="content-primary">
<ul data-role="listview" data-inset="true" data-theme="e">
<li>
<h3>North America</h3>
<p>H-D Dealer Charms - USA & Canada.</p>
<ul data-role="listview" data-filter="true" data-theme="c" data-inset="true" id="state-list">
</ul>
</li>
<li>
<a href="display.php?state=international" data-transition="slide">
<h3>International</h3>
<p>H-D Dealer Charms - Asia & Europe.</p>
</a>
</li>
<li>
//some code
</li>
<li>
//some code
</li>
</ul>
</div>
</div><!-- /content -->
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>New Charms</li>
<li>//some code</li>
</ul>
</div><!-- /navbar -->
<script>
(function() {
var json_url = 'http://localhost:8888/MOD/charmchasers/app/mysql-to-json.php';
$.getJSON(json_url, function(data){
$.each(data, function(i, item) {
$('#state-list').append('<li>' + see_abbrv(item.d_state) + '</li>');
});
});
}) ();
</script>
Any idea??
Every time new content is added jQuery Mobile needs to be forced to enhance page markup. It can be done in numerous ways, and if you want to find out more take a look at this ARTICLE, to be more transparent it is my personal blog. Or take a look HERE.
This function should be used:
$('#state-list').listview('refresh');
And code needs to be changed like this:
(function() {
var json_url = 'http://localhost:8888/MOD/charmchasers/app/mysql-to-json.php';
$.getJSON(json_url, function(data){
$.each(data, function(i, item) {
$('#state-list').append('<li>' + see_abbrv(item.d_state) + '</li>');
});
$('#state-list').listview('refresh');
});
}) ();
One more thing to remember, this line must be used inside a $.getJSON but after $.each loop finishes with content appending. In the end one last thing to remember, if possible classic jQuery DOM ready functions should not be used with jQuery Mobile, page events should be used instead, find more about it HERE.
"if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup." - http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
So after appending the new list items you have to trigger the create event to build the listview. try:
$('ul').listview('refresh');
or
$('ul').trigger('create');
EDIT:
try this inside the $.each() loop:
$('#state-list').append('<li>' + see_abbrv(item.d_state) + '</li>').listview('refresh');
I just added .listview('refresh'); at the end of each append. If the list view is already initialized it should work.