I've put an asp.net button on a modal dialog box that will appear once a certain option is clicked.
I want to call a .net subroutine once the button is clicked as normal but because I'm guessing it's in modal in won't foolw through to the subroutine or the click has no affect.
Is there a way around this?
Thanks,
var dlg = jQuery("#dialog2").dialog({
bgiframe: true,
autoOpen: false,
height: 410,
width: 800,
modal: true,
show: 'Transfer',
hide: 'Transfer',
draggable: true,
resizable: true
});
The button is a standard which doesn't click add go through the appropriate code behind the button.
<div style="width: 743px">
<asp:Button ID="btnNoteSave" runat="server" Text="Save" class="button_class" />
</div>
If it's a standard ASP.NET Button, it will still work, so long as your event handlers are setup correctly, however it may not behave as desired, i.e. Model popup will not persist.
May I suggest some AJAX and ASMX/WCF/JayRock?
I got this working by changing it all to:
$("#dialog2").dialog({
bgiframe: false,
autoOpen: false,
height: 410,
width: 800,
modal: true,
draggable: true,
resizable: true
});
$("#dialog2").parent().appendTo($("form:first"));
It does allow me to just use the method behind the
Related
I have created an inline popup for my custom Wordpress theme using Magnific Popup and the wp_audio_shortcode() function. It works beautifully, except that the audio keeps playing when I close the popup. (Embedded video stops exactly as expected, which is great!)
I read this post magnific-popup, how to play an audio file when popup open and stop playing when closing it and it didn't quite address my problem; I get several javascript errors.
Any help would be greatly appreciated!
Here is the HTML for the popup window that my function renders. I have removed extraneous things like web addresses and multi-line headlines.
THE LINK PEOPLE CLICK:
<span class="pop-up-wrapper"><h2 class="homecard-title">Link Text</h2></span>
THE POPUP THAT APPEARS:
<div id="popup-3" class="pop-up-post zoom-anim-dialog">
<div class="pop-up-left"><img src="graphic.jpg" class="pop-up-back-image"></div>
<div class="pop-up-right">
<h2 class="homecard-title">Headline Here<br><span class="play-wrapper" id="audio-3"><!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
<audio class="audio-3" id="audio-104-1" preload="none" style="width: 100%;" controls="controls"><source type="audio/mpeg" src="http://vivenne:8888/wp-content/uploads/2019/04/Vivienne-Leheny-Hot-Winter-NIghts-Lucas-Mom.mp3?_=1">http://vivenne:8888/wp-content/uploads/2019/04/Vivienne-Leheny-Hot-Winter-NIghts-Lucas-Mom.mp3</audio></span></h2>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
The jquery for Magnific (taken directly from the website):
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in',
});
When the close button is clicked, I would like the audio to STOP playing, but it continues in the background.
Well folks, I solved it. I abandoned the wp_audio_shortcode(), which made it easier to assign an ID to the <audio> element.
I am happy to provide all of the code, but I think it's confusing out-of-context. Here are the important tidbits…
The magnificPopup container gets a data-ref attribute that matches the audio player's ID contained within it. (I did this with a simple $count variable because there are several popups on the page.)
The important part for the magnificPopup jQuery is this:
callbacks: {
close: function(){
var magnificPopupVar = $.magnificPopup.instance,
magnificPopupSrc = magnificPopupVar.currItem.src,
magnificPopupRef = $(magnificPopupSrc).attr('data-ref'),
audioplayer = document.getElementById('audio-popup-'+magnificPopupRef);
audioplayer.pause();
}
}
In context:
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
modal:false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in',
callbacks: {
close: function(){
var magnificPopupVar = $.magnificPopup.instance,
magnificPopupSrc = magnificPopupVar.currItem.src,
magnificPopupRef = $(magnificPopupSrc).attr('data-ref'),
audioplayer = document.getElementById('audio-popup-'+magnificPopupRef);
audioplayer.pause();
}
}
});
I hope that's helpful to someone else trying to sort this out!
I have a panel which have 2 items, a start button and a save button.
the start button is at the bottom left corner
the save button is at the bottom right corner
the save button is hidden, when shown using show() the save button appears on top of the start button. If all these hide and show calls are removed the buttons rendered in the correct location, both of them.
Anyone know why this maybe ?
It is a straight up panel with items: [startbutton, spacer, savebutton]
Oh god I really hate this one framework..
You're probably confused about the layout management in ExtJS (which is actually quite nice once you understand how it works). Also you want to make sure that you perform a doLayout after you've toggled an element's visibility to make sure that everything gets placed properly.
Look at this jsfiddle: http://jsfiddle.net/LVKyM/
Ext.onReady(function(){
var pnl = new Ext.Panel({
renderTo: 'ctn-panel',
width: 300,
cls: 'my-pnl',
bodyBorder: false,
border: false,
layout: 'hbox',
layoutConfig: {
padding: 5
},
items: [
startBtn = new Ext.Button({
text: 'start',
width: 100,
hidden: true
}), {
xtype: 'spacer',
flex: 1,
}, {
xtype: 'button',
text: 'save',
width: 100
}
]
});
new Ext.Button({
renderTo: 'button-container',
text: 'Show/hide',
handler: function(){
startBtn.show();
pnl.doLayout();
}
});
});
I have a DataTable with 3 controls; General Search, Pagination, and Info (i.e. 'Showing 1 to 10 of 88 Entries' ). I want to place these controls in the header/footer of a jQuery Dialog window.
DataTables provides an options called sDOM, which lets one specify where to put DataTable's controls. But, I want to put the controls in the header and footer of a modal, which can not be done with sDOM.
The General Search control can be created with fnFilter, which is easy enough.
I think Pagination, and Info will require writing a custom pagination plugin, which I would like to avoid.
This is my current progress on jsFiddle.
$('#modal').dialog({
modal: true,
"height": 570,
"width": 1170,
autoOpen: false,
auto: true,
dialogClass: "myDialog",
create: function () {
$(".myDialog").append('<div id="dialogFooter" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><div class="dataTables_info" id="DataTables_Table_X_info"></div></div>');
}
});
var dataTableJS = $('#dataTable').dataTable({
"sPaginationType": "full_numbers",
"sDom": 'it<\"F\"p>"',
});
$("#modal").dialog("open");
You are doing it backwards :)
Create the dataTable
Create the modal
Move the autogenerated controls from the dataTable to the footer (or whatever)
forked fiddle -> http://jsfiddle.net/xK3TK/
I Have in the example placed the footer on top and included jQuery UI css (and you have BTW forgotten to close the modal markup </div>)
var dataTableJS = $('#dataTable').dataTable({
"sPaginationType": "full_numbers"
//"sDom": 'it<\"F\"p>"',
});
$('#modal').dialog({
modal: true,
"height": 570,
"width": 770,
autoOpen: false,
auto: true,
dialogClass: "myDialog",
create: function () {
$("#dataTable_info").detach().appendTo('#dialogFooter');
$("#dataTable_paginate").detach().appendTo('#dialogFooter');
$("#dataTable_length").detach().appendTo('#dialogFooter');
$("#dataTable_filter").detach().appendTo('#dialogFooter');
}
});
$("#modal").dialog("open");
I have a dialog that pops on $(document).ready(function() {, it blocks the whole page with modal : true.
$(function () {
$("#dialog").dialog({
show: { effect: 'drop', direction: "up" },
hide: "explode",
modal: true,
draggable: false,
resizable: false
});
});
The problem is that when $(document).ready(function() { fires, all the images in the page may not be loaded.
It results in having the overlay's height smaller than the page actually is.
(ex :) You have a page with 2 images (height of 100px). When the $(document).ready(function() { fires, you have a height of 800px, then the overlay appears, with a height of 800px. after that, when the images had the time to load, you have a 1000px page... So if I scroll down, there is 200px at the bottom that is not blocked by the overlay.
What i'm trying to do is, when $(window).load(function() { will fire (so everything will be loaded), refresh the height of the overlay, if the dialog had not been closed of course.
I noticed that, once all of the images are loaded, if I zoom +/- or If I open Chrome's developer tool, it refreshes the overlay height.
Thank you!
I fixed it, I wonder if there is a more efficient way to do this..
$(function () {
$("#dialog").dialog({
show: { effect: 'drop', direction: "up" },
hide: "explode",
modal: true,
draggable: false,
resizable: false
});
});
$(window).load(function() {
$(window).resize();
});
So I pop the dialog, then when the images are loaded, I just refresh the size..
I am trying to make a TideSDK application that cannot be closed and minimizes to the system tray.
I have the system tray part figured out for the most part, but when I specify "closeable" in tiapp.xml it doesn't do anything. i.e. I still see the "close" button and it closes the app entirely.
<window>
<id>someApp</id>
<title>Alerts</title>
<url>app://index.html</url>
<width>800</width>
<max-width>800</max-width>
<min-width>800</min-width>
<height>600</height>
<max-height>600</max-height>
<min-height>600</min-height>
<fullscreen>false</fullscreen>
<resizable>false</resizable>
<chrome scrollbars="false">true</chrome>
<maximizable>false</maximizable>
<minimizable>true</minimizable>
<closeable>false</closeable>
</window>
How to make it not closeable?
Have a look at this solution - https://gist.github.com/4639473
I've learned that the most flexible way to manage an app that "minimizes/closes to systray" is to use a hidden main window that launches a secondary window.
Secondary windows appear to be more flexible, plus you have the ability to manage them from the main hidden window.
This is all I left in my main window's code:
<head>
<script src="app://js/jquery.min.js"></script>
<script>
$(function(){
Ti.UI.currentWindow.hide();
var alert_window = Ti.UI.createWindow({
id: "alertWindow",
url: "app://alert.html",
title: "My New Window",
baseURL: "app://alert.html",
x: 100,
y: 100,
width: 500,
minWidth: 500,
maxWidth: 500,
height: 500,
minHeight: 500,
maxHeight: 500,
maximizable: true,
minimizable: true,
center: true,
closeable: false,
resizable: false,
fullscreen: false,
maximized: false,
minimized: false,
usingChrome: false,
topMost: true,
visible: true,
transparentBackground: false,
transparency: false
});
alert_window.open();
alert_window.setTopMost( true );
});
</script>
</head>
<body>
</body>