Simplemodal works perfectly but I dont know how to automatically close the Iframe after the form is submitted.
I have tried to get the event outside the modal options using js, but
if I close the modal window on the submit event, then the form is not submitted...
I have also added the class simplemodal-close to the input button, but it doest work in the form??
Any suggestions??
Here is my code
//Modal Window
modal.click(function(e){
e.preventDefault();
$.modal('<iframe src="' + this.href + '" height="480" width="525" style="border:0" >',{
containerCss:{
backgroundColor:"#fff"
},
overlayClose:true,
onShow: function (dialog) {
$("input",dialog.data).click(function (e) {
e.preventDefault();
alert('Here'); //Doesnt execute
$.modal.close();
parent.$.modal.close();
alert('Here');
});
}
});
Ok, I just did it.. I didnt use iframe because after parent.$.modal.close().. The js included in that iframe didnt execute anymore..
So I just did it this way..
//Modal Window
modal.click(function(e){
e.preventDefault();
$.get(this.href,function(data){
var resp = $('<div></div>').append(data); // wrap response
$(resp).modal({
overlayClose:true,
minHeight:450,
minWidth: 500,
containerCss:{
backgroundColor:"#fff",
borderColor:"#fff"
},
onShow: function(dialog){
autocomplete();
}
});
});
});
If I use a div instead that an iframe,, when I submit, the modal closes otherwise it stays open....
It was easy, but I got confused..
Related
How to call JavaScript function on click of menu URL link of WordPress?
I have tried
jQuery(document).ready(function($) {
$(".menu-item-2916").on("click", function(){
getServerPath('signin.html?reqType=login');
});
});
which is not working for me. This menu is LOGIN menu for my website.
you have not clarify whats you need exact. but try this one if you need to change with this url on click.
menu-item-24 replace your menu id
jQuery(document).ready(function ($) {
$("nav li#menu-item-24").on("click", function (e) {
e.preventDefault();
window.open('/signin.html?reqType=login','_self');
return false;
});
});
Try it
jQuery(document).ready(function($) {
$(".nav li.menu-item-2916").on("click", function(){
getServerPath('signin.html?reqType=login');
});
});
I'm trying to use redactor.js to edit in place some divs in meteor;
in the template I have:
<template name="home">
<section class="editable">
</section>
...
</template>
and in the js:
Template.home.events({
"click section.editable": function(event) {
$(event.target).redactor();
},
});
this creates the redactor wysiwyg editor correctly when I click on the section; the problem is that by clicking again, another editor (nested inside the previous one is created); I'm trying without success to limit the execution of redactor() method only if the editor is not there already.
Could you wrap the state in a session variable? Of course, you'd need to set it back again once the redactor was finished (maybe try hooking into a blur event?)
Template.home.events({
"click section.editable": function(event) {
var isEditorActive = Session.get("editorActive", false);
if (!isEditorActive) {
Session.set("editorActive",true);
$(event.target).redactor({
blurCallback: function(e)
{
Session.set("editorActive",false);
this.core.destroy(); // destroy redactor ?
}
});
}
}
});
PREVIOUSLY:
Is there a particular reason you want to use meteor events for this? You could just use redactor.
if (Meteor.isClient) {
Meteor.startup(function() {
$('section.editable').redactor({
focus: false
});
});
}
I am currently using bootstrap date picker downloaded from eyecon.ro
On clicking the input field the datepicker popup opens, where i am showing the date.
However, on scrolling the browser's window, the datepicker's popup disappears. I have also created an issue for this in github but haven't got any answer yet. Can anyone help me with this, please ?
When you click in any location on windows the event "onblur" is fired, so this is not a bug. Otherwise you can modify this coding a event for onblur to not 'hide' the datepicker window.
Edit:
Ok, make this modification on bootstrap-datepicker.JS, on Datepicker prototype (line 88):
show: function(e) {
this.picker.show();
this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
this.place();
var t = this;
$(window).on('resize', $.proxy(this.place, this));
$(window).on("scroll", this.place, function() {
t.show();
});
if (e ) {
e.stopPropagation();
e.preventDefault();
}
if (!this.isInput) {
}
var that = this;
$(document).on('mousedown', function(ev){
if ($(ev.target).closest('.datepicker').length == 0) {
that.hide();
}
});
this.element.trigger({
type: 'show',
date: this.date
});
},
I just include a trigger for 'scroll', below the trigger for 'rezise' (line 6 here).
I have an aspx page that contains a dialog box defined with JQueryUI
$('#dialog').dialog({
modal: true,
autoOpen: false,
minWidth: 500,
title: 'my dialog',
buttons: { Finished: function() { $(this).dialog("close"); }
}
});
Within the page I have a button which is supposed to open the dialog
<button class="button" id="dialogLoader">Open</button>
The JavaScript for opening the dialog is
$('#dialogLoader').live('click', function(event) {
event.preventDefault();
$('#dialog').dialog("open");
loadDialogContent();
});
In Chrome Firefox etc all is good but IE9 does not load the dialog, even though when debugging all code appears to execute fine.
Any Ideas
UPDATE
Still have this problem I have updated the code above to show that I am now utilising preventDefault(); which I thought was the cause of the problem (if the problem is indeed event bubbling). but I still have no remedy to this if this was plain HTML it would work but I fear the involvement of ASP has caused some irregularity in rendering, which unfortunately returns no error.
UPDATE
Could the fact that this button is within JQueryUI tabs be causing the issue in IE9?
as you wrote your debug info is clean, this is just one idea. I hope this helps a little bit. attachEvent for Explorer.
var button = document.getElementById('dialogLoader');
if (button.addEventListener) {
button.addEventListener('click', function() {
//action
}, true);
} else if (button.attachEvent) {
button.attachEvent('click', function() {
//action
}, true);
}
right now I have a huge Solution in which we use javascript alerts via RegisterStartupScript for all messages and errors.. We were willing to modify all this to making something similar to the modalPopupExtender, or the extender itself in a way that doesn't require too much effort... I mean, to show a modalpopup on a single page I need to create it on the aspx file, setting the attributes etc... So i'm just asking for Ideas, want to know how you guys deal with this..
I'd probably use jQuery dialog and put the markup and initialization code in a MasterPage, set with autoOpen false and hidden by default. I'd inject code that interacts with the dialog into each page as needed.
<div id="modalDialog" title="Error">
<p id='modalDialogMsg'>An error has occurred.</p>
</div>
<script type="text/javascript">
$(function() {
$('#modalDialog').dialog({
autoOpen: false;
modal: true,
buttons: {
"OK" : function() {
$(this).dialog('close');
}
}
});
});
// You could "objectify" this, but I'll show as a global function
function showError( title, msg )
{
if (!title) {
title = 'Error';
}
if (!msg) {
msg = 'An error occurred.';
}
$('#modalDialogMessage').html(msg);
$('#modalDialog').attr('title',title)
.dialog('open');
}
</script>
Then, in your page you'd inject code that calls showError. Note this would need to be after the script above in order to make sure that the function has been defined. What would spit out would render like:
<script type="text/javascript">
$(function() {
showError('Database connection error', 'There was an error connecting to the database.' )'
});
</script>
Could you not place the modal popup/ modal popup extender into a user a control and embed the user control into each page?