Given this simplified version of my template:
<template>
<paper-dialog id='dialog_alert' heading="{{title}}">
<p>{{alertText}}</p>
<paper-button on-tap='{{btnAffirmative}}' label='Yes' affirmative autofocus></paper-button>
<paper-button on-tap='{{btnNegative}}' label='No' dismissive></paper-button>
</paper-dialog>
</template>
I'm having trouble finding how how to see which button the user selected after the dialog closes. It doesn't appear that the dialog itself provides any event for it, so I just hooked "on-tap" events onto to the buttons and that seems to work. However, when I use this approach the paper-button element throws up after the click:
Uncaught Uncaught Error:
Bad state: controller overlay-host is not a Dart polymer-element.
When I take the "on-tap" hooks out, no exception, but then I have no idea which button the user pressed. I'm hoping I overlooked something obvious in the documentation.
I should note that, even with the exception, the program continues to execute fine, so I'm just rolling with using the on-tap events for now.
Basically your approach seems fine. The affirmative, dismissive attributes have only influence on where they are added to the dialog (see where and how it is used in the source )
I suppose the error is caused by the Dart wrapper for the JS polymer elements. I would create a bug report at http://github.com/dart-lang/paper-elements.
You could try on-click instead of on-tap because on-tap is a polyfill event - just to be sure.
Related
I want to display a popover, replacing the default browser validation pop-ups.
Since UI only knows click, focus and mouseenter as default trigger to open popovers, i added a custom trigger to the triggermap (described here).
angular.module('myApp',['ui.bootstrap'])
.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({'customEvent': 'customEvent'}); }]);
Which seems to work, as the triggermap does grow, and at some point emits even the new trigger.
Sadly the intended popover never appears and the eval-function before is not called (so no logic or style issue, which would be applied later) when fireing a 'customEvent':
<input id="searchBtn" type="button" class="btn btn-primary" ng-click="..." value="..." popover="test here" popover-placement="bottom" popover-trigger="customEvent">
Using a default trigger like 'click' works perfectly.
$('#searchBtn').trigger('click');
(Alas, using one of the default triggers would be the last resort for me, since it entails some unwanted things...)
Any suggestions ? (using bootstrap-ui 0.13.4)
The 0.13.4 release introduced the *-is-open attribute which allows you to programmatically control when the tooltip/popover is open. See the docs for more info.
If you want to use custom triggers, you need to actually trigger customEvent manually since the browser can't do so for you (since it's not a native event).
I try to write a web-component to create a simple login menu. it has paper-inputs for name and password and a button which fires a script to check the data.
the right data redirect to the next page while false credentials should open a toast element right above the button with an error message, siimilar to this one:
http://www.polymer-project.org/tools/designer/#6f21f8d26e14d614c9cb
Select the paper-toast-element in the tree-view and check the 'opened'-checkbox get get a vision what I try to do and please excuse the strange style.
The problem:
I included this element in my main page, but the toast element is always visible right from the start. and it doesn't react to the button click if I move the toast away with css.
I don't wanna spam this page with my code, so I uploaded it here:
https://gist.github.com/Gemoron/6b8f41d1bb6ff522e23c
I appreciate any suggestion on how to fix the problem.
You cannot access the hidden shadow DOM of an element directly with jQuery's $ function, nor with document.querySelector. Also jQuery is not needed anyway. Use Polymer's automatic node finding utility instead: this.$.paper_toast.
You can access the paper-input values with this.$.name.inputValue. But i would prefer to use data-binding instead: <paper-input value={{name}}>. Then you can access the input value in your JavaScript with this.name.
The function to display the toast is show().
I'm unable to reproduce the issue that the toast is visible right after the page has loaded. On my computer the toast is initially hidden and displayed when i click on the button (Chrome 37, Polymer 0.3.3).
In line 76 you try to use an "open()" method, which does not exist on paper-toast. It should be "show()". You can find paper-toasr API here: http://www.polymer-project.org/docs/elements/paper-elements.html#paper-toast
Also, because the ids in shadow dom are encapsulated, you should be using the id selection mechanism from Polymer instead of jquery-style selector
this.$.paper_toast.show();
More on automatic node finding in Polymer: http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding
Here's jsbin (you might need to refresh as jsbin sometimes breaks with Polymer imports)
http://jsbin.com/fened/1/edit
Is it possible to fire action,actionListener of a <p:commandButton> with attribute type="button". I have a requirement where in a form there are text boxes and command buttons. If I press enter in any text box then commandButton is invoked. So I change all command buttons type to "button". Now problem I am facing that command button's action, actionListener not firing.I want to solve it with out using java script. Also I read this This Link. Can any one tell me where I should edit or change to get expected output. Thanks.
Using type="button" is the wrong solution to prevent enter key from submitting the form. It basically changes the submit button to a dead button which does not submit the form and is only useful for attaching JavaScript onclick and likes. You're simply facing the consequences of this wrong solution. You should not try to fix it, but take a step back and solve the initial problem the right way.
One of the ways is:
<h:form onkeydown="return event.keyCode != 13">
Or, more generically, with jQuery, which skips textareas from the restriction:
$(document).on("keydown", ":input:not[textarea]", function(event) {
return event.keyCode != 13;
});
Note: jQuery is already bundled in PrimeFaces, you do not need to install any scripts separately. Also note that you really can't go around JavaScript here. Even more, PrimeFaces/ajax components rely on JavaScript and wouldn't work anyway without JavaScript.
I am using Django and the django-dynamic-formset plugin to generate a JQuery Mobile (JQM) site. I have nested forms that allow the user to click a "Add" link to another line to the form. This works great without JQM, but when JQM is used to style the form widgets the radio button labels do not trigger the correct radio button.
I have put up a static example of the behaviour, based on the generated HTML. Click the "Add" link, then try choosing a severity for the added item. The "for" attributes of the labels appear to update correctly, so I do not know what I'm doing wrong.
The django-dynamic-formset guide provides me with a way to call a JavaScript function after the user clicks the "Add" button, but I do not know if there's a JQM method I should be calling that will fix the issue. When I use JQM's enhanceWithin function it triggers a page load, which submits my form to Django, which I don't want at that point because the form won't validate yet.
Edit: I uploaded a much better example to the same URL.
After enough caffeine and peanut M&M's I have figured it out.
Reason for Failure: The django-dynamic-formset (DDF) plugin duplicates the form you give it. But the form is cloned as-is, which already includes all the JQuery Mobile (JQM) processing. This causes JQM to ignore it and makes the radio buttons misbehave.
The Solution: The DDF plugin allows you to specify what form to clone by its formTemplate parameter. JQM allows you to disable automatic mobile-enhancement of certain elements. Create an un-enhanced version of your form, and pass that to DDF as your formTemplate.
More Details:
I put this coded into my HTML head, before the reference to JQM:
<script>
$(document).bind('mobileinit',function(){
$.mobile.ignoreContentEnabled = true; // required for using the natural forms
});
</script>
And included this style to hide my "natural" form:
<style>
.natural-form { visibility: hidden; display: none; }
</style>
In the Django code I added a <div class='natural-form> and put a dummy version of my form in it (being sure to surround it another <div> with a unique ID for reference later). In my initialization of DDF I give it the unique ID as the parameter to formTemplate.
I was told on another forum I would have to hack DDF and JQM to get this to work. I am impressed at the design of both of these libraries - flexible enough that a newbie to JQuery can stick all the pieces in the right places and get something out of it.
I need to run some code on focus and blur events on elements that were injected into the DOM after page load. So I am using Zepto's on (Zepto's on link) to run the code but it doesn't work for me.
Here is my jsfiddle in which I am trying to make it work - http://jsfiddle.net/ashfame/zR2xL/
Your on declaration was a little off in the original JSFiddle. When you use the .live() "version" of .on() you select the document with Zepto (because, I believe, that's what the .live() function does behind the scenes) then apply the .on() method and pass it the parameters event, selector, and function. It looks something like this:
$(document).on(event, selector, function);
Check out this JSFiddle that I modified a bit from the one you posted in the comments.
The changes I made were:
rearrange the on function
commented out the jQuery test via console.log() to stop errors from being thrown
prevent the default of the click event on the anchor element
switched the document.write to a $('body').append()
Hope that helps!
The problem in your fiddle was that somehow fiddle screwed up the whole document write thing.
You were close though. You can't attach an event listener to a node that's not there which you tried with $(node).on().
However, from the linked documentation you are supposed to use it like so:
$(document).on("click", "selector", fn);
I've updated your fiddle to use Zepto instead of jQuery and also set it to run on domReady which makes the ready event in your code unnecessary.
http://jsfiddle.net/zR2xL/3/