I've got a really strange problem with Sweetalert2 when I try to execute it from IE I got nothing showed. I've read on the site SA site to add the polyfill but it doesn't solve the problem.
The strange thing is that if I try the sweealert demo site it works.
When I try to invoke from the IE's console the swal('ok') I got the following output that seems to be the class content instead of the exection
Here's my code(I re-defined the alert)
<script type="text/javascript">
alert = function (msg, title, type) {
if (type == null)
type = 'error';
if (title == null)
title = 'Attenzione';
swal({
title: title,
text: msg,
type: type,
confirmButtonText: 'Ok'
});
}
function ShowToastr(message) {
swal({
position: 'top-end',
type: 'success',
title: message ? message : 'Operazione completata con successo',
showConfirmButton: false,
timer: 1500
});
}
</script>
Inside the _Layout.cshtml I've in the head section
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.28.11/dist/sweetalert2.all.min.js"></script>
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.js"></script>
And here's what I see when I try to run it from console
Thanks
https://github.com/t4t5/sweetalert/issues/69
on the cdn you ask for an older version without this commit
you are trying to update sweetAlert configuration. to do that, you should use mixin
like this :
const toast = swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
toast({
type: 'success',
title: 'Signed in successfully'
})
check the documention link please for more details : sweetalert configuration
According to https://github.com/sweetalert2/sweetalert2/releases/tag/v11.0.0 you should use v.10.16.7 for old browser support
Related
I have jQGrid v4.6.0 (I can reproduce the same issue with Free jqGrid) on my page which I can reload using:
$('#jqGrid').trigger('reloadGrid');
It loads data by posting to a server. It posts correctly, gets the returned data correctly, and shows the correct data in the grid.
On the same page I have a link which opens a Bootbox dialog. Calling reloadGrid from within a Bootbox callback seems to make $('#jqGrid').jqGrid "not a function"
bootBoxWindow = bootbox.dialog({
title: "title",
message: "foo",
size: "large",
closeButton: false,
buttons: {
ok: {
label: "Save 2",
className: "btn-success",
callback: function () {
$('#jqGrid').trigger('reloadGrid');
}
}
}
});
When this calls reloadGrid, jqGrid properly posts to my server and retrieves the latest data. However, inside the loadComplete event I can no longer refer to jQuery("#jqGrid").jqGrid.
Example:
jQuery("#jqGrid").jqGrid('showCol', 3);
... calling this inside loadComplete gives error: TypeError: jQuery("#jqGrid").jqGrid is not a function"
I get the same error when using $(this) instead of jQuery("#jqGrid").
I cannot reproduce the issue without Bootbox. If I load the grid, then use this:
setTimeout(function () {
$('#jqGrid').trigger('reloadGrid', [{ current: true }]);
}, 10000);
... there is no error.
The first that I think is that the modal function is outside the jqGrid scope.
Example:
(function($) {
$(function() {
....
var $grid = $("#grid").jqGrid({...});
.....
console.log($grid);
});
})(jQuery);
console.log($grid);
The first console.log will output grid object, the second will throw error.
You may want to look at this article
I am using the joomla built in function to create a tinyMCE editor on a page within a jQuery dialog box. However, the dialog box appears and the tinyMCE editor is like its in read only mode.
This is the php built in function that echos out the editor:
<div id="PhoneCallCard" title="Phone Call Card" style="display:none;">
<?php
$editor = JFactory::getEditor();
echo $editor->display('commentz', $this->content, '600', '100', '60', '20', false);
?>
</div>
This is my jQuery implementation of opening that dialog box:
jQuery("#PhoneCallCard").dialog({
height:500,
width:800,
modal: true,
close: function(ev, ui){
jQuery('#tablepanelfightclubrequests .trSelected').removeClass('trSelected');
},
open:function({ //Everything I tried to activate the tinyMCE
//tinyMCE.activeEditor.getBody().setAttribute('contenteditable', false);
//tinyMCE.execCommand('mceRemoveControl',false,'commentz');
//tinyMCE.execCommand('mceAddControl',false,'commentz');
//tinyMCE.execCommand('mceFocus', false, 'commentz');
}});
I also found similar problem here Why can't I type in TinyMCE in my jQueryUI modal dialog? and here TinyMCE and JQuery dialog: TinyMCE read only when modal:true in the Dialog but both can't solve my problem
I got same problem and fix by load dialog when page load.
For example:
jQuery(function() {
jQuery( "#dialog_desc" ).dialog({
modal: true,
width: 600,
height:500,
autoOpen: false,
});
}
when you want to open dialog:
jQuery( "#dialog_desc" ).dialog( "open" );
Hope this help!
i was get same error like that too...
my first code
$( "#f_edit_gallery" ).dialog({
autoOpen: false,
resizable: true,
show: "clip",
height:450,
width:850,
modal: true
});
after i delete option
show: "clip",
be like this
$( "#f_edit_gallery" ).dialog({
autoOpen: false,
resizable: true,
height:450,
width:850,
modal: true
});
tinyMCE run well after that
You should load the editor after the dialog is loaded. What you can do is:
Load the editor as you are doing now using $editor->display method
Before opening the jquery ui dialog, detach the editor
Display UI dialog and load editor again with slight time delay so that editor loads after dialog.
here is a sample code
use this code after the dialog open is triggered
if ((tinyMCE != undefined) && (tinyMCE.activeEditor != undefined)){
tinyMCE.activeEditor.remove();
setTimeout(function(){
tinyMCE.execCommand('mceAddControl', false, 'commentz');
},500);
}
You need settimeout when active TinyMCE, because, it need time waiting when dialog init.
for example :
$("#PositionShowDialog").dialog({
modal: true,
open: setTimeout('Change_TextareaToTinyMCE_OnPopup("#elementId");', 1000),
width: width,
......
If tinymce is loaded but you cannot type in it (like disabled) . You need set more time to setTimeout .
Sorry, my english skin not good
A small correction from the answer of Nagarjun makes the script work for me :
if ((tinyMCE != undefined) && (tinyMCE.activeEditor != undefined)){
tinyMCE.activeEditor.remove();
$("#dialogId").dialog('open');
setTimeout(function(){
tinyMCE.execCommand('mceAddControl', false, 'commentz');
},500);
}
ie : I need to remove tinyMCE before open the dialog and launch the timeout
When I do at the bottom of a view and after some html:
jQuery(document).ready(function() {
tinyMCE.activeEditor.setContent("asdsad");
});
I get an Error in firefox
Error: TypeError: tinyMCE.activeEditor is null
When I add the line in a function and activate it after a click event, the code works, for example
<input type="button" onclick="setcontent()" value="Set the content" >
<script>
function setcontent(){
tinyMCE.activeEditor.setContent("asdsad");
}
</script>
I am thinking that TinyMCE has not finished loading after jQuery(document).ready ? or am I missing something here?
There's a handler for inserting text for every editor plugin in Joomla
Try jInsertEditorText('hello world', 'jform_articletext');
where second argument is the id of JForm editor field (for com_content it's jform_articletext). This way you are able to insert content to whatever editor is currently used (tinyMCE, codemirror ...).
you can try this
jQuery(document).ready(function() {
if (window.tinyMCE && window.tinyMCE.activeEditor)
{
tinyMCE.activeEditor.setContent("asdsad");
}
});
Or
you can initialize tinyMCE and then setContent
tinyMCE.init({
mode : "exact",
elements : "updateeditor",
theme : "advanced",
plugins : "inlinepopups, example",
theme_advanced_buttons3_add : "example",
});
tinymce.init({
...
setup: function(editor) {
editor.on('init', function(e) {
console.log('init event', e);
});
}
});
http://www.tinymce.com/wiki.php/api4:event.tinymce.Editor.init
I use the Mozilla's Add-on Builder. I am looking for a way to remove an event listener in a contentScript. I use the port way to communicate between add-on script code and the content script code.
The problem is the callback on event "response" is called more than once. I want it to be called once and declared in the callback of the event show.
Can someone help me with that?
main.js code:
var Panel = require("panel").Panel;
var popup_panel = Panel({
width: 286,
height: 340,
contentURL: require("self").data.url("popup.html"),
allow: { script: true },
contentScriptWhen: "end",
contentScriptFile : [
require("self").data.url("test.js")
],
onShow: function(){
this.port.emit("show");
var pan = this;
this.port.on("hide", function(){pan.hide();});
}
});
var Widget = require("widget").Widget;
var widget = Widget({
id: "mozilla-icon",
label: "My Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
panel: popup_panel
});
popup_panel.port.on("get", function(){
popup_panel.port.emit("response");
});
Content script (test.js):
self.port.on("show", function(){
console.log("show");
function response(){
console.log("reponse called");
}
self.port.emit("get");
self.port.once("response", response);
self.port.removeListener("response", response);
});
full source code
Finally I found the problem. It is a bug in the add-on kit. In the file api-utils/lib/content/content-worker.js in the function removeListener the index is always -1.
The parameter given in the indexOf is the name of the event and it search a function. It is incorrect.
So to solve the problem I replace the line let index = listeners[name].indexOf(name); by let index = listeners[name].indexOf(callback);.
EDIT
The bug has been fixed. It will publish in the version 1.10 see here
I want to load .php files via ajax which execute ExtJS script as they load, which in turn modifies the existing ExtJS objects already present in the DOM.
However, I can't even get Javascript to execute from a page that is being loaded via Ext.Ajax.request. And no errors are showing up in the Firebug Net panel. The PHP code gets executed, but not the Javascript. When I call the page being loaded by itself in the browser, it executes the Javascript fine.
How can I get Javascript to execute in pages loaded with Ext.Ajax.request?
Ext.onReady(function(){
var menuItemStart = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start menu item.',
cls:'menuItem'
});
var menuItemApplication = new Ext.Panel({
id: 'panelApplication',
title: 'Application',
html: 'this is the application page',
cls:'menuItem'
});
var regionMenu = new Ext.Panel({
region:'west',
split:true,
width: 210,
layout:'accordion',
layoutConfig:{
animate:true
},
items: [ menuItemStart, menuItemApplication ]
});
var regionContent = new Ext.Panel({
id: 'contentArea',
region: 'center',
padding:'10',
autoScroll: true,
html: 'this is the content'
});
new Ext.Viewport({
layout: 'border',
items: [ regionMenu, regionContent ]
});
menuItemStart.header.on('click', function() {
Ext.Ajax.request({
url: 'content/view_start.php',
success: function(objServerResponse) {
regionContent.update(objServerResponse.responseText);
}
});
});
menuItemApplication.header.on('click', function() {
Ext.Ajax.request({
url: 'content/view_application.php',
success: function(objServerResponse) {
regionContent.update(objServerResponse.responseText);
}
});
});
});
the file that is being loaded via Ajax:
<script type="text/javascript">
window.onload=function() {
alert('from application view'); //is not executed
}
//Ext.onReady(function(){
// alert('from application view extjs'); //is not executed
//}
</script>
<?php
echo 'this is the application view at ' . date('Y-m-d h:i:s');
?>
When you get the ajax response the onload event on the window has been already fired so the function won't be executed because the onload event won't be fired again. Try only with the alert:
<script type="text/javascript">
alert('from application view');
</script>
<?php
echo 'this is the application view at ' . date('Y-m-d h:i:s');
?>
UPDATE
Browsers don't execute injected scripts in that way so you can try with something like:
var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
while(scripts=scriptsFinder.exec(responseText))
{
eval(scripts[1]);
}
Have you tried passing true for the second param to Panel.load (which happens to be the loadScripts option)?
regionContent.update(objServerResponse.responseText, true);
Normally, when you call update with ext you just do
update(string,true) and it will execute scripts contained within the string. However, ext core seems to lack this functionality, but there is no documentation for the update method (I had to search the actual code to confirm this.)
If you are using some regular EXT (like ext-all) you can simply add
regionContent.update(objServerResponse.responseText,true);
like this and it should eval the scripts. No dice for me, though - ext-all is too slow but I need eval functionality. I may have to hack EXT.