My app isn't npm and I need to use Sweet Alert 2.
I looked for information on the site https://sweetalert2.github.io, but without success.
Is there any way to use Sweet Alert 2 without npm?
Regards, Felipe.
Just add cdn links in view:
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js"></script>
Js code:
<script>
$(document).ready(function(){
Swal.fire({
type: 'success',
title: 'Your work has been done',
showConfirmButton: false,
timer: 1500
})
});
</script>
I found the answer, just use the tag below before all javascript imports to avoid errors:
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#8"></script>
you can grab it from jsdelivr CDN put below link in the head tag
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
Related
I just noticed that a code that worked before in Firefox is throwing errors now
This is a simple Google Apps Script sample code (embedded in a Google spreadsheet) to reproduce the issue:
server side:
function uiTest(){
var html = HtmlService.createTemplateFromFile('ui-test');
var ui = html.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
SpreadsheetApp.getUi().showModelessDialog(ui," ");
}
where ui-test html:
<head>
<base href="//polygit.org/components/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents.js" type="text/javascript"></script>
<link rel="import" href="paper-material/paper-material.html">
<dom-module id="ui-firefox">
<template>
<paper-material>Can you see me in Firefox?</paper-material>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: "ui-firefox",
ready: function() {
console.log("Am I ready?");
}
});
});
</script>
</dom-module>
</head>
<body>
<ui-firefox> </ui-firefox>
</body>
The error is as follow ...
The resource from “https://accounts.google.com/ServiceLogin?service=wise&passive=1209600&continue=https://n-47juae2agfc3xqpt4fvdar7apw5jvvjx5nohrjy-0lu-script.googleusercontent.com/webcomponentsjs/webcomponents.js&followup=https://n-47juae2agfc3xqpt4fvdar7apw5jvvjx5nohrjy-0lu-script.googleusercontent.com/webcomponentsjs/webcomponents.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
Any ideas on how to fix/avoid this issue?
With the Firefox release 58 from Jan.23, 2018 this is issue is gone, no longer happening.
Hopefully it'd stay that way ...
The popup is opened, but keeps loading. I copied the code from the example page, which is working OK.
The paths for css, js and ajax-content are ‘bonafide’.
I can't get my head around it.
http://gerardwessel.nl/swipe/index_ajaxklik.html
<head>
<link rel="stylesheet" href="popup/magnific-popup.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="popup/jquery.magnific-popup.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.simple-ajax-popup').magnificPopup({
type: 'ajax'
});
});
</script>
<title>ajax klik</title>
</head>
<body>
Load content via ajax
</body>
It looks like the ajaxtekst.html file needs to be an HTML file with html, head, and body tags.
When you click on "Load content via ajax", you can see there is an error in the browser console.
I run a program for Cloudinary image upload using Javascript and jQuery without using server.my. My problem is that I followed the instructions for the Cloudinary jQuery plugin but the image did not upload. Kindly post the answer.
My code is the following:
<html>
<head>
<script type="text/javascript">
$.cloudinary.config({cloud_name:'mycloudname', api_key:’myapikey'});
$.ajax({
url: 'http://res.cloudinary.com/mycloudname/image/upload/v1442240142/',
type: 'POST',
success: function (response) {
$('#uploadinput').attr('data-form-data', response);
}
});
</script>
</head>
<body>
<script src='js/jquery.min.js' type='text/javascript'></script>
<script src='js/jquery.ui.widget.js' type='text/javascript'></script>
<script src='js/jquery.iframe-transport.js' type='text/javascript'></script>
<script src='js/jquery.fileupload.js' type='text/javascript'></script>
<script src='js/jquery.cloudinary.js' type='text/javascript'></script>
<input name="file" type="file" id="File1" class="cloudinary-fileupload" data-cloudinary-field="image_upload"></input>
</body>
</html>
There are various issues here:
The URL should be different, e.g.,
https://api.cloudinary.com/v1_1/mycloudname/image/upload
If you don't want to use your server, then you should use unsigned uploads, there you must also include an upload preset.
Have a look at the following for more information:
http://cloudinary.com/blog/direct_upload_made_easy_from_browser_or_mobile_app_to_the_cloud
I used mootools scrollable(http://mootools.net/forge/p/scrollable) on my page,but it is not working.
my page: http://neyriz.net/moo/
I used it for div with id="right"
why it's not work?
You are making 2 mistakes. The first is that you try to instanciate the Scrollable before the DOM is ready and so your element doesn't exist. So you have to move your script tag either to the end of the body or you wrap it in an event listener. I.E:
window.addEvent('domready', function() {
var myScrollable = new Scrollable($('right'));
});
The second problem is that the plugin has some dependencies. In this case you need to include Slider, Element.Measure, Element.Shortcuts from MooTools more. You can go to http://mootools.net/more/ and select those 3 modules. Download the file and include it into your head between mootools-core and scrollable:
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script> INSERT MOOTOOLS MORE HERE!
<script type="text/javascript" src="scrollable.js"></script>
In general it's better when you define and load your JS files before the body. So it looks like:
<html>
<head><title>My awesome page</title></head>
<body>
<h1>My awesome page</h1>
<p>Some text</p>
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script> INSERT MOOTOOLS MORE HERE!
<script type="text/javascript" src="scrollable.js"></script>
</body>
</html>
Im trying to create a div that will use jquery's lazy load to load images coming in from linkedIn. When I look at the examples found online, they seem to work fine with my browser, but when i try to add it, it doesnt seem to work. I'm not sure if it matters, but i'm developing in Groovy/grails. here is the code i have so far, before rendering:
<html>
<head>
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
....
<script type="text/javascript">
$("img").lazyload({
placeholder : "/mgr/images/spinner.gif"
});
</script>
....
</head>
<body>
<div style="width: 150px; height:200px; border:1px solid red; overflow:auto;">
<g:each in="${Friends}" status="i" var="Friends">
<img original=${Friends[3]} src="/mgr/images/spinner.gif">
</g:each>
</div>
This code will only draw the div and display the /mgr/images/spinner.gif image but not the original image. Is there something i'm missing?
thanks for your help
jason
Normally you include the plugin file after the jQuery core file. That way the plugin can extend the jQuery core.
Change:
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
To:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}"></script>
I would also recommend trying to use the newest jQuery core file you can. It may break old plugins but it's well worth attempting as with each update to jQuery come performance enhancements.
jQuery 1.6.4 from Google CDN.
jQuery 1.6.4 from jQuery's CDN.
Also if you want to load some html not just for images using lazy loading plugin you can do easy like that on lazy callbacks
this option "enableThrottle: false", is to ensure your callback is always executed, I had some issues because of this ... sometimes lazy loading wasn't working..
to html add "class="lazy" data-src=" " to an element to section/div/img to call when is displayed to add new html
> $('.lazy').Lazy({
> chainable: false,
> enableThrottle: false,
> onFinishedAll: function () {
> // do what you need ajax call or other
> },
> beforeLoad: function () {
> // do what you need ajax call or other
> },
> afterLoad: function () {
> // do what you need ajax call or other
> },
> onError: function () {
> console.log('could not be loaded');
> }
> });