What is the correct way to open a SeaDragon viewer with straight XML data? I need to know what I'm doing wrong here. I have a bunch of DZI images that are hosted on another domain that I need to display, but I can't do a simple OpenSeadragon() call with the appropriate URLs because the domain the images are on has no "Access-Control-Allow-Origin" header. As such, I've set up a proxy controller to retrieve the XML data and pass that back to my web page. However, I can't get the images to load with the XML data.
I've been using a working image (from a different website) to test the issue and figure out what I need to do. When I use the following code, the image displays:
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "../../Scripts/openseadragon/images/",
tileSources: "https://familysearch.org/dz/v1/TH-1971-27860-10353-27/image.xml?ctx=CrxCtxPublicAccess&session"
});
Now I'm trying to display the image the way I am with my Proxy controller, by retrieving the XML and using the XML in my OpenSeadragon call:
var ajaxresult = $.ajax({
url: "https://familysearch.org/dz/v1/TH-1971-27860-10353-27/image.xml?ctx=CrxCtxPublicAccess&session",
type: 'get',
success: function (data) {
// data is an XMLdocument object
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "../../Scripts/openseadragon/images/",
tileSources: data
});
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText || textStatus);
}
});
I get a blank image and my console says that every tile failed to load. I have also tried pasting the xml directly into the tileSources field as a string, like this:
tileSources: '<?xml version="1.0" encoding="utf-8"?><Image TileSize="256" Overlap="1" Format="jpg" ServerFormat="Default" xmlns="http://schemas.microsoft.com/deepzoom/2009"> <Size Width="6233" Height="4683" /></Image>'
but that doesn't work either.
What am I doing wrong here?
I found a way to resolve the issue. Because my images were hosted on an S3 account, I discovered that I could log into the account and add CORS configuration to each of the image buckets. So, no need to use Ajax to pull the XML; once I added CORS to the buckets, I was able to put the URLs in the OpenSeadragon call directly.
Unfortunately OpenSeadragon does not yet support passing the XML directly; you'll have to break apart the info. See the answer here:
https://github.com/openseadragon/openseadragon/issues/460
Related
This is in reference to http://jsfiddle.net/DLy6j/
var echoHTML = '<img src="URL-TO-MY-IMAGE.JPG"/>';
$.ajax({
type: 'post',
url: '/echo/html/',
data: {
html: echoHTML,
delay: 2
},
beforeSend: function () {
$('#slider0-4').html('Loading...');
},
success: function (markup) {
$('#slider0-4').html(markup);
$('#slider0-4 img').on('load', function () {
//$(this).after('<div>Image loaded</div>');
alert('Loaded');
});
}
});
(jQuery wait till AJAX page is fully loaded).
This is my first attempt trying to use $.ajax
I cannot get my image to load. I have changed the echoHTML to the image-URL on my server, AND have tried uploading my html on there thinking it might not work offline, but to no avail.
My guess is that somethings wrong here "url: '/echo/html/',". Have tried using my image in the JSFiddle above there and it loads just fine.
Somebody show me the correct way to do this?
I think you've just been a little mislead by that jsfiddle example.
When the url '/echo/html' is being passed in, it is sending a request to that url, which handles the data that you pass through, and then passes something back to the success function. jsFiddle allows you to simulate ajax requests because they have an Echo API which has these pages built.. but when you call it, it is trying to call http://www.bilalbinsaeed.com/echo/html/, which does not exist.. which is throwing an error, which means the success function will not run properly.
You will need to create another file which handles your ajax request. I would recommend doing a little more research into what AJAX is, and how it works.
It loads an image for me. It is a little unclear what you are asking, but it seems like you are getting hung up on getting it to load from JSFiddle to your site. Don't try to do that. Cross-Origin Resource Sharing won't work on JSFiddle without changing the headers on your site.
Ealier I tried using same functionality with colobox but could not success, now I'm trying to use nyroModal and trying to send ajax data using post method with iframe. But its not going through. Here is the code which I have tried:
var src = "this is test data';
$.nmManual('try_python.php',{
callbacks: {
initFilters: function(nm) {
nm.filters.push('link');
nm.filters.push('iframe');
},
ajax:{data:'code='+src, type:"post"}
}
});
I'm able to open iframe and content from try_python.php is properly displayed in the frame but passed data is not accessible to try_python.php.
I will really appreciate you for any input in this regard.
Kind Regards
Mohtashim
I could not success in posting my content using POST method but I found a workaround where did the following:
(a) Saved my content in a hidden <div id="source" style="display:none;">...</div>
(b) Access this content from the iframe window upon successful load using the following:
var code = window.parent.$("#source");
and this is what I wanted to have....May be it will help many others. If you find a solution to pass direct content using post method kindly share.
I'm uploading files from a form on foo.bar.
I'm using jquery.form.js because I don't want the browser to navigate away.
var ref = this;
var options ={
success: onSuccess,
beforeSubmit: onBeforeSubmit
};
$("form#file-upload).ajaxForm( options );
It works when the "action" attribute is set to the same domain. But I get an error if the "action" is on a different domain (e.g. api.foo.bar )
Unsafe JavaScript attempt to access frame with URL
http://api.foo.bar/file/ from frame with URL http://foo.bar/index.php.
Domains, protocols and ports must match.
I am aware the jquery.form plugin is creating an iframe and posting the request there.
Is there a way to avoid the error?
set dataType:"jsonp". See here: http://api.jquery.com/jQuery.ajax/
Here's more info on jsonp:
http://en.wikipedia.org/wiki/JSONP
http://remysharp.com/2007/10/08/what-is-jsonp/
I have an application that contains a grid and button for the user to be able to export the grid to excel. I want to be able to show the save as dialog box when the server responds with the excel file.The server accepts the parameters as a JSON object. Here is my code:-
Ext.Ajax.request({
url: '/export/excel/',
method: 'POST',
//Send the query as the message body
jsonData: jsonStr,
success: function (result,request) {
Ext.DomHelper.append(document.body, {
tag: 'iframe',
frameBorder: 0,
width: 0,
height: 0,
//src:result,
css: 'display:none;visibility:hidden;height:1px;'
});
}, //success
failure: function (response, opts) {
var msg = 'server-side failure with status code: ' + response.status + ' message: ' + response.statusText;
Ext.Msg.alert('Error Message', msg);
}
});
I know there is a similar question ( ExtJS AJAX save as dialog box) but that references a static file on the server.In my case, depending upon the json sent the result is going to be different each time. I get back the entire excel file that i want in the result.responseText. What needs to be done so that the dialog box popup up asking the user for save as options? Also, im not sure how the src in the domhelper should be configured. Any help would be really appreciated.
I believe the only way to do this in a totally client agnostic way is to force it from the server-side using a Content-Type of: octect-stream and Content-Disposition of 'attachment' with a suggested filename. See:
http://www.w3.org/Protocols/rfc2616/rfc2616-sec19.html#sec19.5.1
and
http://www.ryboe.com/tutorials/php-headers-force-download
You can also use so-called 'dataURIs' but they have their own set of issues:
http://en.wikipedia.org/wiki/Data_URI_scheme
My recommendation would be to return EXCEL content dynamically on the server and just make the button a link to that url that POSTS the current data your working with and sets the correct response headers to trigger your browser to download the file. Since you are doing an AJAX call and not letting the web-browser get the URL directly, any HTTP headers you set to control the way the browser interprets the content won't matter because you are doing it in JS not in the user's browser. By returning the content directly to the user through a link on the server, you'll get around this problem.
Since you actually want the user to click on the link, I don't think AJAX is appropiate here.
I made the server side return the path of the location the file is created and saved, instead of sending the file as an attachment in the response and hence avoiding the problem of setting the headers in the response. Then i just set the source of the iframe in the code to the path that gets returned in the response (result.responseText).
I have my jquery mobile app pulling data from our mysql db using JSONP. The data is pulling fine, but the problem comes when I go back to the previous "page" in my app then click on a different option, it doubles the data on the next screen, and it will just keep stacking the data as many times as I do that. What am I missing?
The app doesn't look right in any browsers, but it looks fine in the ios simulator or appmobi simulator. I can post some code if needed, just know it won't look right in your browser.
Thank you for any help you can provide
$('#two').bind('pagecreate',function(event){
var img = getUrlVars()["st"];
var photo = $('#img');
$.ajax({
type: 'GET',
url: 'http://serverhidden/json/img.php?st='+img,
dataType: 'jsonp',
success: function(data) {
$.each(data, function(i,item){
var image = '<img class="stmap" src="images/states/lrg/'+item.img+' "/>';
photo.html(image);
});
},
error: function(e) {
//called if there is an error
//console.log(e.message);
}
});
});
Make sure you are not subscribing your event multiple times. It seems silly but is easy to do.
I would recommend you add logs to your JQM site so that you can see how many times your site is being updated.
You should also be aware that updating a JQMobile page often requires a call to a method to update content after a page is rendered. See here: jQuery Mobile rendering problems with content being added after the page is initialized
Hope those help.
So without any code from your project this is a shot in the dark but it seems like you populate a pseudo-page with information on pageshow with an .append() call. Instead of using .append(), use .html() as it will replace the information already present rather than add to it.
If each state has an individual page then you can bind to the pagecreate (or similar) event so the data will only be appended once rather than on each pageshow event.