Call JQZoom on AJAX Load() - javascript

Im using C# MVC as my Software. In my page, I Will have a partial View that show Images. Then I will bind these Images with jqzoom. I bind it inside document ready function and it work well. But every X minutes, I need to refresh my partial View and re-fetching it with new data from DB, then bind the new images with Jqzoom too. But then it shows alert 'problem while loading image'
DB would only return the path string to the image. So, theres a small possibility that the Image path is not exist. But for the current problem, all images are exist
Here is my code :
#Html.Resource(
#<script>
$(document).ready(function () {
$('.zoom').jqzoom({
zoomType: 'standard',
preloadImages: false,
zoomWidth: 500,
zoomHeight: 500,
title: false
});
$('.zoomPad').css('z-index', 'auto');
});
setInterval(function () {
$('#Display').load('#Url.Action("xx", "xx")', function () {
$('.zoom').jqzoom({
zoomType: 'standard',
preloadImages: false,
zoomWidth: 500,
zoomHeight: 500,
title: false
});
$('.zoomPad').css('z-index', 'auto');
});
}, 1000 * 30 * 1);
</script>, "js")
My Questions :
After some search and tried it so many times, I come out with the conclusion that calling jqzoom inside the .load() function would fire the error alert. How to call jqzoom after reload a partial View?
If some Image path does not exist, will it fire the error alert too?

Calling jqzoom inside load() would still fire the alert. the only workaround is to check every path image, whether its exist or not. after confirmed, then call the image and jqzoom

Related

Leaflet Map is not loading on ajax requested page, loads fine on hard refresh

I currently have a PWA application running and I've added a 'custom' leaflet map in it. The PWA loads the pages via AJAX (IDK where), but that makes the leaflet map not loading. The moment I refresh (so f5), the map works just fine. Is there a way to have the map working properly?
All I do is having an js file that is being included in html, that file runs on document ready and initializes the map just like this:
map = L.map('map', {
gestureHandling: true,
center: [51.343695, 3.285927],
zoom: 13
});
L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map);
Now that works just fine, but the ajax requested page (that just modifies the dom I think) doesn't work.
I tried to listen for ajax event ends, that doesn't work, nothing seems to... except 'hard refresh of the page', but that is not ideal at all...I'l using Laravel and I 'yield' scripts in the master.
Now for as far as I can tell, there is code that looks like this:
$(function(){
'use strict';
var options = {
prefetch: true,
prefetchOn: 'mouseover',
cacheLength: 100,
scroll: true,
blacklist: '.default-link',
forms: 'contactForm',
onStart: {
duration:150, // Duration of our animation
render: function ($container) {
$container.addClass('is-exiting');// Add your CSS animation reversing class
$('.menu, .menu-hider').removeClass('menu-active');
$('#preloader').removeClass('preloader-hide');
return false;
}
},
onReady: {
duration: 10,
render: function ($container, $newContent) {
$container.removeClass('is-exiting');// Remove your CSS animation reversing class
$container.html($newContent);// Inject the new content
setTimeout(init_template, 0)//Timeout required to properly initiate all JS Functions.
$('#preloader').removeClass('preloader-hide');
}
},
onAfter: function($container, $newContent) {
setTimeout(function(){
$('.menu').css('display','block');
$('#preloader').addClass('preloader-hide');
},150);
}
};
var smoothState = $('#page').smoothState(options).data('smoothState');
smoothState.clear();
});
I know I could just disable the ajax loading, but that would (I think) take away all the emersiveness away for a PWA?
Anyone who knows how to resolve this isse?

jQuery gallery not triggering after Ajax

I am using a jQuery pop-up script Magnific Popup. It works well in a WooCommerce store but when I filter products using an Ajax Filter Plugin (YITH) it stops triggering. I understand this is because Ajax has changed the page and so the event is no longer bound to the link class in the page but not sure how to solve it.
From what I have read I can use on but I am unsure how this applies to the way I am triggering the Magnific Popup script which is below.
jQuery('.product').magnificPopup({
type:'inline',
midClick: true,
gallery:{
enabled:false
},
delegate: 'a.wpb_wl_preview',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: false,
});
Thank you all. I have found there is a jQuery function to detect when Ajax has been executed which is below. Not sure if this is the best method, so interested to see other answers but this works.
jQuery(document).ajaxSuccess(function() {
//code to trigger here
});

