sveltekit and sweetalert2 modals rendered into the body (instead of popup) - sweetalert2

I was using sweetalert2 with Svelte a lot, without any problems. But now trying Sveltekit and modals fired by sweetalert2 are actually rendered not as supposed to (as popup), but at the end of body.
It has probably something to do with how sveltekit hydrated body with %svelte.body%, but no idea hot to configure etither sveltekit config or sweetalert2 target to make this work. Any help appreciated!

After some digging in, I found solution myself.
It seems that, unlike regular svelte, sveltekit requires for proper working sweetalert to import .scss file (even if you don't plan to use themes, which it was primarily intended for).
so, adding to component script
import 'sweetalert2/src/sweetalert2.scss'
Actually solved the problem.

Related

Wordpress Underscores - ajax refreshing page instead of handling it right away?

I just started using Underscores and I love it, but I noticed that when I use anything that requires ajax (like Contact Form 7), page will reload instead of handling it on the spot.
I've included jQuery with functions (even tried with plugin to do so) and while jQuery scripts works, I can never get page to NOT refresh.
Both wp_head() and and wp_footer() are present so it's not that.
What am I missing here?
Please check console maybe you have some jQuery error find and fix it or please attach a screenshot of your console.
Thank you

Adding rating feature to Jetpack Carousel

I'm using jet-pack carousel in my gallery website and i want to add image rating capabilities. I have the "wp-postratings" plugin running on the rest of my site.
I'm assuming that i could add this to individual images as wp treats each image as a post, if so where would i find the template i should add this code to?
All the plugin requires is that i add one line of php to the page/image but i can't figure out where it shoud go as the code for carousel seems to be entirely js and php generated.
demo: http://so.devilmaycode.it/adding-rating-feature-to-jetpack-carousel/gallery/
in a js file jetPack_meet_wpPostRating.js copy this code (place the file in the js folder of your theme):
https://gist.github.com/aSeptik/9739808
in the functions.php file of your theme put this code:
https://gist.github.com/aSeptik/9739808
NOTE
after installing the above scripts make sure to delete the browser cache before test.
tested with latest wordpress, jetpack and wp-postrating versions.
this will also work with multiple gallery in the same page.
does not need to put any extra [ratings] shortcode anyware.
the bounty for this answer is too low... ;)
FIX
Fixed bugs added some check and debug to consol.log...
You can use hook into the Jetpack Carousel on the server-side
(like to output your data, for example).
Then on the client-side, get your Javascript rating code to
load after the Jetpack+Carousel JS, and hook into them
(hook on the bindings, etc).
JetPack provides 2 JavaScript hooks:
1) jp_carousel.afterOpen
2)jp_carousel.beforeClose.
Action hook code example

How to reset or re-initialize a Jquery plugin being used on AJAX-updated links?

I am using this plugin for adding arrow key navigation to a website
Works great! However, sometimes my links are updated via AJAX and then the highlighting disappears. So I started re-initializing the plugin when my links were updated. I noticed this solved the problem, however now I had multiple copies of the plugin running, thus highlighting multiple buttons at once.
I know there isn't a 'built in' destory method in Jquery, but does anyone have any ideas on how to re-initialize a plugin or at least get rid of the old instance running.
You can see the source code of the plugin on GitHub
The plugin code is simple and I believe what I am trying to achieve is simple as well. Thanks!
The plugin you are using has an update function, call that function as soon as you get the ajax result back.
for example
var $keyNav = $('#navigation a').keynav();
and on ajax success
$keyNav.update();
I haven't tested this code but I think it will work.

Confusing WP page load with AJAX

My site is http://armandwho.com/site
I'm using the Adv. Ajax Page Loader Plugin in order to keep my background vid & music uninterrupted while browsing.
I'm having trouble with the "LOOK" page. When navigating to it from the homepage (1st link), the gallery doesn't load at all. However, when you refresh or go directly to the page URL it works.
Within the plugin, there is an area for jQuery reload codes, which I think will load the needed scripts that don't get loaded when using the nav.
Can anyone make sense of what script I might need to "reload" to get my gallery working with this Ajax plugin?
Help is supremely appreciated!
Joe
I loved the music, so I decided to look into the problem a bit.
I stepped through the code for the plugin as it tried to load the page and came across this line:
//Nothing like good old pure JavaScript...
document.getElementById(AAPL_content).innerHTML = output;
..which is a problem because the javascript in the script tags isn't going to be run. You could change it to:
//Nothing like good old pure JavaScript...
jQuery(document.getElementById(AAPL_content)).html(output);
..and jQuery will handle the dirty work.

use Telerik controls in Orchard CMS

I am trying to use the Telerik datetimepicker in my own module of Orchard CMS.
everything seems working well except javascript. the datetimepicker control is unable to show the drop-down calendar.
I tried to use
Script.Include("~/Themes/Contoso/Scripts/2011.2.712/telerik.common.min.js").AtFoot();
Script.Include("~/Themes/Contoso/Scripts/2011.2.712/telerik.datetimepicker.min.js").AtFoot();
or created an ResourceManifest.cs in my module and called followings.
Script.Require("telerik_datepicker").AtFoot();
Script.Require("telerik_calendar").AtFoot();
I can see no run time errors against scripts i am refereing. but no document.ready() stuff in the html source for the page.
I dont know where got wrong. hope someone can crack the problems . thank you in advance.
All Telerik UI components for ASP.NET MVC require a ScriptRegistrar in order to work properly. The latter outputs the required JavaScript files as well as the JavaScript initialization code. You are probably missing a ScriptRegistrar hence the DatePicker does not work. Here is the minimum required code:
#(Html.Telerik().DatePicker()
.Name("DatePicker")
)
#(Html.Telerik().ScriptRegistrar())
Don't those Telerik helpers rely on some kind of HttpModule that you'd need to register in the global config?

Resources