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! :)
Related
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 -
Hello there I am totally new to ASP.NET and learning it to my own. I am good at Java J2EE (Struts2 Framework)! I know how can i update or change any control/text inside any div element using struts2 and ajax code.
My Problem
Actaully, I'm trying to do the same thing in ASP.NET just for the learning! Suppose that I have a Default.aspx page with the javascript and ajax methods as:
<head runat="server">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript">
function Change() {
$.ajax({
type: "GET",
url: "temp.aspx",
dataType: "text/html;charset=utf-8",
success: function(msg) {
$("#changer").html(msg);
}
});
}
</script>
<title>Untitled Page</title>
</head>
<body>
<div id="changer">//this is the div i want to update it using ajax
Hello Old Text
</div>
<input type="button"id="but" value="Hello Changer" onclick="Change()"/>
</body>
and suppose that I have my temp.aspx as:
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<div id="changer">
Hello New Text
</div>
</body>
I just want to know if this is possible in ASP.NET because with Java I am familiar with such an operation but I don't know why this is not working in case of ASP.NET!
Any hints or clues are favorable for me, Please don't mind for my question because I am totally new to ASP.NET but I am good at Java
Thanks in Advance!
dataType must define as html like this;
function Change() {
$.ajax({
type: "GET",
url: "temp.aspx",
dataType: "html",
success: function(msg) {
$("#changer").html(msg);
}
});
}
From jQuery Docs;
dataType (default: Intelligent Guess (xml, json, script, or html))
Type: String
Additionally, you can inspect errors using error.
function Change() {
$.ajax({
type: "GET",
url: "temp.aspx",
dataType: "html",
success: function(msg) {
$("#changer").html(msg);
},
error: function(xhr, status, err) {
console.error(status, err.toString());
}
});
}
This is not related to ASP.NET or other web frameworks. It is just related to jQuery and Javascript. jQuery didn't recognise this "text/html;charset=utf-8". If you didn't use dataType, the ajax request worked successfully. It is just verification and result is interpreted according to dataType. For example, you are returning a JSON and the mime type of the your endpoint is not json (considering its mime type is html) just changing of the dataType as "JSON" you can parse the result as object.
I wrote a little script, in first example, I set dataType as HTML and in other example, I set dataType as JSON.
You could add a generec handler called Temp.ashx wich return the new text.
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("Hello New Text");
}
In your ajax call you need to specify you are expecting a text.
<script type="text/javascript">
function Change() {
$.ajax({
type: "GET",
url: "temp.ashx",
dataType: "text/plain",
success: function(msg) {
$("#changer").html(msg);
}
});
}
</script>
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.");
}
});
Having a problem with a webapp i've been working on lately, and it has to do with ajax reloading breaking javascript.
I have the following Ajax Call
$.ajax({
type: "POST",
url: "/sortByIngredient/",
data: JSON.stringify(
{
selectedIngredients: tempDict
}),
contentType: "application/json; charset=utf-8",
success: function(data){
var curList = $("#drinkList").contents();
console.log(curList);
$("#drinkList").empty()
$("#drinkList").append(data)
and the following Html UL
<div id = "drinkList" class="d-list">
<ul>
<li id='someID'>some Item</li>
<li id='someID2'>some Item2</li>
</ul>
</div>
I also have a jQuery callback set to activate on clicked list items. On initial loading, all works well. Once the ajax call occurs, and replaces the contents of #drinkList with another list, formatted identically. In case anyone is curious, here is the onClick callback:
$("li").click(function()
{
window.currentDrink = $(this).attr("id");
console.log(window.currentDrink);
$.ajax({
url: "/getDrink/" + $(this).attr("id"),
type: "get",
success: function(data){
$("#ingDiv").html(data);
}
});
});
After I make that Ajax call, the list modifies correctly, but after that, no more javascript seems to work. For example,the console.log is not called when i click on a list item, and the proper view doesnt update(#ingDiv, as shown in the above call)
Is my changing the HTML through Ajax breaking the javascript somehow?
Am I missing something obvious? If it isn't clear already, I am not a web developer.
use event delegation like this -
$('#drinkList').on('click','li',function(){
// do your stuff here
});
As you are not a web developer - This is what your code should look after changes
$('#drinkList').on('click', 'li', function () {
window.currentDrink = $(this).attr("id");
console.log(window.currentDrink);
$.ajax({
url: "/getDrink/" + $(this).attr("id"),
type: "get",
success: function (data) {
$("#ingDiv").html(data);
}
});
});
http://learn.jquery.com/events/event-delegation/
http://api.jquery.com/on/
(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",