We Keep Coding

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?

Call JQZoom on AJAX Load()

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

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 UI DatePicker Hangs on second call

I'm creating an ASP.NET MVC3 app that uses jQuery Datepicker and Timepicker inside a dialog. The code is pretty simple, just localization:
$(document).ready(function () {
$('.datepicker').datepicker({
dateFormat: "dd/mm/yy",
monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
dayNamesMin:['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
});
$('.timepicker').timepicker({
timeOnlyTitle: 'Titulo',
timeText: 'Tempo',
hourText: 'Hora',
minuteText: 'Minuto',
secondText: 'Segundo',
currentText: 'Atual',
closeText: 'Fechar'
});
});
No secret here.
The datepicker works fine when used for the first time. When I used a second time, the browser (any browser) hangs and offers me to stop script execution of jquery-1.6.4.min.js. To reproduce the error, I just reload the whole page.
What am I missing here?
Update
Adding code for the modal:
First, I configure that everything with class='modal' will have some basic parameters:
$('.modal').dialog({
resizable: false,
draggable: false,
modal: true,
position: 'center',
autoOpen: false
});
Then, I extend jQuery with some functions. One of them sets the buttons and submits:
$.extend({
modalPopup: function (modal) {
var $modal = $('#' + modal);
var $form = $modal.find('form').first();
$modal.dialog({
buttons: {
"OK": function (e) {
$.validator.unobtrusive.parse($form);
if ($form.valid()) {
$('.ui-dialog button:contains("OK")').button('disable');
$.post($form.attr('action'),
$form.serialize(),
function (data) {
$modal.dialog('close');
$('#maindiv').load(telaAtual);
});
}
},
"Cancelar": function () { $(this).dialog("close"); }
},
open: function () {
$modal.unbind('submit');
$modal.submit(function () {
$modal.parents('.ui-dialog').first().find('.ui-button').first().click();
return false;
});
$(this).find('.ui-dialog :input').first().blur();
}
})
.dialog('open');
}
})
UPDATE
I did some research and found that the problem is with DatePicker and Ajax. Everytime Maybe the Datepicker is "double called" everytime an ajax call is made. Something very similar to this question. But the Datepicker hangs even if I just close the dialog, meaning that the problem starts when the first ajax call is made.
Anyone can help me to fix this? Maybe returning false somewhere or destroying the datepicker before creating a new one.
UPDATE 01/12/2012
Sorry for the delay, guys and thanks for the help.
None of the solutions posted here worked. But, again, I thank you all for the help.
I found a boolean property $.datepicker.initialized that returns false on the first time I load the dialog, and returns true the second time. Now I can avoid the crash the second time. First problem solved.
But I still don't know how to "reinitialize" the datepicker so it can be shown when the textbox is clicked.
Still looking for a way to reinitialize it.
Also, changed the OK button code to this and works fine:
"OK": function (e) {
$.validator.unobtrusive.parse($form);
if ($form.valid()) {
$modal.parents('.ui-dialog').find('button:contains("OK")').button('disable');
$.post($form.attr('action'),
$form.serialize(),
function (data) {
if (submodal) {
carregaParcial(titulo, id);
}
else {
$('#maindiv').html(data);
}
removeModal($modal);
});
}
The $form.serialize() function already returns the html in the data variable, so, I just need to get its content and set as HTML of the maindiv.

Try this jquery datetimepicker function when submit the dialog or cancel the dialog.
$('.datepicker').datepicker("destroy");

You are using the "load" method incorrectly for your purposes. jQuery default behavior for load method when no selector is passed is to go to the URL specified, execute the JavaScript that exists on that page then load in the DOM into the jQuery object calling it.
If you pass a selector into your load method, the jQuery load method will not execute the script and will only load the dom in you jQuery object.
Change it to:
$('#maindiv').load(telaAtual + ' #maindiv > *')
This assumes your "telaAtual" URL has #maindiv on the page and then gets all of its children and loads them into "#maindiv" jQuery object.
We can go further and find out the particulars of the hanging but solving the load issue will be the first thing to consider. If it continues hanging it is worth further investigation.

Just a guess, not an answer:
Try to remove the dialog, not just close it.
...
$modal.dialog('close');
$modal.remove();
...
Maybe that helps?
BTW: With this you are clicking on the "OK" button by opening the dialog, don't you?
$modal.parents('.ui-dialog').first().find('.ui-button').first().click();
And then you load some content, so that happens when the dialog is opening?
$('#maindiv').load(telaAtual);
And if the telaAtual returns content which will open the dialog again, you are maybe stucked in an endless loop?

In this code the only very minor syntax issue might be the last unnecessary comma after the dayNamesMin. Shouldn't cause any hanging, but remove it and give it a try. Other than that this code looks fine, so the issue is somewhere else.

I've the same issue here, and in my case, that solution worked:
http://forum.jquery.com/topic/datepicker-in-modal-dialog-problem-with-populating-a-date-field
I just assign a random string to datepicker's input ID.

jQuery event not firing until second click?

I have the following jQuery code. The first time I click a link, nothing happens; however, upon clicking the link the second time, the expected action occurs.
$("a[rel]").bind("click", function(){
$(".close_button_change_password").attr('id','change_password_'+$(this).attr('id'));
$(this).overlay({
// disable this for modal dialog-type of overlays
closeOnClick: true,
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.8
}
});
});
Here's my HTML:
change password
Does anyone know how I might go about fixing this problem? Thanks in advance for any assistance.

Try
$("a[rel]").live("click", function(){ ....
or you could try.., but I dont think this would solve it.
$("a[rel]").live("change", function(){ ....
And make sure its in DOM ready.
You could try and prevent the default action, maybe this is interfering with your first click.
$("a[rel]").bind("click", function(event){
event.preventDefault(); // <---------^^
$(".close_button_change_password").attr('id','change_password_'+$(this).attr('id'));
$(this).overlay({
// disable this for modal dialog-type of overlays
closeOnClick: true,
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.8
}
});
});

First of all, embed your code with $(document).ready({}) statement. It makes sure you'r dom will be affected with code only after all html syntax is parsed by browser.

Try
$("a[rel]").click(function(){alert($(this).attr("id"));});
to see if there is something wrong with your HTML code. then you can add other statement in order to debug your js code

From : http://flowplayer.org/tools/overlay/index.html
// select one or more elements to be overlay triggers
Setting the overlay to the click attribute of HTML might be redundant. Based on the above, I would assume that the overlay is already activated on click.