I create the form every time a pop-up modal is opened:
<form method="post" data-asset-share-id="download-modal"
class="ui modal cmp-modal-download--wrapper cmp-modal transition visible active"
style="top: 151px; display: block !important;">
"Some html"
</form>
I want to know if the pop-up modal is active using jQuery.
You can bind an event handler for the modal, there are custom events in semantic-ui modal. In your case, you can use onVisible or onShow event.
$('.modal').on('onVisible', function(){
// your code here
})
Related
On an xpage I have an editbox control and xe:namepicker nicely grouped beside each other with a Bootstrap add-on component.
However I would like to trigger the xe:namepicker when the cursor enters the editbox.
In the DOM I see that for the namepicker an anchor link is generated such as:
a class="glyphicon glyphicon-user xspPickerLink" href="javascript:;"
And I could trigger the click event via csjs
$("a.xspPickerLink").trigger('click');
But I happen to have multiple xe:namepicker-s on my xpage.
Does anyone have a clue how I can trigger a SPECIFIC xe:namepicker ?
You can work with wrapper elements:
<div id="namePicker1Wrapper">
<xe:namePicker id="namePicker1" pickerText="Select..."></xe:namePicker>
</div>
<div id="namePicker2Wrapper">
<xe:namePicker id="namePicker2" pickerText="Select..."></xe:namePicker>
</div>
Now you have the opportunity to select a SPECIFIC xe:namepicker:
$("#namePicker1Wrapper a.xspPickerLink").trigger('click');
Anchor tag on which html popover
<a popover-trigger="outsideClick" popover-placement="top" ng-click="sendMessagePopover.open()" type="button" popover-append-to-body="true" popover-is-open="sendMessagePopover.isOpen" uib-popover-template="sendMessagePopover.templateUrl">Menu</a>
ng-Template that contains close button on which click popover should close.
<script type="text/ng-template" id="message-to-pnd-popover.tpl.html">
<div class="well">
<form name="myForm" ng-controller="myController">
<div class="form-group">
<span class="btn btn-primary" ng-click="sendMessagePopover.close()">Close</span>
</div>
</form>
</div></script>
angular controller code
angular.controller('myController',['$scope',function($scope){
$scope.sendMessagePopover = {
on: false,
isOpen: false,
templateUrl: 'message-to-pnd-popover.tpl.html',
open: function() {
$scope.sendMessagePopover.isOpen = true;
},
close: function() {
$scope.sendMessagePopover.isOpen = false;
}
}]);
When we click on anchor link it popover the template and when we click outside anywhere it close the popover.
I want to close the popover when user click on close button that i put in template.
But it's not working.
I am new this technology, help out with proper example.
The popover-trigger="outsideClick" is designed to close the popover when clicking anywhere outside of the popover content. If you want to manage opening and closing the popover using the is-open attribute, use popover-trigger="none".
I created a mobile app using cordova and jQuery mobile as the UI framework. It is working fine, except that the click event on the jQuery mobile buttons does not trigger when clicking on the corners. I see a hover effect (button color change) when clicking at corner, but click event not triggered. Click event is triggered when clicked a little inside from button corner.
I am using jQuery mobile 1.4.2. Below is my button (anchor tag with class showOptions and ui-btn) markup and click handler:
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<img src="images/logo_small.png" class="appLogoImg dontDisplay ui-btn-left" style="margin-top: 6px;" />
<h1 class="ui-title">All Packages</h1>
<div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
Options
</div>
</div>
$('.showOptions').on('click', function() {
console.log('button clicked');
return false;
});
Is anybody out there also facing same issue? Please help me.
Instead of using <button> or <input type="submit">, it's better to use <a> (like you) with data-role="button" attribute.
Options
Anchors with data-role=button dont get wrapped with a .ui-btn div. Hence, you have will have the whole button responsive to any event.
I have been trying out JS to make a button switch, show, hide text.
I have two buttons, register and login. When login is clicked, register will hide, vice versa.
Here is the link to my jsfiddle
The code here..
HTML
<button id="btn1">Login</button>
<button id="btn2">Sign Up</button>
<div id="login">
<h4>Login</h4>
</div>
<div id="register">
<h4>Register</h4>
</div>
JS
$("#btn2").on('click', function() {
$("#register").show();
$("#login").hide();
});
$("#btn1").on('click', function() {
$("#login").show();
$("#register").hide();
});
CSS
#register {
display: none;
}
It seems to not be working.. Register is display as none as I want to make login show up as default.
You need to include jQuery first before using it.
It can be included under "Framework and extensions"
Updated Fiddle
What I'd like to achieve is a page that has a couple of buttons inside a div. When the user presses one of these buttons a dialog opens, asking follow up questions. After this the user is returned to the same page but the div with the buttons is hidden.
What I've tried is the following, inside a JQM page i have div called buttons which contains the buttons(logically). this opens the dialog and also calls a function which saves to local storage which button was pressed. Then the dialog opens which actually sends the data to the server.
For some reason the div is never hidden when I return from the dialog. I even tried to save a variable to the sessionStorage and hide the div on pageload, but seems that the page load event does not fire when returning from the dialog. Any suggestions or am I missing something basic?
<div class="ui-grid-b" id="buttons">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
</div><!-- /grid-b -->
// the dialog:
<div data-role="dialog" id="Popup" data-overlay-theme="b" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;">
<h3>Heading</h3>
<textarea name="comments" id="popuptextarea"></textarea>
<button type="submit" data-theme="b" onClick="save()">Selvä</button>
</div>
</form>
</div>
I have two javascript functions which try to save the data and also hide the div,
function savePushedButton(color) {
//save which button was pressed to local storage
$('#buttons').hide();
console.log("asd");
}
function save() {
//send data to server
}
onclick is your problem (onchange also), do not use it with jQuery Mobile. jQuery Mobile has already started transition to the dialog, before onclick has been triggered. You will need to manually bind a click event to the button and hide buttons before transition to dialog can occur.
Here's a working example: http://jsfiddle.net/Gajotres/uhsfs/
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#test-button', function(){
$('#buttons').hide();
savePushedButton($(this).attr('data-color'));
});
});
function savePushedButton(color) {
console.log(color);
$.mobile.changePage('#Popup', {transition: 'pop', role: 'dialog'});
}