On my page I want to disaply a Polymer Paper-Dialog so I wrote an own element that looks like this:
<polymer-element name="my-dialog" constructor="MyDialog" extends="paper-dialog" noscript>
<template>
<span>I'm a dialog!</span>
</template>
</polymer-element>
Now I tried to display the dialog with this JS code:
var dialog = new MyDialog();
dialog.toggle();
But the dialog does not show up. Any ideas why?
When you are creating a new Dialog in your javascript function, you aren't adding it to the DOM anywhere. So, when you call toggle on it, it tries to show/hide a dialog that hasn't been added to the page.
If you want this to work, you should be adding the markup for the dialog to your html, getting a reference to that element in javascript, and then calling toggle.
Something else you could consider doing is looking at the Core-Overlay polymer element. It handles a lot of the dialog functions for you, and even allows you to shade everything that isn't in the dialog itself.
Related
I work with Jade (pug) and Nodejs.
I created a dropdown button, so that user can choose an item, but it didn't show in the application. There is no dropdown there. I've already use display:block and clean the browser cache. But still stuck here.
Here is my .pug file:
.filters-nav
.btn-group.m-r-15
button.btn.btn-inverse.dropdown-toggle.waves-effect.waves-light.btn-custom(type='button', data-toggle='dropdown', aria-expanded='false')
span.btn-label
i.fa.fa-filter
| Add filters
span.caret
ul.dropdown-menu.filters-dropdown(role='menu')
li
a(href='#', data-filter='table_1_filter_0') Instrument ID
li
a(href='#', data-filter='table_1_filter_1') Instrument Code
I wonder if it is CSS, but all I know is CSS doesn't related to element visibility at all.
Maybe this will help, its pug plus the css
li.dropdown.btn.btn-default
span.glyphicon.glyphicon-th-list
............
https://codepen.io/thehumanscience/pen/qbLepW
Is there a way to force a new window for this menu action? I can't see anything. i was thinking of adding a class, and some JS code to redirect if the class is there.
If your only intent is to open a window in a new tab, then why don't you set the target="_blank" in your transformation or where ever you are generating the HTML markup?
I am not saying that it's incorrect, however it's just that you can avoid js for this and rather do it in HTML.
Here's what i've done.
In the Navigation panel, i added the class 'nw'. I have this snippet add the target attribute.
// we need to use .nw as a class to indicate that a link should open in a new window.
$('.nw a, a.nw').each(function(i,v){
var $this = $(this);
$this.attr('target','_blank');
});
You can use the JS option and put in JS like: window.open("http://www.google.com");
In an XPages application I've been given the following HTML code for a navigation bar which will be used to select which of three different Custom Controls display:
<ul class="Navigation">
<li>Option One</li>
<li>Option Two</li>
<li>Option Three</li>
</ul>
I know lots of ways to display or hide Panes or Divs or Custom Controls from buttons or code but I can't figure out how to do it from a simple HREF call. I've tried hiding a div using dojo which works in CSJS in a button but not here, and using CSJS to set a sessionScope variable which of course doesn't work:
<li>Option One</li>
<li>Option Two</li>
I'd appreciate any help with this. Thanks very much in advance!
If you want to hide a custom control based on url. I believe that's can be done via the dynamic content control that comes with the ext library or 9.0x. I might have the name wrong but should be close. I think there's an example in the ext library demo app that you can get from OpenNTF.
You could hide the whole <li> element by using a panel:
<xp:panel tagName="li" rendered="...">
...
</xp:panel>
Just calculate the rendered property with your logic for that panel element.
Use XSP.partialRefreshGet() or XSP.partialRefreshPost() to refresh your panel with all custom controls from client side. Set a parameter "option" with the current value.
javascript:XSP.partialRefreshGet("#{id:panelAll}", {params: {'option': 'One'}}
Refresh the panel on server side testing the delivered option with
param.option == 'One'
and render your sub panels accordingly.
If it must be
href="optionOne"
or similar, you could try with
href="currentpage.xsp?nav=optionOne"
and use param.nav in your code to find out which option is selected. Much like Knut's idea, but then doing a full refresh.
I am considering buying the pro version of this plugin, but I want to confirm that I would be able to create a text link , such as "CLICK HERE" that will trigger a lightbox slider show to pop up. Can this plugin does this easily?
There are a LOT of light box plugins and code snips, so it is tough to say, but you should be able to utilize some jQuery javascript to manipulate the click event to do what you desire to do. You could make a div area to hide until needed to show the lightbox, if needed, or just inject it into the body of the document...
<script>
$('popupDiv').hide();
var lightboxCode = '<span>Whatever code your plugin uses to display here</span>';
$('#showButton').click( function() {
$('popupDiv').html(lightboxcode);
$('popupDiv').show();
});
</script>
Using Watir I have been able to isolate this button element:
<BUTTON id=authButton class=commandButton onmousedown="$('newOrder:hiddenAuth').click();">Authorize Payment</BUTTON>
Here is my watir code:
$browser.div(:id, "rSide:j_id750_body").table(:index, 0) [1] [0] .button(:index, 0).click
I was able to see I'm on the <button> by using watir's "flash" method to highlight the button. For some reason I am unable to actually click the button. I think it might have something to do with the onmousedown code but I really don't know. Any help would be greatly appreciated.
The button is wired up to do some specific action when it see's the onmousedown event, so if .click is not working, the next thing to try is firing that specific event, instead of using the .click method.
If that doesn't work try forcing the javascript to execute the newOrderLhiddenAuth script.
oh and FYI for your developer, they may want to get into the habit of using lower case for their HTML tags
"the World Wide Web Consortium (W3C) recommends lowercase in HTML 4,
and demands lowercase tags in XHTML."