How to make sure ajax is fully loading content using .load - javascript

We have a site where on the left we are displaying our products and on the right shows the product the user clicks on (on same page). When the page loads we have the first product being shown on the right by default, when the user clicks on a new product then the right columns changes to show the new product (via ajax).
Here is how I have the ajax setup:
<script>
jQuery(document).ready(function($){
var defaultValue = $("ul.products li.shop-thumb a:first").attr("href");
$(".main").load(defaultValue);
$("ul.products li.shop-thumb a").click(function(e){
e.preventDefault();
var addressValue = $(this).attr("href");
//alert(addressValue );
$(".main").load(addressValue);
//$("a.woocommerce-main-image").addClass("image-popup-no-margins");
});
});
</script>
We are using magnific popup to show the larger image of the product when the user clicks on the (right sides) main product image.
This works great for the first (default) product but when the user clicks on a new product and the content to the right changes, then the user clicks on the main image, the pop up fails to load. So in other words it works when you first load the page and the default product is shown, but fails to fire when a new product is clicked.
Here is the product-image.php filter which just adds our class of image-popup-no-margins:
apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
And in the footer we have this:
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
Im may have given too much info here but I felt better safe then sorry, so perhaps its better if I give you a link for you to see what I mean. When you visit the page, click on the big image on the right and you should see the popup functioning. Now try clicking on one of the products on the left so the main image on right changes and try to click it again, the default behavior happens instead of our pop up.
I checked classes and everything looks fine, I'm sure it has to do with the ajax but can't get it worked out.
Update:
After more tinkering with this I think the problem is that the .load is not 'reloading' the content when the anchor is clicked. Like I said it works when you first load the page and click on the first image, but when you change the image and the ajax is called I don't think it really reloads the content in the main container. How would I make sure the ajax is fully loading the content like it does when you first open the page? If you go to the site and click the big image on right, it works, change the image by clicking on a product from the left and the pop up fails to work and so does the "Tag It" pop up… Maybe this is less specific to magnific popup and more of a basic ajax

It seems your server is just quite slow and delivering the content required for the new popup. you can see the get requests by viewing the firebug console. once these have completed it works perfectly. I suggest upgrading for hosting or finding another way to deliver the higher quality images faster, such as imgur or other image hosting services.

So the problem was indeed with the magnific popup, replaced it with Fancybox and all seems to be functional correctly -- Thanks for the help guys

Related

How to initialise a lightbox

I tried to use a page on
http://dimsemenov.com/plugins/magnific-popup/
to start with the project. So I took the code an assumed to find out, what I need from the larger page for me. Though, cutting anything away made id not function at all.
What resources are needed (css, js, links)?
I need on several pages a light box and want to load the first picture as soon as the page loads. Tried to build a test page on
http://grillparzerhof.at/magnificversuch/index.html
though there is a light box not at all. It is a very beginners question; please help.
~ Karl
This is the code on that page in Public Methods you should use to fire the lightbox on page load, this instruction is near the bottom of the Documentation page:
// Open popup immediately. If popup is already opened - it'll just overwite the content (but old options will be kept).
// - first parameter: options object
// - second parameter (optional): index of item to open
$.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);

HTML/CSS Modal Dialog With Image (Sweetalert or Other)

I'm making a website and have found the need to make modal dialogs. As I needed to include images and didn't like the look of the native alert() function, I settled on sweetalert. So far, sweetalert works great but I need the ability to include images in the dialog (theoretically, sweetalert should allow this as it allows for arbitrary HTML content).
However, when I try to do this, the dialog becomes off center (vertically).
The code I use to create the sweetalert with image is:
var options = {
title: 'Title',
text: '<img src="http://lorempixel.com/400/200/sports/1/">',
html: true
};
swal(options);
Brief JSFiddle demonstrating the problem: here
So how can I use sweetalert to make a modal dialog that contains a custom image in it (not for the status icon, but actually in the dialog content)? If such a task is not possible using sweetalert, then is there a library I can use that makes good looking dialogs and supports what I'm trying to do? Worst case, I suppose I could write my own alert framework but I'm trying to avoid that.
Thank you for your time and assistance.
Extra Info: I assume this is because sweetalert calculates where the dialog should be, puts the dialog there, makes it visible, and then the image loads (making it appear off-center), but I could easily be wrong. This hypothesis is furthermore substantiated by the fact that, when using a constant image, the off-center phenonmenon only happens on the first load (every subsequent load the dialog is centered). I assume this is because the image is cached after the first load and thus the centering calculation is correct when sweetalert makes it on every subsequent load.
EDIT:
Here's a screenshot of what the off-vertically-centered dialog looks like for me on first load in JSFiddle:
Note the lack of vertical centering. Screenshot taken on Chrome v45.
Have you tried adding dimensions to the image? if that is acceptable, that is working fine the first time for me.
Try this jsfiddle here
$(document).ready(function() {
$('#trigger-alert').click(function() {
var options = {
title: 'Title',
text: '<img width="250" height="200" src="http://lorempixel.com/400/200/sports/2/">',
html: true
};
swal(options);
});
});
I would also suggest looking at Jquery UI dialogs as an alternative and Toastr if you are looking to add notifications.
Adding another approach by preloading image.
$(document).ready(function() {
var myImage = new Image();
myImage.src = 'http://lorempixel.com/400/200/sports/7/';
$('#trigger-alert').click(function() {
swal({
title: 'Title',
text: "<img src='"+ myImage.src +"'/>",
html: true
});
});
});
jsfiddle here

