This issue is driving me mad.
So I've got a modal dialog.
<div class="modal">
<img src="...."/>
</div>
Instanciated thus:
$(".modal").dialog({
resizable: false,
draggable: false,
modal: true,
autoOpen: false,
width: 530,
height: 460,
closeOnEscape: false,
dialogClass: 'popup noTitle'
});
Then I have a form:
<form>
<input type="submit"/>
</form>
and Js to open the modal:
$('form input').click(function() {
$(".modal").dialog('open');
});
In most browsers this works great:
In IE 9 and IE 10. The modal is opened but the image is missing:
I believe it is something to do with the form submit, stopping the image from loading. If I run $(".modal").dialog('open'); from the console it works fine. I've tried preloading the images:
$("#divSearching img").each(function() {
var imgObj = new Image();
imgObj.src = $(this).attr('src');
});
Doesn't help. Anyone else having issues with this or have a good solution? Everything I've tried has failed.
Tried to create a fiddle but because it is related to a form submit I couldn't do it.
Try canceling the form submission:
$('form input').click(function() {
$(".modal").dialog('open');
return false;
});
Right now you have a form with a submit button and when someone clicks on the submit button this form gets sent to the server and the browser redirects away from its current location. You cannot expect any more javascript to continue executing at that stage. By returning false from the submit handler you are canceling the default action.
Figured out a solution. So I changed:
$('form input').click(function() {
$(".modal").dialog('open');
});
To:
$('form input').click(function(e) {
var $form = $(this).parents('form');
$(".modal").on('dialogopen', function() {$form.submit();});
$(".modal").dialog('open');
e.preventDefault();
});
This puts off the form submit until the js to open the dialog has completed. Like I said. Seems to be an IE9 and IE10 issue only. FireFox, Chrome, etc. work fine with this.
Related
Normally, when I write the followings:
<a id="sta_numberOfIcons" class="icon-user" rel="popover"></a>
And js:
$("a[rel=popover]").each(function(){
$(this).popover({
trigger: 'hover',
placement: 'top',
html: true,
title:"Passenger Info",
content: "content "+$(this).attr('id')
})
.click(function(e) {
e.preventDefault()
});
});
It works and I can see a popover for the icon.But when I write the following code,to create the icons dynamically, but I cannot show popovers for the newly created icons.
html part:
Stations:
<select name="selectStation" id="selectStation" onchange="sta_callStation(this);"></select>
<a id="sta_numberOfIcons" class="icon-user" rel="popover"></a>
<div id="infoOfPassengers"></div>
<div id="distType"></div>
<div id="distParams"></div>
In Stations combobox, options are filled when the page is loaded.They are filled normally.
js function for getting the number of passengers from php, and create icons accordingly:
function sta_callStation(sel){
$('#noOfPassengers, #infoOfPassengers, #distType,#distParams').empty();
$('#sta_numberOfIcons').empty();
$.getJSON('Stations.php', function(station){
$.each(station, function(sta_key, sta_value) {
if(sel.value==sta_key)
{
$.each(sta_value.passengers, function(j,passengers)
{
var pas_icon = document.createElement("a");
pas_icon.className ='icon-user';
pas_icon.id='id_'+j;
pas_icon.setAttribute('href', '#');
pas_icon.setAttribute('rel', 'popover');
//alert('id_'+(j));
var empty=document.createElement("a");
empty.appendChild(document.createTextNode(" "));
document.getElementById('sta_numberOfIcons').appendChild(pas_icon);
document.getElementById('sta_numberOfIcons').appendChild(empty);
});
}
});
});
}
The icons appear in the page under the combobox.I just put to try, I don't know how to insert the new created icons to a tag.I just appended the newly created icons to tag.What is wrong here?Why I cannot show popovers for the created icons?Please help.
The JS code that you have which successfully wires-up the popover for elements $("a[rel=popover]") needs to execute after you have dynamically added your icons.
You could paste those lines into the end of the logic in sta_callStation() but it is probably better to put them into their own function and call that from sta_callStation().
Something like:
function bindMyPopovers() {
$("a[rel=popover]").each(function(){
$(this).popover({
trigger: 'hover',
placement: 'top',
html: true,
title:"Passenger Info",
content: "content "+$(this).attr('id')
})
.click(function(e) {
e.preventDefault()
});
});
}
I have a problem with ckeditor and jquery dialog window.
I have a form in which I'm dragging a div to a sortable table. When dragging I'm cloneing the div and opening a jquery dialog which contains the ckeditor.
The editor is created on the dialog's open method, and is being destroyed on close.
After dragging the edtior for the first time it opens in the dialog, but then all the dialogs in the page are not opening.
I'm getting this error: Uncaught TypeError: Object [object Object] has no method 'dialog' when trying to open another dialog or drag another div with the editor.
My code is:
var CKEditor
$("#dialog_editor").dialog({
autoOpen: false,
height: 500,
width: $("#td_form").width(),
modal: true,
zIndex: -1,
buttons: [
{
text: "Save",
"class": 'btn btn_content',
click: function () {
saveEditorContent();
}
}
],
open: function (type, data) {
$(this).parent().appendTo("#form");
CKEditor = CKEditor = CKEDITOR.replace('text_editor', {
extraPlugins: 'autogrow',
removePlugins: 'resize'
});
},
close: function () {
CKEditor.destroy();
}
});
I have searched all over the web, and still found no answer to that.
I tried adding the adapters/jquery.js and still the same problem...
You should try to update the "Uploadcare" plugin to the current version, everything should be fine just after that.
I found out that the problem was in a plugin I added to the ckeditor named "Uploadcare"
I have an application. In a button clicked I tried to open a Kendo modal window. It's opening. My application is in one domain and the content of the Kendo window is from another domain. Now I want to close the modal window with a button which is inside the Kendo window. Here the issue begins. I cannot close the modal window. I searched using Google it but did not find any solution — do you know one?
After reading your comments to my previous answer I think that you question is misleading. You talk about modal, another domain and close button but seems from your comments that nothing of that is actually relevant. I conclude from your comments that you want to place a button (actually a close button but might be any other) in a KendoUI window and in addition you want to display a page (that incidentally) is in a different domain. If this is what you actually want -and foreseeing problem related to cross-domain and security- I would recommend that you should actually use content.template and define a template including your button and an iframe referencing the page www.xyz.com.
Something like this...
var myWindow2 = $("#id2").kendoWindow({
modal : true,
draggable: false,
content : {
template: 'Close' +
'<iframe src="http://www.xyz.com" frameborder="0" class="k-content-frame"></iframe>'
},
visible : false,
width : 400,
height : 200,
resizable: false,
iframe : true
}).data("kendoWindow");
$("#open2").on("click", function () {
myWindow2.center();
myWindow2.open();
});
$("#close2").on("click", function () {
myWindow2.close();
});
You might even make the button float on top of the rest of the page by defining the following style for close button.
#close2 {
position: absolute;
top: 10px;
left: 10px;
z-index: 10000;
}
The following JavaScript code defines a button for opening a modal kendoWindow. Once clicked you can press a button inside the body of the window for closing it as you want.
JavaScript code:
var myWindow = $("#id1").kendoWindow({
title : "hi",
visible: false,
modal : true
}).data("kendoWindow");
$("#open").on("click", function () {
console.log("opening");
myWindow.center();
myWindow.open();
});
$("#close").on("click", function () {
console.log("closing");
myWindow.close();
})
and the HTML:
Open
<div id="id1">
<p>this is the content of my window</p>
Close
</div>
I have been trying for two days to get ColorBox to return post results back to the same open box but it just will not do it.
I am using Jquery Form Plugin to Post from a ColorBox. It seems to work in IE 8, but not Safari or FireFox.
In IE 8 it returns the result from the post page "action" and returns the result in the same ColorBox but in FF and Safari it closes the box and sits on the load page (i.e. process1.php)?
I have a page say "process1.php" which loads the ColorBox onLoad (it does this no problem)
Load Page ColorBox Code For process1.php:
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j.fn.colorbox({
href:"process2.php",
escKey: false,
overlayClose: false,
width: "60%",
height: 350,
title: "Process Secure Order",
open:true
});
});
Upon Page Load it will load the "process2.php" displaying a form for the user to submit data.
This is my JQuery Form Plugin Code:
var $j = jQuery.noConflict();
$j(document).ready(function() {
var options = {
beforeSubmit: showSpinner,
success: showResponse,
//resetForm: true,
timeout: 3000,
target: '#output1'
};
function showSpinner() {
$j('#sterms, #accept, #decline, #side-cart').hide();
$j('#working').show().html('Please Wait');
return true;
};
function showResponse(){
$j('#working').hide();
$j('#result').show();
return true;
};
// bind form using 'ajaxForm'
$j('#secure_process01').ajaxForm(options);
});
It posts fine and then just tries to reload the same page with out the ColorBox opening on Load.
It has me stumped why it works in IE and nothing else, any help would be appreciated.
Using JQuery 1.5.2 (JQuery Form Plug In is not working with anything higher has permission issues)
Reference For JQuery Form Plugin http://jquery.malsup.com/form/#ajaxForm
This issue has been solved.
It turned out that the Jquery Form Plugin did not like the 1.6.1 JQuery version so I did the code using Jquery Post and it worked in all browsers.
ColorBox plugin big rap, great and easy.
In telerik mvc grid i want to display some data in popup window when i click on a link button. But not using Ajax. Below is the code i am using but it is not working. Any help is appreciated
#section JavaScript{
<script type="text/javascript" language="javascript">
$(function () {
$(".lnkShortCodeAndKeyword").click(
function (e) {
e.preventDefault();
var WShortCodeAndKeyword = $.telerik.window.create({
name: "ShortcodesWindow",
title: "Shortcodes",
contentUrl: $(this).attr('href'),
modal: true,
resizable: true,
draggable: true,
scrollable: true,
width: 960,
height: 600,
onClose: function () {
destruir(this);
}
}).data('tWindow').center();
}
}
If you are not using the Window component anywhere on your View (by using Html.Telerik().Window() for example) you will have to manually add the required JavaScript files when you define your ScriptRegistrar. Normally, if you declare the components on the page the ScriptRegistrar takes care of everything for you, but if you just try to create this on the client-side you will have to do something along the following lines:
#(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add("telerik.common.js").Add("telerik.draganddrop.js").Add("telerik.window.js").Combined(true).Compress(true)))
As you can see I just manually defined the JavaScript files I wanted to load. Keep in mind to not add the "min" suffix as the ScriptRegistrar takes care of this as well (.min.js will only be used in production code and not debug).