Context: We can't use the full semantic ui library due to security reason. So I want to try the individual semantic ui dropdown module, because it is very good solution for a lot of data entry scenarios.
The following code works when I reference the full library, but doesn't work when I reference the individual module.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="~/lib/semantic-ui-dropdown/dropdown.css"/>
</head>
<body>
<select class="ui dropdown">
<option value="1">Email</option>
<option value="2">Text</option>
</select>
<script src="~/lib/jQuery/dist/jquery.js"></script>
<script src="~/lib/semantic-ui-dropdown/index.js"></script>
<script src="~/lib/semantic-ui-dropdown/dropdown.js"></script>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
I dug into the problem, and find the generated html is like the following:
<div class="ui dropdown selection" tabindex="0">
<select>
<option value="1">Email</option>
<option value="2">Text</option>
</select>
<i class="dropdown icon"></i>
<div class="text">Email</div>
<div class="menu" tabindex="-1">
<div class="item active selected" data-value="1">Email</div>
<div class="item" data-value="2">Text</div>
</div></div>
The result is a big UI box like control showing "Email" and when you click on it, nothing happens.
I think the problem maybe the "selection" class added to the end of the top level div. Just my guess.
Could anyone point out where I did wrong? Really want to get this working. Love the semantic ui dropdown solution.
found the cause of this problem.
semantic-ui-dropdown has an dependency on semantic-ui-transition...
just reference semantic-ui-transition before semantic-ui-dropdown will do.
just add this to the end script in your index.html
<script>
function callDropdown(){
$('.ui.dropdown')
.dropdown();
}
setTimeout(callDropdown, 3000);
Related
Browser-sync has a feature called "Interaction sync" that allows you to "scroll, click, refresh and form actions are mirrored between browsers while you test.", however it doesn't seem to work for the onchange event.
While React component `onChange` event not being triggered when synced with BrowserSync refers to it not working for React, it doesn't even work in a simple html with js.
A number of the forms we use have conditionally dependent fields, and this prevents you from completing a form of this type. Is there a way around this?
I have included a simplified version of this form below. To test this out:
take a copy of the below snippet and save it as an html file
navigate to the directory containing the html
open a command prompt, navigate to the html file, and run
browser-sync start --server
browser-sync will launch a browser containing the default url (http:localhost:port), append "/test.html" to the url
copy the url to another browser
You'll see that while the selection of the dropdown mirrors, the event and associated javascript don't fire.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
.hide{
display:none !important;
}
</style>
</head>
<body>
<form>
<h1>Conditional Form</h1>
<label>dependee</label>
<select name="radioGroup" id="radioGroup" onchange="displayDependent();">
<option value="-1">--</option>
<option value="radio1">radio1</option>
<option value="radio2">radio2</option>
</select>
<div id="text1Group" class="hide">
<label>text1</label>
<input type="text" name="text1">
</div>
<div id="text2Group" class="hide">
<label>text2</label>
<input type="text" name="text2">
</div>
<div id="text3Group">
<label>text3</label>
<input type="text" name="text3">
</div>
</form>
</body>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
function displayDependent() {
var dropDownSelect = document.getElementById('radioGroup').value;
// hide both
if (dropDownSelect == "-1") {
$("#text1Group").addClass("hide");
$("#text2Group").addClass("hide");
}
// show 1 hide 2
if (dropDownSelect == "radio1") {
$("#text1Group").removeClass("hide");
$("#text2Group").addClass("hide");
}
// show 2 hide 1
if (dropDownSelect == "radio2") {
$("#text2Group").removeClass("hide");
$("#text1Group").addClass("hide");
}
}
</script>
</html>
Doesn't look like it is available at this time.
Stumbled upon this github issue, shortly after:
https://github.com/BrowserSync/browser-sync/issues/22
I am using materialize framework for ui design. If you look at my code , the dropdown doesn't show. Please help.
<div class="input-field col s3">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">USD</option>
<option value="2">CAD</option>
<option value="3">HDK</option>
</select>
<label>Select Currency</label>
</div>
You must initialize the select in your JavaScript. Put the following code just before closing your bodytag and it should work fine.
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
First you must include file jquery in your html before your file materialize.js, then you must initialize the select element. In addition, you will need a separate call for any dynamically generated select elements your page generates.
Modify your code, see: Select Materialize
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('select').material_select();
});
</script>
I have added complete code for materialize select in one html file. I have added JavaScript code bottom of the body which should be your problem for not working the code. When you create separate flies, you should add JavaScript and css files' paths to your html code relevant order.
<!DOCTYPE html>
<html>
<head>
<title>Select</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body class="row">
<!-- your code start -->
<div class="input-field col s11 m11 l11">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">USD</option>
<option value="2">CAD</option>
<option value="3">HDK</option>
</select>
<label>Select Currency</label>
</div>
<!-- your code end -->
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
When you add external libraries or files to your html file the order is important.
You must be sure that you initialize the select with jquery or JS.
Copy paste this line in your code in the document ready:
$('select').material_select();
<head>
<body>
<div id="page" class="container">
<div id="header">
<div id="mainmenu">
<div class="breadcrumbs">
<div class="container">
<div id="content">
<h1>
<link type="text/css" rel="stylesheet" media="screen" href="css/dropdown/dropdown.css">
<link type="text/css" rel="stylesheet" media="screen" href="css/dropdown/themes/default/default.css">
<ul id="nav" class="dropdown dropdown-horizontal">
<li class="dir">
<li class="dir">
<li class="dir">
<font color="black">Retrieve</font>
<ul>
<li>
wa1i-AFU R1S1
</li>
<li>
I am using selenium to automate testing but got stuck in generating xpath of one auto drop down select element.
This is a auto drop down and select element in webpage. Can anyone help what should be xpath of wa1i-AFU R1S1 for this to use in selenium webdriver ?
I would suggest to go for css instead since css is better in terms of performance.
a[href$='default/retrieveWa1ir1s1service']
Translation: Finds the anchor where href ends with default/retrieveWa1ir1s1service
The possible xpath for this is: //a[text()='wa1i-AFU R1S1']
and the corresponding cssSelector/csspath is: a:contains(^wa1i-AFU R1S1$)
Sometimes, you can use absolute xpath which you can get by using Firebug and Firepath
I would suggest you to read this post:
XPath Tutorial
It had solved many of my xpaths issues
Having trouble constructing a button dynamically with jQuery Mobile. Copy and run. See notes in code.
<!DOCTYPE html>
<html>
<head>
<title>MSC Pre-Close Application</title>
<meta charset="utf-8"/>
<!-- standard Jquery/jQuery Mobile Libraries -->
<script src="jquery.mobile/jquery.js"></script>
<script src="jquery.mobile/jquery.mobile.js"></script>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile.css" />
<BR/>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline">
<h1>Main Menu</h1>
</div>
<div class="ui-body ui-body-c">
<div data-role="content">
<div class="ui-block-a"><button id="click_me" type="submit" data-theme="a" data-icon="home">Click me to change the button to my right</button></div>
<div class="ui-block-a"><button class="cl_pre_phone1" type="submit" rel="external" data-theme="a" data-icon="home">Primary Phone</button></div>
<script>
$(document).ready(function()
{
// this changes the label but not the href action.
$(".cl_pre_phone1").html("<a href='google.com'> Google</a>");
$("#click_me").click(function() {
alert("this should change the text and href of the button!");
// here I would like to change the value as well as the href action, but it does not work.
$(".cl_pre_phone1").html("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>").reload(true);
});
});
</script>
You're getting messed up by the enhancement which jQM does. Your button is getting rewritten to:
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Primary Phone</span>
<span class="ui-icon ui-icon-home ui-icon-shadow"></span></span>
<button class="cl_pre_phone1 ui-btn-hidden" type="submit" data-theme="a" data-icon="home" aria-disabled="false">Primary Phone</button>
One way round this would be to change the call inside the callback to:
$(".cl_pre_phone1").attr("href", "http://yahoo.com").parent().find(".ui-btn-text").text("Yahoo");
or you could replace the whole ui-block-a div.
I am trying to use the Dojo/Dijit declarative menu with Spring ROO 1.1.4, but even if I replace the complete roo generated menue.jspx with the example (ligthly addapted) from the Dojo/Dijit hompage, it does not replace the decorated menu divs with the menu.
that is how it look
that is how should look:
My modified menu.jspx
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:menu="urn:jsptagdir:/WEB-INF/tags/menu"
xmlns:sec="http://www.springframework.org/security/tags"
version="2.0">
<jsp:directive.page contentType="text/html;charset=UTF-8" />
<jsp:output omit-xml-declaration="yes" />
<script type="text/javascript">
dojo.require("dijit.MenuBar");
dojo.require("dijit.PopupMenuBarItem");
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require("dijit.PopupMenuItem");
</script>
</head>
<div dojoType="dijit.MenuBar" id="navMenu">
<div dojoType="dijit.PopupMenuBarItem">
<span>
File
</span>
<div dojoType="dijit.Menu" id="fileMenu">
<div dojoType="dijit.MenuItem" onClick="alert('file 1')">
File #1
</div>
<div dojoType="dijit.MenuItem" onClick="alert('file 2')">
File #2
</div>
</div>
</div>
<div dojoType="dijit.PopupMenuBarItem">
<span>
Edit
</span>
<div dojoType="dijit.Menu" id="editMenu">
<div dojoType="dijit.MenuItem" onClick="alert('edit 1')">
Edit #1
</div>
<div dojoType="dijit.MenuItem" onClick="alert('edit 2')">
Edit #2
</div>
</div>
</div>
</div>
</jsp:root>
Can anybody give me a hint what I am doing wrong?
(I know the fallback to do the menu programmatic, but I want to do it declarative.)
The html header is looks like that:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
...
<script type="text/javascript">var djConfig = {parseOnLoad: false, isDebug: false, locale: '${fn:toLowerCase(userLocale)}'};</script>
<script src="${dojo_url}" type="text/javascript"><!-- required for FF3 and Opera --></script>
<script src="${spring_url}" type="text/javascript"><!-- /required for FF3 and Opera --></script>
<script src="${spring_dojo_url}" type="text/javascript"><!-- required for FF3 and Opera --></script>
<script language="JavaScript" type="text/javascript">dojo.require("dojo.parser");</script>
<spring:message code="application_name" var="app_name"/>
<title><spring:message code="welcome_h3" arguments="${app_name}" /></title>
</head>
I don't knows anything about Spring Roo, so maybe I'm saying something very stupid here...
Is that menu.jspx compiling into some static html? If this is the case, you can tell Dojo to parse your initial page simply by setting parseOnLoad to true on your djConfig
var djConfig = {parseOnLoad: true, ...}
(no need to require dojo.parser in this case).
On the other hand, if that template is inserted dinamicaly, you will need to call dojo.parser.parse() on the root 'navMenu' node yourself. You seem to be require-ing it, but I don't see where it is being called.
I had to use:
{
dojo.addOnLoad(function(){
dojo.parser.parse();
});
}
instead of parseOnLoad:true