I'm using the Moovweb SDK, and writing Tritium to modify my HTML.
How do I save a CSS class as a variable?
I want to grab an existing class and apply it to other elements.
You can use the fetch tritium function to get the value of the class attribute in the element you're looking for and store it in a variable.
So given the following html:
<html>
<head>
<title> Tritium Tester </title>
</head>
<body>
<div id="one" class="random"></div>
<div id="two"></div>
</body>
</html>
You could write the following Tritium:
html() {
$("/html/body") {
$class_name = fetch("./div[#id='one']/#class")
$("./div[#id='two']") {
add_class($class_name)
}
}
}
Here's a live example link: http://play.tritium.io/331dfa6d01a7dd52261a9eaf812bdc5c7fb8c293
Related
I have some sjs code:
#JSExportTopLevel("CCRS")
object JsApi {
#JSExport
def makeJobId: JobId = JobId()
// ...
}
I have the following <body> element, which I'll note is properly finding the sjs-generated .js files since I was using a 3rd party SPA framework previously - though the launcher for that is now commented out:
<body>
<script type="application/javascript" src="ace/ace.js" charset="utf-8"></script>
<script type="application/javascript" src="target/web-client-jsdeps.js"></script>
<script type="application/javascript" src="target/web-client-opt.js"></script>
<!-- <script src="target/web-client-launcher.js"></script> -->
<input type="text"
placeholder="Enter a command:"
value="pwd"
onkeydown="oneShotHandler()" />
<div id="one-shot-demo"></div>
<script type="application/javascript">
var oneShotId = CCRS.makeJobId();
</script>
</body>
Upon page load, I get the following error: TypeError: CCRS.makeJobId is not a function.
Not really sure what I should be looking for in the generated web-client-opt.js file (using sjs 0.6.22 currently, with -P:scalajs:sjsDefinedByDefault). But, I do see this line, which I believe should be doing the export:
$e.CCRS = $m_Lorg_xsede_jobrunner_client_JsApi$();
I realized this just as I was finishing typing my question. The beauty of talking it out.
In Scala.js, I needed to add the () to my method:
#JSExport
def makeJobId(): JobId = JobId()
I want to only hide the P0 paragraph using childNodes[x] . I wonder how it works because it hides the whole div with in this code:
<html>
<body>
<div id="myDiv">
<p>P0</p>
<p>P1</p>
</div>
<button onclick="hideFn();">hide</button>
<script>
function hideFn()
{
document.childNodes[0].childNodes[1].childNodes[1].style.display = "none";
}
</script>
</body>
</html>
</html>
You easily could have found the reason yourself by simply doing the traversal step by step:
document
the document
.childNodes[0]
the documentElement, also known as the root node (<html>)
.childNodes[1]
the <body>
.childNodes[1]
the <div>
Experts,
I need to declare an dynamic ID into a XML view in my extended Fiori app. I need this because I need to set an image src based on Item value.
Is there a way to do something like this?
<Image id="myImage{MyModelProperty}" />
Regards,
Andre
The calculated field will serve your requirement.
1.Set the flag in bootstrap configuration data-sap-ui-xx-bindingSyntax="complex". Details is here
2.Define a formatter function in your controller js.
imageFormatter : function(value) {
var imageSrc = "myImage" + value;
return imageSrc;
}
3.Declare the Image in the XML view as following
<Image src="{path:'MyModelProperty',formatter:'.imageFormatter'}"/>
Hope it will solve your issue.
As far as I know IDs can not be built from model properties.
Why do you want to build the ID of the image instead of it's src property?
If you want to make sure the uniqueness of image ID, then just let the framework to handle it.
If you use the src property with model binding, changes of the underlying model property will take effect on the UI immediately. Just call the setProperty("MyModelProperty", "new_image_postfix") on your model instance.
Short example with a button and it's text binding:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_goldreflection">
</script>
<script type="text/javascript">
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({txt: "Sample"});
sap.ui.getCore().setModel(oModel);
var oButton = new sap.ui.commons.Button({id:"testBtn", text:"{/txt}", press:function(oEvent) { oModel.setProperty("/txt", "SampleUpdated") } });
oButton.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
I have (roughly) this LIFT-ified HTML in my default template:
<html>
<head>
<title>FooBar Application | <lift:bind name="page-title"/></title>
</head>
<body>
<h1><lift:bind name="page-title" /></h1>
<div id="page-content">
<lift:bind name="page-content" />
</div>
</body>
</html>
...and then this in my main template:
<lift:surround at="page-content">
<lift:bind-at name="page-title">Home</lift:bind-at>
</lift>
...which give me this in the generated HTML:
<html>
<head>
<title>FooBar Application | <lift:bind name="page-title"/></title>
</head>
<body>
<h1>Home</h1>
<div id="page-content">
</div>
</body>
</html>
Why is the <lift:bind> tag in the <title> getting escaped, and the one in the <body><h2> not? And how do I prevent that from happening?
Are the pages defined through SiteMap? As was mentioned before, <title> can be a special case, and it is interpreted in several places - some of which might be doing the escaping. If you can, I'd try setting the page title in one of two ways:
Through the Sitemap you can use the Title Loc Param as referenced here: Dynamic title with Lift
You can also have something like: <title data-lift="PageTitle"></title> to have it invoke a snippet called page-title. Where, the snippet would be something like:
class PageTitle {
def render = "*" #> "FooBar Application | Home"
}
I am new to jquery mobile, and am having problems getting content I have inserted dymically using pageinit to display on the first time of the form response page. It displays on subsequent refreshes of the page. I also don't want the content to cache.
I need to use querystring values like ?blah=1&blah=2 as I use these in my call to an external json file.
How should I be doing this? If I use rel="external", and setting ajax to false, I have problems with issues on android. So using pageinit in the header, how do I make the dynamically loaded content (in the example, the time in seconds) in the 2nd page display first time round?
I have simplified the problem into test pages below.
Expected behaviour. When you click on the submit button of the form you go through to the 2nd page which should display the no of seconds taken from datetime
Actual behaviour. The seconds/time does not display on the 2nd page until the page is refreshed.
Elsewhere, I have come across the suggestion to put the pageinit code into the div itself, however this has caused the content to cache on android (ie the no of seconds remains the same), so I don't want to do this.
Any ideas on how I should approach this would be much appreciated
Sample code
=======
Page 1 - form
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page1" data-add-back-btn="true">
<div data-role="content" data-theme="b">
<form action="page_2.htm" method="GET" id="form1" name="form1">
<input type="hidden" name="seconds" value="">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</form>
</div>
</div>
</body>
</html>
===
Page 2 form response page
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-add-back-btn="true">
<div id="job" data-role="content">
</div>
</div>
</body>
</html>
===
custom javascript file called /scripts/myinit.js (included in both pages above)
$('#page1').live('pageinit', function(event) {
var seconds = new Date().getTime();
$('input[name=seconds]').val(seconds);
});
$('#page2').live('pageinit', function(event) {
var querystring = location.search.replace( '?', '' ).split( '&' );
var queryObj = {};
for ( var i=0; i<querystring.length; i++ ) {
var name = querystring[i].split('=')[0];
var value = querystring[i].split('=')[1];
queryObj[name] = value;
}
var seconds = queryObj["seconds"];
$('#job').append("seconds=" + seconds);
});
try changing pageinit by pageshow. i had the same problem and it worked for me
Link to the external file like this:
HTML --
I'm a Link
JS --
$(document).delegate('#external-link', 'click', function () {
$.mobile.changePage('/path/to/file.html', { reloadPage : true });
return false;
});
Setting the reloadPage option for the changePage() function will allow the external page to be refreshed rather than loading the cached version. Since the external page will be refreshed, the pageinit code for it will run when it's initialized and your code should function properly.
Documentation: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html