I have an asp:button with appropriate OnClick. I also have a jQuery UI dialog that opens when said button is clicked. I would like the OnClick function to be called when the user clicks "Yes" in the dialog. Even better would be if one codebehind function was called for "Yes" and another for "No." But for the life of me I can't figure out how.
Here's my current code:
$(function() {
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-confirm").dialog({
autoOpen:false,
resizable:false,
height:175,
width: 450,
modal:true,
buttons: {
"Yes": function() {
$(this).dialog("close");
},
"No": function() {
$(this).dialog("close");
}
}
});
$(".navigation").click(function(e) {
e.preventDefault();
$("#dialog-confirm").dialog('open');
});
});
and the button:
<asp:Button ID="testerE" class="navigation" runat="server" OnClick="JustATest" Text="Test me" />
Why don't you put those buttons inside a div and use that as the html that is displayed in the modal dialog?
<div id="my-placeholder-for-dialog">
Text goes here
<asp:Button ID="testerE" class="navigation" runat="server" OnClick="JustATest" Text="Test me" />
</div>
Otherwise, you would need to call the __doPostBack function that is present on the page.
Related
I want videos playing in the reveal modal window to stop playing when the modal window closes (who doesn't?). This is easily done with jQuery by setting the iframe source to empty.
But I can't figure out how to make it work in a callback. The modal window itself functions as expected. And this works:
$('.close-button', '#video-reveal').on('click', function() {
$('#video-player').attr("src", "");
console.log("button event fired");
});
However, neither of the following has any effect:
// from documentation
$(document).on('close.fndtn.reveal', '[data-reveal]', function() {
var modal = $(this);
console.log("closing reveal event fired");
});
// my attempt to do it programmatically
$('[data-reveal]').on ('opened.fndtn.reveal', function() {
var modal = jQuery(this);
console.log("opened reveal");
});
So it feels like the event is not firing. I'm sure it is, but how to capture it?
The magic of Foundation 6 is not all obvious without some digging. Working with version 6.2.3
$(document).on(
'open.zf.reveal', '[data-reveal]', function () {
console.log("'open.zf.Reveal' fired.");
}
);
It appears as though you are using Foundation 5's callbacks, rather than Foundation 6...
For your callbacks, I'd suggest using 'closed.zf.reveal', 'open.zf.reveal' or 'closeme.zf.reveal' as mentioned here:
http://foundation.zurb.com/sites/docs/reveal.html
In HTML
<!--the button -->
<a class="button" data-open="videoModal" href="#">Example Video Modal</a>
<!--Modal Video -->
<div class="row" id="theVideo">
<div id="videoModal" class="reveal" data-reveal data-close-on-click="true">
<h2>This modal has video</h2>
<div class="flex-video">
<iframe id="youtubePlayer" width="854" height="480" src="https://www.youtube.com/embed/4z6aSO05YHg" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
</div>
<button class="close-button" data-close aria-label="Close reveal" type="button" onClick="destroyVideo()">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<!--in apps.js-->
function destroyVideo(){
var url = $('#youtubePlayer').attr('src');
$('#youtubePlayer').attr('src', '');
$('#youtubePlayer').attr('src', url);
}
I try to make the menu button not to show when the back button is showing. is there a way to let Ionic take care of that? or it's up to me?
for example if i use ui-sref to go from app.users to app.users.add or app.users.details i expect the menu button to be hidden and the back button to show, but they're both showing when i go to nested views. example:
<button class="button button-positive" ui-sref="app.users.details({id:user.id})"> User details </button>
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html'
//controller: 'AppCtrl'
})
.state('app.users', {
url: '/users',
views: {
'menuContent#app' : {
controller: 'UsersCtrl',
templateUrl: 'templates/users.html'
}
}
})
.state('app.users.add', {
url: '/addUsers',
views: {
'menuContent#app' : {
controller: 'AddUserCtrl',
templateUrl: 'templates/add_user.html'
}
}
})
.state('app.users.details', {
url: '/userDetails/:id',
views: {
'menuContent#app' : {
controller: 'UserDetailsCtrl',
templateUrl: 'templates/details_user.html'
}
}
})
}
menu.html
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear">
<i class="icon ion-ios7-arrow-forward"></i> back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-right-left"></ion-nav-view>
</ion-pane>
<ion-side-menu side="right">
<header class="bar bar-header bar-stable">
<h1 class="title">Title</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close ui-sref="app.users">
Users
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.users.add">
New user
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
My views structure is as such:
<ion-view title="Title">
<ion-nav-buttons side="right">
<button menu-toggle="right"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
...
View Content
...
</ion-content>
</ion-view>
This is done by ionic by default now in beta 14. You can also toggle this by this attribute.
<ion-side-menus enable-menu-with-back-views="false">
Relative Codepen
Sidemenu Starter Project
Sidemenu Docs
Is also possible to override that from a child page just adding the ion-side-menus directive inside the child template:
<ion-side-menus enable-menu-with-back-views="true"></ion-side-menus>
<ion-view view-title="My Child page">
<ion-content>
<h1>HEY</h1>
</ion-content>
</ion-view>
This will add the complete navigation bar (ion-nav-bar) inside your child page that was added into menu.html template (according with the example above)
Place the navbar with menu button on the html page on which you need menu button and place navbar with back button on the page where you need back button.
Like this I need Menu On home page so place your navbar on homepage with menu button
<ion-view title="home">
<ion-nav-bar class="bar-stable main-header-nav home-page">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu- toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content></ion-content>
</ion-view>
And I need back button on Inbox page so use navbar with backbutton on inbox page
<ion-view title="">
<ion-nav-bar class="bar-stable main-header-nav home-page">
<ion-nav-back-button class="button-clear go-back">
</ion-nav-back-button>
</ion-nav-bar>
<ion-content></ion-content>
</ion-view>
I solved in 2019 adding the property "menuToggle" to the Button. That tells Ionic/Angular that the function of that button is to be the "Hamburguer Button" so, Angular understand and hide it when the "Back Arrow Button" is shown.
<button menuToggle ion-button icon-only (click)="btnHamburger()">
<ion-icon name="menu"></ion-icon>
</button>
I have a custom polymer dialog that I use for login, this is what I want it to look like:
This is the code I'm using to achieve that:
<polymer-element name="login-dialog">
<template>
<paper-dialog heading="XYZ Login" vertical autoCloseDisabled="true" transition="paper-transition-center" opened="true">
<p>{{feedback}}</p>
<paper-input floatingLabel label="Username" inputValue="{{username}}" type="text"></paper-input>
<paper-input floatingLabel label="Password" inputValue="{{password}}" type="password"></paper-input>
<paper-button role="button" on-click="{{reset}}" class="noink" affirmative>
Reset Password
</paper-button>
<paper-button role="button" on-click="{{login}}" class="ink" affirmative>
Login
</paper-button>
</paper-dialog>
</template>
<script type="application/dart" src="login-dialog.dart"></script>
</polymer-element>
I don't want the buttons to close the dialog, so I remove the affirmative from the paper buttons so that I can close the dialog myself if the correct login details were filled in.
As soon as I remove affirmative, a big white space appears at the bottom of the dialog:
Inside the dart code, I have the following for now:
login(event, detail, target) {
print("Clicked Login");
return false;
}
reset(event, detail, target) {
print("Clicked Reset");
return false;
}
I was hoping that returning false would stop the dialog from closing if I use affirmative, but it does nothing. Any ideas on how to get the buttons to no close the dialog unless I tell it to do so in the dart code and not have that white space at the bottom? (not keen on hacking it with css)
Returning false doesn't do anything. You need to call preventDefault() on the event.
login(event, detail, target) {
print("Clicked Login");
event.preventDefault();
// event.stopPropagation();
}
reset(event, detail, target) {
print("Clicked Reset");
event.preventDefault();
// event.stopPropagation();
}
<paper-dialog> has a specific option to disable automatic closing so you can affirmative for layout only.
<paper-dialog closeSelector="" ....
see also Prevent paper-dialog from automatically closing
I have a problem , i have a script for mobile version of page that will scroll down the page to a specific div tag, it works fine but I would like the script to also open this section (open a tab)
This is what i got so far
The script
<asp:PlaceHolder ID="plhAnimatedScroll" visible="false" runat="server">
<script type="text/javascript">
var navHeight = $('#gecko-sub-navigation').outerHeight();
var buffer = (navHeight * 2) + 70;
$("html, body").animate({ scrollTop: $('#' + '<%=SelectedPage%>').offset().top - buffer }, 1000);
</script>
</asp:PlaceHolder>
One of the sections of the page
<section class="help_section">
Box title
<div class="help_details">
<div class="help_btm_msg"> some text </div>
</div>
</section>
The opening of the tab is triggered by click on anchor tag so the class changes from class="link help_switch closed" to class="link help_switch open" , is there any way to adjust the script so that it will change the class from closed to open or emulate the click ?
Thanks
Since you are using jquery, you can simulate a mouseclick, or trigger a click on a certain element using the trigger function.
jQuery documentation:
.trigger()
The idea is that you can first setup a click handler, and then call that click handler any time by triggering the "click" function in your code:
$( ".help_switch" ).on( "click", function() {
alert("help_switch has been clicked, or triggered.");
// now toggle the open/closed class
var isOpen = !$(this).hasClass("closed");
if(isOpen){
$(this).removeClass("open");
$(this).addClass("closed");
} else {
$(this).removeClass("closed");
$(this).addClass("open");
}
});
// trigger the "click" event on .help_switch when the page loads
// to show an example of how to call it:
$( ".help_switch" ).trigger( "click" );
Hope this helps.
You can see a working example of this code on jsfiddle: http://jsfiddle.net/8cvkm7y3/3/, if you load this code in jsfiddle, then you can watch how the closed and open class toggles on your help_switch class as you click the "Box Title" link by "Inspect Element" in Chrome Developer Tools or your web inspector of choice.
Can anyone help me understand why this is not working?
<div id="css-check" class="css-check tool-tip checkbox inline" ...
<input id="someid" name="somename" type="checkbox" value="somevalue" />
</div>
$('.css-check').bind({
click: function() {
$(this).toggleClass('clicked');
this.children[0].click();
},
mouseenter: function() {
// do something on mouseenter
}
});
Only the first action is taken. So, the class is toggled but the checkbox, that is the [0] child of the div, is not clicked.
EDIT
This works.
var $checkbox = $(this).children('input:first-child');
$checkbox.prop('checked', !$checkbox[0].checked);
$(this).toggleClass('clicked');
change:
this.children[0].click();
to:
$(this).children('input:first-child').click();
Note: this triggers the click event, if you want to check the checkbox then use:
$(this).children('input:first-child').attr('checked', 'true');