Open a page in dialog style, the close button is added by default. Is there a way to catch the click event of the close button of the dialog page. I like to invoke a callback before the dialog page is closed.
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="true" >
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
This is Page1.
Show Dialog
</div>
<script>
function showDialog() {
$(":mobile-pagecontainer").pagecontainer("change", "#page2", { role: "dialog" } );
}
</script>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-tap-toggle="true" >
<h1>Dialog</h1>
</div>
<div role="main" class="ui-content">
This is Dialog
</div>
</div>
The pagecontainerhide event can be used. but it did not work for ajax. If the dialog page is dynamically created in DOM, the ui.prevPage is not defined for the hide event.
Thanks for any help.
The close button is an anchor tag (<a></a>) in side a header element with class .ui-header inside a dialog container with class ui-dialog-contain. So you can use the jQuery selector:
".ui-dialog-contain .ui-header a"
When you handle the click event, you can get the parent page by finding the closest() DOM element with the ui-dialog class:
$(document).on("pagecreate", "#page1", function(){
$(document).on("click", ".ui-dialog-contain .ui-header a", function(e){
alert("close dialog: " + $(this).closest(".ui-dialog").prop("id"));
});
});
DEMO
Related
I have a modal that is triggered when the button is clicked in the main page. It works and the success modal is displayed and the url modal is closed. But my problem is that if I click the button again, url modal cannot be displayed. Here's my code.
<button class="btn pink apply_btn" type="submit" name="button">Apply</button> //my apply button in the page
<form class="search_form" action="" method="">
#csrf
<label>
<input type="url" required id="instagramLink" value="" placeholder="Instagram Post URL (Paste Here)">
<p>
<span class="alert"></span>
</p>
</label>
<div class="flex_box">
<button class="btn pink" type="button" id="save">Apply</button>
</div>
</form>
<script src="{{ url('/assets/js/modal.js') }}"></script>
And this is my ajax code in closing the url modal.
success: function(store) {
$(".apply_modal").hide();
$(".applyfnsh_modal").toggleClass("open");
$('.alert').html('');
},
error: function() {
$('.alert').html('Error occured while applying. Please try again.');
}
In my modal.js
//apply pop up
$(".apply_btn").on("click", function(){
$(".apply_modal").toggleClass("open");
$("body").toggleClass("open");
});
$(".modal_close").on("click", function(){
var modal = $(this).parent("div").parent("div");
modal.toggleClass("open");
$("body").toggleClass("open");
});
$(".apply_modal").on('click touchend', function(event) {
if (!$(event.target).closest('.apply_box').length) {
$(".apply_modal").toggleClass("open");
$("body").toggleClass("open");
}
});
So when the url is valid, save to db and display the success modal, which works, but clicking again the apply button in the page, is not displaying the url modal again. I have tried the answers here but nothing is working.
Ok, so here's what I'm thinking is happening... $(".apply_modal").hide(); is setting your modal's style to "display: none;" directly onto the DOM element. In order to display your modal, your code is simply applying a class of "open" to the modal. Any local styles to a DOM element override any styles from CSS. What this means is that the CSS styles applied to the class "open" don't matter because the div itself has a style attribute in it, and that style attribute contains "display: none". To fix this, wherever there is an instance of .toggleClass("open");, add a "show" declaration (.toggleClass("open").show();). You should do some serious refactoring if this works, but it'll at least let you know if we're on the right track.
My kendo template is as follows:
<div id="file-err-msg" > Please remove files with errors</div>
<input name="files" id="files" type="file" />
<script id="fileTemplate" type="text/x-kendo-template">
<span class='k-progress'>
</span>
<strong class='k-upload-status'>
<button type='button' class='btn-remove k-button k-button-bare k-upload-action'>
<span class='k-icon k-i-close k-delete' title='Remove'></span>
</button>
</strong>
</script>
<script>
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html())
});
</script>
I need to hide the div with id - file-err-msg, when the remove button is clicked. the Remove action is happening when the span with css class "k-delete" is clicked. I need to add the below event handler in addition, and it is never being called.
$(".k-delete").click(function () {
alert("Remove button clicked");
});
since these controls are rendered dynamically, i tried to bind them to the event handler as below, but nothing works.
$("body").on("click", ".btn-remove", function () {
alert("dynamic control event handler");
});
Any help is appreciated!
According to Kendo Upload API documentation, you can bind a function to the remove event.
So this is where you could hide your file-err-msg div :
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html()),
remove: function(e) {
$('#file-err-msg').hide();
}
});
I am using bootstrap 3.2.0 and encouter the following problem:
On my main page, I have a button. A click to this button opens a modal window. The modal window makes an API call and fills it's content-div with the respond of the AJAX-call.
The AJAX call returns something like this:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="tabsFromAjax">
<li class="active">ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="one">this is tab 1</div>
<div class="tab-pane" id="two">this is tab 2</div>
<div class="tab-pane" id="three">this is tab 3</div>
</div>
<script>
$("#tabsFromAjax").tab();
</script>
However, the tabs are not working. Clicking on "TWO" does change the tab itself - meaning the upper part - but will not show the content: "this is tab 2" on the bottom.
I tried everything I could think of. Now I start to wonder whether this is kind of a bug in 3.2.0 ?
EDIT/UPDATE:
I found out that even a simple binding does not work inside the modal. I try to show in code:
<div class="modal fade" id="formView" tabindex="-1" role="dialog" aria-labelledby="Detail" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
<script type="text/javascript">
<!--
$(document).ready(function(){
$(".formShow").click(function(){
$.ajax({
type: "POST",
url: "test.php",
data: { id: 123 }
}).done(function( msg ) {
$(".modal-content").html(msg);
$("#formView").modal();
});
});
});
-->
</script>
And the AJAX-call to test.php simply returns this:
<div>
Foo
</div>
<script type="text/javascript">
$("#testAnker").click(function(){
alert("click");
});
</script>
Clicking on "Foo" does not show an alert.
What am I missing here?
Try:
<script>
$(function() {
$("#tabsFromAjax").tab();
});
</script>
Make sure that when you pull in new data through the ajax. That the tabs "id" is different then either what you started with or what the next ajax call comes in with and try rebinding the tab's to the new id.
If you don't you may end up rebinding the tabs to the first element that had already been bound to.
<script type="text/javascript">
$(document).ready(function(){
$(".formShow").click(function(){
var mid = 123;
$.ajax({
type: "POST",
url: "test.php",
data: { id: mid }
}).done(function( msg ) {
$(".modal-content").html(msg);
$("#formView").modal();
$("#tabsFromAjax-"+mid).tab(); // this line key.
});
});
});
</script>
I have a weird problem with a modal. It should be a absolutely normal modal that I can open and close many times, but I can open just one and also just close one time! http://plnkr.co/ksTy0HdifAJDhDf4jcNr
My index.html file looks this:
<body ng-controller="MainCtrl">
<div ng-include src="'widget.html'" ng-controller="WidgetCtrl"></div>
<!-- other widgets and content -->
</body>
As you can see I have devided my application in different parts (called widgets), that I am including per ng-include in my index html file. Every widget has it's own controller.
The widget.html looks like this:
<div modal="theModal">
<div class="modal-header"><h3>The Modal</h3></div>
<div class="modal-body">
Body intentionally left blank
</div>
<div class="modal-footer">
<button class="btn" type="button" ng-click="CloseModal()">ok</button>
</div>
</div>
<!-- more modals and other stuff -->
<button ng-click="OpenModal()">open modal</button>
And now the widget controller (which is a child controller of the main controller)
app.controller('WidgetCtrl', function ($scope) {
$scope.OpenModal = function() { $scope.theModal = true; }
$scope.CloseModal = function() { $scope.theModal = false;}
});
All stuff for opening and closing the modal is part of the sub controller (WidgetCtrl) and therefore shouldn't conflict with anything from the parent controller.
$scope.theModal is in the beginning undefined, so the modal is not shown. With a click on the button $scope.theModal is defined and set to true; this is triggered by Angular UI and the modal is shown. On a click of ok, the now existing $scope.theModal is set to false and the modal disappears. Everything is perfect but .. it's not working again!
You just have to include close="CloseModal()" in the first div of your widget
<div modal="theModal" close="CloseModal()">
<div class="modal-header"><h3>The Modal</h3></div>
<div class="modal-body">
Body intentionally left blank
</div>
<div class="modal-footer">
<button class="btn" type="button" ng-click="CloseModal()">ok</button>
</div>
</div>
Here is a working plunker
I think this may be a bug in Jquery Mobile, but it could also be user error (mine).
For a jquery mobile page, I am manually calling $(..).trigger("create") after loading in some html asynchronously. I am finding an odd - to me anyway - behaviour, which is that <input>s of type text on the loaded html are not enhanced to have JQM's styling, whereas <input>s that are of type button are.
Here's a stripped-down version that replicates the problem. Basically, a page loads and injects foo.html. Part of foo.html is a placeholder div that is subsequently loaded and injected with bar.html. bar.html contains a link that opens a popup. When it's clicked and the popup opens, buttons are styled correctly; inputs are not.
Note: I call trigger("create") on the parent of the injected content.
Further note: calling trigger("create") on the grandparent of where bar.html is injected makes everything be styled correctly, including inputs on the popup. See below for code.
in the body of my basic html page:
<div data-role="page" id="grandparent" data-theme="a">
<h3>A very basic page</h3>
</div>
the script in that page's head:
<script type="text/javascript">
$(document).ready(function() {
var path = "pathToFiles/";
$("#grandparent").load(path + "foo.html", null, function() {
$("#grandparent").trigger("create");
//now load bar
$("#bar_placeholder").load(path + "bar.html", null, function() {
/*this does NOT enhance text <input> on popup*/
$("#bar_placeholder").trigger("create");
/*this DOES enhance text <input> on popup*/
//$("#grandparent").trigger("create");
});
});
});
</script>
here is foo.html
<div data-role="content" id="foo">
<h3>Foo before placeholder...</h3>
<div id="bar_placeholder" data-role="content"></div>
<h3>...foo after placeholder</h3>
<label for="foo_input" class="ui-hidden-accessible">foo input IS enhanced:</label>
<input id="foo_input" value="" placeholder="i AM enhanced" data-theme="a" type="text" />
<input type="button" id="foo_button" value="Foo Button"/>
</div>
and here is bar.html:
bar popup button
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3>Bar header</h3>
<label for="bar_input" class="ui-hidden-accessible">bar text input NOT enhanced</label>
<input name="bar_input" id="bar_input" placeholder="i am NOT enhanced" data-theme="a" type="text"/>
<input type="button" data-theme="a" value="bar button"/>
</div>