jQuery Vmap refresh with function load

I'm working with the following plugin: http://jqvmap.com/ with brought me a proper map of a country with its distinct regions.
I want to refresh the page with post data to filter some information when a click occurs. I used the load function which seems pretty easy to use but even if the function is reached, nothing happens afterwards.
Here is the jQuery:
$(document).ready(function() {
$('#francemap').vectorMap({
map: 'france_fr',
hoverOpacity: 0.5,
hoverColor: "#EC0000",
backgroundColor: "#444444",
color: "#FACC2E",
borderColor: "#000000",
selectedColor: "#EC0000",
enableZoom: false,
showTooltip: true,
onRegionClick: function(element, code, region)
{
var url = "home";
$(document).load(url, {region:region});
}
});
});
So if I basically clic on a region: nothing happens. Even thought the onRegionClick function is reached.
My bet is that it is a "DOM level issue" like i'm calling the document selector inside the $("#francemap") but I can't make sure and moreover I don't know how to overcome this.
Thank you for reading me
If you want to refresh the page, u need
window.location = url+"#"+region;
$(document).load(function() {})
// Bind an event handler to the "load" JavaScript event.
Here's an example

How to open a magnific popup on page load?

I'm using Magnific Popup and I would like to have a video come up as soon as the page loads in a popup.
I got the plugin to work fine, but I have no idea on how to get it to pop up as soon as the page loads, without clicking on the thumbnail.
I looked around for a solution, but I did not manage to get it to work.
If you're using jQuery you could just listen for the window load event and then call the open method for your Magnific Popup like so:
(function($) {
$(window).load(function () {
// retrieved this line of code from http://dimsemenov.com/plugins/magnific-popup/documentation.html#api
$.magnificPopup.open({
items: {
src: 'someimage.jpg'
},
type: 'image'
// You may add options here, they're exactly the same as for $.fn.magnificPopup call
// Note that some settings that rely on click event (like disableOn or midClick) will not work here
}, 0);
});
})(jQuery);
I was able to get a timed modal working using jquery's setTimeout function, Just wrap .magificpopup in the settimeout function to set a delay. Change the value of 5000 (5 seconds) to whatever value you want.
See below:
$(document).ready(function () {
setTimeout(function() {
if ($('#myModal').length) {
$.magnificPopup.open({
items: {
src: '#myModal'
},
type: 'inline'
});
}
}, 5000);
});

jQuery actions strictly after full DOM load

I'm using jquerynewsticker to reveal 100,000 digits of the number π in a news ticker fashion.
If i have my Chrome inspector open, i can see that the page loads from top to bottom, but the after the number, as well all the JS behind it, is rendered black for a few seconds, and only then becomes coloured as per default. However, the script already starts running as you can see on the test page here: http://marckremers.com/pi/ticker/
It seems to run, but without rendering.
If i reduce the size of the number, it works.
So it's clearly an issue where the loading isnt complete.
How can I force the script to only play once everything has 100% loaded?
Looking at your website I see the you load the ticker plugin and you execute your own code:
jQuery(document).ready(function($) {
$(function () {
$('#js-news').ticker({
speed: 0.05,
fadeInSpeed: 0,
titleText: '',
controls: false,
});
});
});
There 2 issues in this code:
1) Unnecessary nesting. you execute your code on document ready and then you call again a document ready handler ($(function(){...});
Keep in mind that writing $(document).ready( function(){} ) or $(function(){}) serves exactly the same purpose. For this reason you can remove the second event listener (useless):
jQuery(document).ready(function($) {
$('#js-news').ticker({
speed: 0.05,
fadeInSpeed: 0,
titleText: '',
controls: false,
});
});
with document.ready registration your code will run after the DOM has been completely built.
2) Another issue I see is that your selector #js-news does not resolve! I see no element in the page with ID=js-news... am I missing something ?
You can put your code as above to wait for the dom to be fully loaded.
$(function() {
// Your code
});
If it's not enough, if you want to wait for everything to be loaded (images, css, ...), you can put your code as above :
$(function()
{
$(window).bind('load', function()
{
// Your code
});
});

Categories