Jqgrid custom load

I am loading two json data as below during the start up.
$(document).ready(function() {
loaddata1();
});
$(document).ready(function() {
loaddata2();
});
Both these are shown in two grids. jQuery("#grid1").jqGrid and jQuery("#grid2").jqGrid
At this moment both these grids are being load when the page loads first time.
What I need is to create hyperlink so that when we hit that link the second grid is loaded as a popup and not in the first page?
Just FYI I have already tried "name:'id', index:'id', key: true, width:90, formatter:'showlink',formatoptions:{baseLinkUrl:'#'"
in one of the column so that, by clicking that value I should load "#grid2", as a popup. But didn't help.
Here is the simple solution.Use JQXWindow to show your grid as a popup and then you can show whatever you want in that window. Refer below link.
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/index.htm#demos/jqxwindow/defaultfunctionality.htm

Making jquery Dialog working between two pages

I have a dialog setup as follow
$("#myDialog").dialog({
autoOpen: true,
close: function(event, ui) {
$("#myDialog-content").html("");
$(this).dialog("destroy");
}
});
$("#myDialog").css("min-height","");
$("#myDialog-content").html("Loading...");
$.ajax({
...
success: function(response) {
$("#myDialog-content").html(response);
}
});
This working fine I load and close dialog in same page but not able to make it work properly where I move between pages.
Here is a my page flow
From source page(say PageA) I make AJAX call to load the page containing dialog div(say PageB).
Link on this page call above method to display dialog. (For first time it runs OK).
When I click close button. Dialog close and with firebug I can still see dialog div at the end with UI classes but in hidden state.
If I go back to source page (Page A) and reload the PageB.In firebug I can see two div - one originally from JSP and second one from step 3.
Now if I click button to load dialog box - It used hidden to populate new data and never use new div created by jquery. So I just have blank dialog box.
I am not sure if this is jquery Dialog issue or my page flow. One possible solution I though of is use remove in close function to remove dialog div completely but it puts burden to create this div everytime page PageB is loaded. Is there any other way or any thing I am doing wrong in this scenario?
If i understood correctly the situation, You have 2 options:
If you somehow cleaning the content of "Page B", remove the modal
then.
If you do not have the cleaning mechanism like that, just
.remove() content of modal on close
Sidenote: i would advise not to use jquery for .css and .html('Loading...'). Also, it is good to cache jquery elements in variables e.g var dialog = $("#myDialog");

Dynamic size bootstrap modal dialog in meteor

I have an app that I need to show images in (after clicking on a thumbnail), written in meteor.
I'm able to store the images in gridFS and pull them out fine, but am struggling to work out how to dynamically size a modal dialogue for showing the full size image.
I think I need to trap the bs-show event for the dialogue and set the .css.width property to the size required, but I have no idea how to intercept the bs-show event in meteor.
I have tried putting the following code in the app
Template.projectImageItem.events = {
"click .open-modal" : function(e,t) {
e.preventDefault();
Session.set("selectedImageId", t.data._id);
Session.set("showProjModal", true);
//console.log("Image ID: "+ Session.get("selectedImageId"));
console.log($("projectImageModalID").find('modal-body'));
$("projectImageModalID").find('modal-body').css({
width: '20px'
});
$("#projectImageModalID").modal("show");
}
};
and in the chrome debugger can see the object being returned to the consol log, but the css change has no effect before the show so I guess I'm not in the right place for this.

Categories