I want to display the image right after uploading it.For this I want to reload the div with id="imagecontainer" in the success function of ajax.
Please do not tell about using ("$id").load("href") function as it does not work in firefox and is very clunky on chrome.
Any ideas how to achieve this?
So you want to reload the image, but it has the same url? You can force the image to load anew by appending a random url parameter. That way, the browser thinks it is a new resource, but the server will simply ignore the url parameter.
var $img = $("#imagecontainer");
$img.attr("src", $img.attr("src")+"?"+(new Date()).getTime());
// my/path/to/image.jpg -> my/path/to/image.jpg?1401742135778
Using (new Date()).getTime() is better than Math.random() because the same time won't ever occur twice. This method is also known as cache busting
Reload the src attribute of the image. $("#imgsrc").attr("src", path); where path is your image's url path.
You can modify the source of the image directly like this
$('#imgsrc').attr('src', data.url)
Related
I have image gallery and am updating front-end, is there a way to use javascript or jquery or any other front end technology to identify which image was loaded from cache? I would like to apply additional class for those items.
Thanks for any sugestions.
Short answer :
No
Long answer :
No, and there is a reason for that :
If you could know which element of tha page was from the cache, you could deduce that your user have been to the same page or another page with the same element/ressource. It would be a massive potential privacy breach.
A similar problem was arised with the changing color of link if they are visited (see http://dbaron.org/mozilla/visited-privacy for more info)
You can use the function below. However it will load the image if not cached.
function isCached(src) {
var image = new Image();
image.src = src;
return image.complete;
}
I'm writing a Google Chrome extension and I want to show the first image of a webpage (for instance: a blog) in the popup.htm. So far I know how to implement the favicon so I was trying to work backwards and edit the favicon into the first image of the page. The problem is the favicon was so simple! All I had to write for a given variable was
function favicon(a)
{
return "chrome.../" +a;
}
Now, I can find the img.src of a background page. But I'm not sure how to find one of a unique page (submitted by the user). I've googled every way my vocabulary permits and so far have come up with this...
function getLavicon(a)
{
/*
find first image on page requested
get url of first image
return url
*/
return $(localStorage.getItem(a)).find('img').first().attr('src');
}
It returns a blank image. Let me know if screenshots are necessary.
Why use jQuery for this ? You can get the first image url on the page by using the following code:
var firstImage = document.getElementsByTagName("img")[0];
console.log(firstImage.src) // This will print out the source of the image on the console
Now you can use the source of the first image whenever you want just by using firstImage.src
Pretty sweet and clean huh ? :)
I have a page on a website that is just an image tag. When the page is loaded, it makes an API call and changes the source of the image depending what picture is available that day. For example, after an API call has been made (with an example picture):
<head>
<body>
<img src="http://www.tizag.com/pics/htmlT/sunset.gif"/>
</body>
</head>
My goal is to be able to use the URL of the page with just the image as the source of an image on any other page. Other sites would then be able to use the URL of the page with the image.
In other words, how would I take the source of the image on the page above and use it is the source of an image on a different page?
I'm not sure that I completely understand Your issue, but can't You just use the same source URL on other pages?
Maybe You want to have reference to that image so when You want to change this image on all pages You wouldn't have to do this on all pages but just one. Then it would be simpler to just replace file.
I think you should use javascript script that would be verifying which image should be displayed.
Can't you just use the same API to get the source on the other site?
If you can't:
First, get the XML from the image-only-site and parse it as DOM elements.
Next, get the img element's source.
$.ajax({
url: 'your-url', success: function(data) {
var xmlString = data, parser = new DOMParser(),
doc = parser.parseFromString(xmlString, "text/xml");
var src = doc.firstChild.src;
}
});
i'm currently working on a function (started after Buttonclick) to print a document in Lotus Notes (IBM Domino Designer 9.0 Social Edition Release 9.0). I have a custom control which creates a new document to the database. After saving the document its opened in read-only-Mode. There you have a button which will redirect you to a new window where the same contents are displayed without any layouts and something else (just the Text). Now its possible to print the page with Ctrl+P. There are two differen xPages for that.
Distribution.xsp
DistributionPrint.xsp
First of all i'm using
path = facesContext.getExternalContext().getRequest().getRequestURL();
to get the current page URL. After that there is an option to replace the current Page of the path (Distribution.xsp) into DistributionPrint.xsp.
var replacePage = #RightBack(path, "/");
path = #ReplaceSubstring(path, replacePage, "DistributionPrint.xsp");
When im testing it the replacement successfully worked. After that i'm bulding a new URL for the specific document to open with the new path. Finally everything is placed into the view.postScript method:
var docid = docApplication.getDocument().getUniversalID();
view.postScript("window.open('"+path.toString() + "?documentId=" + docid + "&action=openDocument"+"')")
Now my Problem starts. At 99% of my trys the new window is opened like i said the programm to do. But there are some kind of documents where i click on the button and he doesn't open a new window and trys to open the old Distribution.xsp url. I already tested out the path he wants to open at these kind of documents by using the debugtoolbar. The result of the button click returns the completly correct URL which should be opened. I can also copy that url and paste it manually into my browser => it works! But if i want to open that URL by a buttonclick and viewPostScript nothing happens.
Has anybody expierenced the same problem like me? Maybe one of you can help me through that problem. Its really annoying that everything works finde at 99% of my documents but at some documents it doesn't work although the given url is 100 percent correct.
Thanks for everyones help!
Try adding you code into a javascript function on the page and call that function from your view.postscript code
Or as Panu suggested add it to onCompete code
If the URL is correct then it sounds like a problem with view.postScript. Try with <xp:this.onComplete>.
Other things to try:
Use var w = window.open(... Plain window.open may change the URL of
current window.
Double check the URL with an alert();
You might be barking up the completely wrong tree. Did you try, instead of creating a second page for printing, create a second CSS stylesheet?
Using #Media Print you can tell the browser to use that stylesheet for printing. There you set all navigational elements to display : none and they won't print.
Removes the need to maintain a separate XPage for the printing stuff.
Thank you everyone for your suggestions. The solution of Fredrik Norling worked for me. I placed the Code into a function and called it at the buttonclick. Now every page is opened as expected. Thank you very much for the help!
I want to use JS/jQuery to reload the current page and jump to an anchor.
I've tried using:
window.replace('currentpage/#msg'+.message_id);
And
window.location.href ='currentpage/#msg'+.message_id;
Both change the url in the address but fail to reload the page.
Any other ways to do it?
call this after changing url :
window.location.reload(true)
There are more ways to do it: http://www.phpied.com/files/location-location/location-location.html :)
Try this way
First get the current URL
var CurUrl = window.location;
Now change the redirect URL in the browser without further'
history.pushState(CurUrl, "OldPage", "NewPage");
Now the browser URL has changed but the page was not redirected and get the URL again'
var UrlRedirect = window.location;
here you can write your code
Finish redirecting
window.location = UrlRedirect;
Another way to force the redirect is to make sure that the URL does change, by adding in a random element. I often add a timestamp to the end of a URL.
This has the added benefit or drawback that each page load will look unique to caching systems/etc. You may or may not want this.