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).
Related
Currently I have a checkbox wrapped by a label.
<label for="exercise_form_division_ids_34">
<input class="check_boxes optional division-checkboxes" type="checkbox" value="34" name="form[division_ids][]" id="exercise_form_division_ids_34"> Technology
</label>
In my integration test I tried to use
within '.organizations' do
find("label[for='exercise_form_division_ids_34").click
end
OR
check "exercise_form_division_ids_#{department.id}", allow_label_click: true
But I still get this nable to find visible checkbox "calltree_exercise_form_division_ids_2" that is not disabled
Unable to find visible checkbox "exercise_form_division_ids_" that is not disabled
With the limited info provided you have a few potential possibilities.
The label/checkbox aren't actually inside an element with the class of the organizations on the page.
The error Unable to find visible checkbox "exercise_form_division_ids_" that is not disabled shows that no id is actually getting inserted into your selector which would tend to indicate that department isn't actually persisted in your test.
You may be assuming 34 is the correct id based on what it is in your dev environment but that may not be what it is in your test environment.
To narrow down the possibilities the first thing to do would be to grab a screenshot in your with test with page.save_and_open_screenshot (assuming you're using a driver which supports screenshots) and make sure there is actually a visible checkbox on the page. If not, you're probably not creating the required objects in the DB prior to your test starting.
Secondly look at the page in your browser and make sure the elements visible on the screen are actually the checkbox and/or the label. If both label & checkbox are being hidden and replaced with some JS widget then you'd need to interact with whatever elements the widget creates in the page (just like a user would). If only the checkbox is being hidden via JS/CSS but the label is visible then
check('Technology', allow_label_click: true) # check matching on label text
should work.
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.
The mobiscroll documentation states
This preset enhances a regular HTML select to select the values with a scroller. The original select is hidden, and a dummy input is visible instead. The value of the select is maintained by the preset.
The sample HTML code they provide uses inline styling to hide the original select element
<select name="City" id="select" style="display:none">
However, when I do this and setup the mobiscroll replacement to appear inline
$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});
I find that although the scroller appears I still end up with what looks like an input element above it. This does not happen in their demo code but there I note that what they do is something like this
<div id="select_cont" style="display: none;">
<select name="City" id="select">
but that simply hides everything including the mobiscroll replacement. Looking under the covers I found that calling
$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});
introduces a dummy input element into the DOM.
<input id='cities_dummy'...
I can get the dummy to hide itself by issuing a
$('#cities_dummy').css('display','none')
immediately after creating the scroller. However, I cannot understand why things are working differently in the demo code. I have noted that they are using jQuery Mobile v 1.1.1 whilst I am using the very latest version.
Perhaps this issue is related to versions? Or is there something else at play here? I'd much appreciate any help.
I figured it out. It is all down to the
inputClass:i-txt
bit in the scroller options settings. In the demo code they are probably playing with this class via script depending on the value of the display property in the options object. The point is this - in order to get the original select to disappear when the scroller display is set to "inline" you must define i-txt (or whatever input class you use) as
.i-txt{display:none}
I'm very new to backbone.js but we're starting to use more and more JS on the front end and I wanted to use some framework to give the code structure - backbone seems to suit our needs.
So started off with a very simple test app that launches a dialogue window using jquery-ui. The problem I have is that since jquery-ui adds a wrapper DIV round the original template used by backbone, the events no longer fire.
I don't want to use the jquery-ui event model as I'd rather just use the one - how can I bind backbone's to this new structure?
It looks as though the call to _.template() is actually doing the wrapping in an extra div. The parent div with the events bound to it is being left behind appended to #well. A simple workaround is to call .parent() on the result of getting the element with the model class ID. See here for example
There's more than likely some information in the _ documentation that might shed some more light on the problem too.
OK - at the end of this project, I finally realised that I hadn't answered this. What happens is when you create a .dialog with JQueryUI, it actually detatches your original DOM element and moves it to the bottom of the DOM wrapped in it's own JQueryUI markup to turn it into a dialog.
Since the Backbone view's element has now been moved, Backbone doesn't pick up any events that fire as it's happening outside it's own "view" as far as it is concerned.
So what you have to do is reassign the view's element:
var dlg = this.$("#dialogue-properties").dialog({ ..});
this.setElement(dlg);
Where this is the view. This is done within the initialize method
You can create div wrapper in your view and modal it's content, as described here (first part of the post)
cocovan does a good job explaining the problem in his answer. However, as for the solution, the JQuery UI team actually added a method at the end of 2012 (Allow dialog to be attached to a element other than body) that takes care of this issue.
It is the appendTo(selector) method (jQuery Dialog appendTo method). So simply specify to which element you want the dialog appended.
I have a requirment in which I need to disable a drop down on certain event through JavaScript and then submit the form. The problem is that when the drop down component is disabled the value in the drop down is not set through the backing bean.
I tried to disable the drop down componenet through div and span but it has not worked.
Can anyone suggest how can I submit the value of a disabled compoement to the backing bean?
OR do i really need to idsable that component, I mean how can I achive this using div or span?
Chapter 17.12.1 of the HTML forms specification says the following (emphasis mine)
17.12.1 Disabled controls
...
When set, the disabled attribute has the following effects on an element:
Disabled controls do not receive focus.
Disabled controls are skipped in tabbing navigation.
Disabled controls cannot be successful.
...
Note the last point. In other words, they are never submitted to the server. Thus, the behaviour you're seeing is fully correct and expected as per the HTML forms specification.
To achieve your requirement, you need to disable it after submission.