I have a simple JQuery, which on click of button loads an iFrame as following
<script>
var Previewer = function (Link_ID) {
$.ajax({
type: "GET",
url: "/Home/GetPreview",
data: { ID: Link_ID },
datatype: "json",
success: function (result) {
document.getElementById('previewerContent').innerHTML = "";
document.getElementById('previewerContent').innerHTML = result;
console.log(result);
},
error: function (jqXHR) { // Http Status is not 200
alert('ERROR - ' + jqXHR.status);
}
});
}
</script>
The Results in Console are following
<div class="iframely-embed"><div class="iframely-responsive" style="padding-bottom: 56.2873%; padding-top: 120px;"></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>
which means that my controller is returning an iFrame
But when i tried to display that using document.getElementById('previewerContent').innerHTML it doesn't show anything
Where if I use document.getElementById('previewerContent').append(result) it simpley shows the iframe code -
Any idea what am i doing wrong here?
EDIT:
I also tried to change the datatype: "json", to datatype: "text",
Also, the script <script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script> i tried to load this on PAGE LOAD (no success)
I apologize, I thought it was a Jquery issue, but digging the documentation it was a product related question. I reload the script by calling .load after adding innerHTML -
Related
This is my div:
<body>
<div id="content"></div>
</body>
and this is my code behind in js:
function jsonParser(sender) {
$.ajax({
type: "GET",
url: "http://MYURL/customers/outlook?email=" + sender + "&jsonp=true",
dataType: "jsonp",
success: function (htmlPage) {
document.getElementById("content").innerHTML = htmlPage.htmlText;
}
});
}
And this is the code that calls it:
function detectActionsForMe() {
var item = Office.cast.item.toItemRead(Office.context.mailbox.item);
var sender = item.sender.emailAddress;
jsonParser(sender);
}
I can't actually get the downloaded html page to show up in the Outlook (2016) addin window. I already tried using an iframe but I was obtaining nothing, neither.
I am sure about the page I am getting, I find just weird that it won't show up in the outlook box.
I found out what was missing, thanks to http://www.sitepoint.com/jsonp-examples/
Basically, I just added the following, to the ajax call:
contentType: "application/json",
dataType: "jsonp",
and it all worked! :)
I need to preload ajax data before attaching it to a div and for that I have this code:
$.ajax({
url: 'ajax.php',
data: { modelID:id },
type: 'post',
success: function(result){
$(result).load(function(){
$('.view_'+id).html(result)
$('.view_'+id).find('.brandModelGallery').bxSlider({})
$('.view_'+id).addClass('loaded')
})
}
})
And this doesn't return anything. If write it as $('.view_'+id).load(result) then I can see all the contents of result in console as a syntax error so it fetches them alright, but not this way. Why is that?
I've create an example on jsfiddle
Html:
<div id="d1"></div>
<div id="d2"></div>
js:
$.ajax({
url: './',
data: { modelID: '1' },
type: 'post',
success: function(result){
console.log(result);
$('#d1').html(JSON.stringify(result));
// A fake object as your result.
var bxSlider = $('<ul class="bxslider"><li><img src="https://i.imgur.com/KsV6jS5.png" /></li><li><img src="https://i.imgur.com/bqcK47I.png" /></li></ul>');
// Do thing only when all img loaded.
var unLoadimges = bxSlider.find("img").length;
bxSlider.find('img').load(function() {
--unLoadimges;
console.log("loaded, left: " + unLoadimges);
if (unLoadimges === 0) {
bxSlider.appendTo($("#d2")).bxSlider();
}
});
}
})
When you append img element to your page, it doesn't mean its loaded. Listen to its load event.
Edit: Just make the bxSlider works on my example now.
Not sure if there's a better way to check whether all images loaded or not.
Im trying to create kind of a user interface with a downloaded html-string and an iframe. What my 'Submitta' ActionResult does is returning a html-page as a JSON string. And then I try to append it to an iframe so I can record and save clicks. See code below:
$.ajax({
url: '/Home/Submitta/',
type: 'POST',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(paket),
success: function (data) {
var iframe = document.getElementById('frame');
var html = data.Url;
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
renderat = true;
$('#frame').on('load', function () {
console.log("load");
var iframeDoc = document.getElementById('frame').contentWindow;
$(iframeDoc).mouseover(function (event) {
}).click(function (event) {
console.log($(event.target.valueOf()));
});
});
},
error: function (data) {
}
})
Which I am having problem with rendering due to a browser error:
Uncaught SecurityError: Blocked a frame with origin "http://localhost:xxxx" from accessing a frame with origin "null". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data". Protocols must match.
Am I going at this project the wrong way? Is it not possible to work with iframes in this way?
For the record does this JQuery click function work when the iframe is directly rendered from a local .html file. But not when it has html appended to it.
Think of an iFrame like a window into another tab on your browser... opening a page within a page. What you're doing, is trying to transmit the data via json, generate the page on the client-side, and then put that page in the iframe... if that's the case, then you could just eliminate the iframte all together and put your generated HTML into a div or something using jQuery.
$.ajax({
url: '/Home/Submitta/',
type: 'POST',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(paket),
success: function (data) {
// take "data" and do what you gotta do to
// get it into HTML...
var resulthtml = "";
// put that HTML generated above into
// your results div like this:
$("#resultsdiv").html(resulthtml);
},
error: function (err) {
$("#resultsdiv").html("Something went wrong.");
}
});
index.html
<html>
<head>
<script src="//code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<div id="myDiv" name="myDiv" title="Example Div Element">
</div>
</body>
</html>
jquery.js
$.ajax
({
type: "GET",
url: "url",
dataType: 'image/png',
async: false,
beforeSend: function (xhr) {
xhr.withCredentials = true;
xhr.setRequestHeader("Authorization", "Bearer xxx");
},
complete: function (data) {
console.log("yello");
$('#myDiv').html('<img id="target">');
}
});
Simple enough question,
Why is this line not working? $('#myDiv').html('<img id="target">');
When I examine the source of the page nothing shows up, no image tag. I'm not quite understanding why as I am sure I am doing everything correctly.
Thanks!
Wrap your function inside a .ready():
$(function()
{
$.ajax
({
type: "GET",
url: "url",
dataType: 'image/png',
async: false,
beforeSend: function (xhr) {
xhr.withCredentials = true;
xhr.setRequestHeader("Authorization", "Bearer xxx");
},
complete: function (data) {
console.log("yello");
$('#myDiv').html('<img id="target">');
}
});
});
This makes sure to call the ajax method after the DOM is loaded.
If the javascript you posted is the complete jquery.js file then what is happening is the javascript is being run before the browser has rendered the div tag so the jquery selector doesn't find anything, hence your console.log call returning undefined.
Here is a quick fiddle I through together to verify your javascript, note that I wrapped the image creation in a $(function(){}); block. this is jquery shorthand for document.ready(function(){});
try console.log($('#myDiv').html()) after your code and see the value in your console, you will find the image there but it wont show in source view
(In Firefox and IE9 it doesn't work. In Chrome, this works)
If I remove the ajax, the hide / show JQuery works. Any solutions?
<form id="ppform" action="blah.asp" method="post">
<div id="saleload">Blah</div>
<button id="sendbutton">Send</button>
</form>
$(document).ready(function(){
$('#saleload').hide();
$('#sendbutton').click(function() {
$('#saleload').show();
$.ajax({
type: "POST",
url: /blah/blah.asp,
data: reqBody,
dataType: "json",
success:function(data,textStatus){
if (data.redirect) {
window.location.href = data.redirect;
}else{
$("#ppform").replaceWith(data.form);
}
}
});
});
});
This line:
$("#ppform").replaceWith(data.form);
is replacing the whole form contents with the response from your Ajax request. This means the click handler you setup will be gone too, because #sendbutton will be gone. Even if you have another button with the same ID inside data.form, it won't work. You have to use event delegation instead:
$(document).ready(function(){
$('#saleload').hide();
$(document).on('click', '#sendbutton', function(){
$('#saleload').show();
$.ajax({
type: "POST",
url: "/blah/blah.asp",
data: reqBody,
dataType: "json",
success:function(data,textStatus){
if (data.redirect) {
window.location.href = data.redirect;
} else {
$("#ppform").replaceWith(data.form);
}
}
});
});
});
Also: you seem to be posting an undefined variable reqBody to your server, and, as lonesomeday said above, you were missing quotes around the URL.
The obvious reason is that there is an error with your Javascript that causes the whole section not to execute. Quickly looking through your code shows this line:
url: /blah/blah.asp,
Strings need to be enclosed in quotation marks:
url: "/blah/blah.asp",