We Keep Coding

img src not working as expected using JS/JQuery: previous image get displayed instead of new uploaded image

I have a form to upload images. By default the source is "images/noimage.png";
<img id="previewing" src="images/noimage.png" />
I store the path in the database. If I select a specific user and the form gets loaded I want to display the image for the specific user. I do this in the windows.onload event. However another image (previous image the user had, if user had one) gets loaded instead of the new one.
var Logo = 'Logos/123.png'; //path stored in Database
if (Logo!='') {
//If the user has a 'Logo', show it
$("#previewing").prop("src", Logo);
} else {
// if user has no 'Logo', show default image
$("#previewing").prop("src", 'Images/noimage.png');
}
This does not work as expected. What's wrong here?

If after reloading image getting change then most probably its Caching issue.
you may try adding some random string into image URL like
Logos/123.png?v=xyz

ckEditor Image does not get saved after upload when image selected

I am trying to solve a riddle here. Imagine the following. The user uploads one image, which a minute later he wants to replace. Thus he clicks on the image and selects the upload button again, chooses another image and uploads it. In the editor this image is shown, but when he saves the change, the old image is shown again.
My guess is, that this is due to the fact that only the src-attribute gets updated, but not the data-cke-saved-src-attribute. The question now is: How do I change that?
I should also mention, that since I have a blur-handler, that is asking the user if he wants to discard the change. This fires whenever an dialog opens, which is why I am "refocusing" the editor using the following snippet:
CKEDITOR.on('dialogDefinition', function (e) {
var dialog = e.data.definition.dialog;
dialog.on('hide', function () {
dis.ckEditor.focusManager.hasFocus = true;
$('.cke').show();
});
});

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

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

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

How to know what you are right clicking on for a google-chrome-extension

I am trying to write a Google Chrome extension to basically favorite pictures. So you see a picture on a page that you want to remember but don't want to manually save it or save the image URL. You will be able to right click on the image and add it to your image favorites with this extension.
I have everything figured out except for when the user right clicks on the picture, I can't figure out how to get the image URL from that action. The solution would need to work on any normal page on the internet. I am not sure if I need a normal listener or what.

Your context menu item's onclick handler should expect an onClickData object as its first argument. This object will contain a srcUrl property, which is the src property of the image that was right-clicked.
You'd set up your menu item like this:
chrome.contextMenus.create({
title: "Remember image as favorite",
contexts: ["image"],
onclick: function(data) {
console.log("we're about to save " + data.srcUrl);
// do whatever you need with data.srcUrl to save it
}
});