MVC4 render image with Ajax call - ajax

Masters,
I have a scenario where i have a list of Items and on clicking single item it gets details along with image src url using ajax call.
I want to display(render) image right on page.
Now Image source URL is a FileActionResult returning Base64 string.
The problem is the page does not render image although it is having correct Src URL.
And I don't want any additional Ajax call.
Please Help.
Thanks in advance.

How are you forcing the image to be updated?
The DOM is going to keep the image the same until you tell it to refresh the image -- I would suggest using something like
document.getElementById('theImg').src="/newImg.gif?unique=someuniquestring";
where someuniquestring is a new random datetime or something (to make sure browsers like IE don't cache the GET request).

Related

Fetch image from server and render it in

I want to fetch image from the server, save it locally and and display when user opens the show page - with Rubymotion.
I am using AFMotion to fetch the image url as follows.
In my show screen I can get the image url with news.image_url. My doubt is how do i pass this to the layout file where I can add some styles to it like
I have found a solution to my own question. This is what i have done.
In the on_load method of the show news page, I pass the image url and set the remote_image for the UIImageView to the image url passed.
I got the solution from the red potion documentation. http://docs.redpotion.org/en/latest/cookbook/networking/

Download pdf or image through ajax

I would like to send a lot of data through ajax request to my server which will generate pdf or jpg format according to that data.
Now i have done all that, my issue is to how output that generated pdf/jpg back to the user trough ajax? I guess i might be able to use json for that, but im not really sure how, and i think there would be a lot issues with pdf.
Also if some one gonna suggest using form with hidden inputs that will not work since i have really big multidimensional array with lot's of data and it would simply take to much effort to make it work.
By the way, i am using jquery, but anything else is acceptable as long as it does the job done without making me to rewrite half of my script.
To display a JPG
AJAX: You can return the data hex encoded (be sure to set the content type appropriately: header('Content-type: image/jpeg')). Then you just inject an <img/> element into the DOM and set it's src attribute to the returned Data URI.
HTML: Also, you could inject the <img/>'s with a normal src URL to some location on your server.
For PDF
It's a little more tricky. Some browsers display PDF's natively (Chrome/Firefox), others rely on optional third-party plugins. You can detect these plugins, but can't control whether the PDF is displayed in a window/frame or is downloaded.
If you choose to display, you can create a new window/tab to display it or display it in an iframe dynamically.

Insert metadata Viewport without being able to modify HTML

I'm gonna visualize on a WebView an external HTML page.. that I cannot modify.
Is there the possibility to insert in the HTML code "viewport" metadata before loading the request on the web view? I'd like to scale the page correctly in the UiWebview.
Thank you all.
I did not quite clearly understood your question..but guess you are trying to append meta viewport tag without modifying the actual html...if yes, you can do it using external Javascript...
document.getElementsByTagName('head')[0].appendChild( ... );
Make DOM element like so:
MetaVa=document.createElement('meta');
Metava.name='viewport';
MetaVa.content='......';
document.getElementsByTagName('head')[0].appendChild(MetaVa);

How to post a dynamic image to wordpress post?

I want to put a image into a post, but it seems I just cannot get it work.
For example, this one:
http://stockcharts.com/c-sc/sc?s=ACHN&p=D&b=5&g=0&i=t88400486500&r=9913
The output is a PNG file. So in HTML tab, i put,
< img src="http://stockcharts.com/c-sc/sc?s=ACHN&p=D&b=5&g=0&i=t88400486500&r=9913">,(I leave a empty space between the < and image otherwise, stackoverflow won't allow me to put a image tag here) it just won't show up the correct image. The image you will see is "go to stockcharts.com to view this chart", that is because the URL is wrong. If the URL is correct, the image will display fine. Any way to work around?
I was trying to play around with the formatting.php file, but so far, no luck.
(It is quite strange though, if you put the URL into your IE URL bar, and press enter, it shows up fine with a chart.)
Thanks.
Your URL is a web page, NOT an image. When you try to insert the link as an image, the html IMG tag is used to specify the FILE NAME to be inserted. The file can be on a different url but it should not refer to just another uri.
to get around it, you have 4 options:
Specify the image file name directly and not the uri with the img tag.
Use iframe and put the uri
use frame (I'd not go for this)
Use Ajax and fill it in a DIV tag - most effective in my opinion.

Ajax - How to change URL by content

I'll explain:
I have a picture gallery, the first page is display.php.
Users can flip through pictures using arrows, when you click an arrow it sends an Ajax request to retrieve the next picture from the db. Now I want the URL to change according to the picture displayed.
So if the first picture is:
www.mydomain.com/display.php?picture=Paris at night
I'll flip to the next one and the URL would be
www.mydomain.com/display.php?picture=The Big Ben
How do I do this?
The trick here are uri's with an anchor fragment.
The part before '#' points to a resource on the internet, and after normally designates to a anchor on the page.
The browser does not refresh if the resource is the same but moves to the anchors position when present.
This way you can keep the convenience of browser history from a usability point of view while replacing certain parts on the page with ajax for a fast and responsive user interface.
Using a plugin like jQuery history (as suggested by others) is really easy: you decorate certain elements with a rel attribute by which the plugin takes care of the rest.
Also kinda related to this topic is something called 'hijax', and it's something I really like.
This means generating html just like you would in the old days before ajax. Then you hijack certain behavior like links and request the content with ajax, only replacing the necessary parts. This in combination with the above technique allows really SEO friendly and accessible webpages.
You can use the jQuery history plugin for example.
changing the search of the url will load the changed url.
See also: stackoverflow, javascript changing the get parameter without redirecting
Do you really want to use AJAX here?
A traditional web request would work like this...
User navigates to display.php
User clicks "next" and location is updated to "display.php?picture=Big-Ben"
Big Ben is shown to user, along with a link to "display.php?picture=Parliment"
User clicks "next" and location is updated to "display.php?picture=Parliment"
And so on.
With AJAX, you essentially replace the GET with a "behind the scenes" GET, that just replaces a portion of your page. You would do this to make things faster... for example...
User navigates to display.php
User clicks "next" and the next image location is obtained using an AJAX request
The image (and image description) is changed to the next image
What you are suggesting is that you retrieve the "next url" using AJAX and then also perform a GET on the whole page. You would be much better off sending the "next" image when you send each page and not using AJAX at all.
this best describes everything i think: http://ajaxpatterns.org/Unique_URLs

Resources