I need to load an aspx page that returns a string of text using jsonp since it is a cross domain call. The target page will be loaded inside a div tag and displayed as a modal window on the source page.
I am using a test form to pass 3 parameters that the target page expects, a submit button, very simple.
When I submit the page, I get an error message: Uncaught SyntaxError: Unexpected token <
When I click on the error I see the error points to this line:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This is the first time I am working with json/ jsonp, and I am not sure how to fix this error. Is it possible to get some help to figure this out?
My invoking page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "Details",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
$("#btnSubmit").click(function () {
$.ajax({
type: "GET",
dataType: "jsonp",
crossDomain: true,
url: "http://localhost:81/order-error.aspx",
contentType: "application/json; charset=utf-8",
data: { 'order': $("#order").val(), 'site': $("#site").val(), 'env': $("#env").val() },
success: function (r) {
$("#dialog").html(r.d);
$("#dialog").dialog("open");
}
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="order" value="" /></td>
<td><input type="text" id="site" value="" /></td>
<td><input type="text" id="env" value="" /></td>
</tr>
<tr>
<td><input type="button" id="btnSubmit" value="Submit" /></td>
</tr>
</table>
<div id="dialog" style="display: none">
</div>
</body>
</html>
My target/ response page (order-error.aspx):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 11px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#content {
width: 100%;
display: inline-block
}
.label {
position:relative;
float:left;
top:0;
margin-right:5px;
}
</style>
</head>
<body>
<div id="content">
<div class="order">
<div class="label">Web Order#: </div>
<div id="orderno" runat="server" class="value"></div>
</div>
<div class="error">
<div class="label">Message: </div>
<div class="value">
<asp:Label ID="lblOrderError" runat="server" Visible="false"></asp:Label></div>
</div>
</div>
</body>
</html>
And the code behind:
Partial Class order_error
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Dim siteKey As String = String.Empty
Dim orderId As String = String.Empty
siteKey = Request.QueryString("site").Trim
orderId = Request.QueryString("order").Trim
Me.lblOrderError.Text = Functions.GetAXErrorMessage(siteKey, orderId)
Me.orderno.InnerText = orderId.Trim
lblOrderError.Visible = True
End Sub
End Class
The output html of order-error.aspx:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="content">
<div class="order">
<div class="label">Web Order#: </div>
<div id="orderno" class="value">A1G759</div>
</div>
<div class="error">
<div class="label">Message: </div>
<div class="value">
<span id="lblOrderError"><Fault xmlns="http://schemas.microsoft.com/dynamics/2008/01/documents/Fault">
<Code />
<Reason>
<Text xml:lang="EN-US">User is not authorized for this Endpoint.</Text>
</Reason>
</Fault></span></div>
</div>
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"757708942b1d4af892b199f3590d85f5"}
</script>
<script type="text/javascript" src="http://localhost:63737/17a3dfffdc8f48ad9496d260bd296120/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
The error is clearly caused by your AJAX call return HTML instead of JSON.
In the success handler you have $("#dialog").html(r.d);. Here you try to parse the output of the call (r) to an object (r.d forces this), which fails for obvious reasons.
You should return JSON from your AJAX method, possibly using an HTTP handler or WebAPI.
Related
I am trying to display the content just like in facebook.but i dint get it.i used iframe.can some one help me with this without using iframe.i want it to get independently ..like if user1 post it must be seperated from user2 ..but i didnt get it using iframe ii just got a linebreak ..
i here by attaching two images for idea sake facebook layout
this is my outcome.it would be helpful if u solve ...Thanks in Advance..atleast the working ui would be helpful
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div id = "midle">
<div id="posts" >
<h1>WHAT'S UP?</h1>
<tr> <form method="POST" action="tryy.php" target="iframe_a" >
<textarea name="post" rows="5" cols=110" target="iframe_a" ></textarea>
<td><input id="button" type="submit" name="submit" value="POST" ></td>
</form>
<iframe width="100%" height="590" src="tryy.php" name="iframe_a"></iframe>
</div>
</div>
</html>
You can use ajax.
(replace the iframe with a div that for this example has the id "status")
<div id="status"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$.get(
'tryy.php',
function(response){
$("#status").html(response);
}
);
</script>
Inserted into your example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#status {
background:#555;
width: 100%;
height: 590px;
}
</style>
</head>
<body>
<div id="midle">
<div id="posts">
<h1>WHAT'S UP?</h1>
<tr>
<form method="POST" action="tryy.php" target="iframe_a">
<textarea name="post" id="statusBox" rows="5" cols=110 target="iframe_a " ></textarea>
<td><input id="button" type="submit" name="submit " value="POST " ></td>
</form>
<div id="status"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js "></script>
<script>
function updateStatusList(){
$.get(
'tryy.php',
function(response){
$("#status").html(response);
}
);
}
$("#button").click(function(e) {
e.preventDefault();
updateStatusList();
return false;
});
$("#statusBox").keydown(function(e) {
if(e.keyCode == 13){ // when return was pressed
updateStatusList();
}
});
</script>
</body>
</html>
PS:
Since you are new some hints:
You should use <!DOCTYPE html> instead.
Use a closing </body> tag ;)
Don't use td, tr elements without a table element (and you shouldn't actually use tables at all for layouting)
I Use below html page for tag-it. But when i submit the form, i can't get the value from form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="http://girlzunderground.com/code/tagit.js"></script>
<script >
$(function() {
$('#demo3').tagit({
tagSource:function( request, response ) {
$.ajax({
url: "http://localhost/test.com/tag/tagdb.php",
dataType: "json",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
},
triggerKeys:['enter', 'comma', 'tab'],
allowNewTags: false
});
});
//http://girlzunderground.com/php/profile-tags.php?t=books&txt=book
</script>
</head>
<body>
<div class="box">
<form action="display.php" method="post">
<ul id="demo3" class="tagit">
<li class="tagit-new" >
<input id="test1" name="test1[]" style="width:200px;" class="tagit-input ui-autocomplete-input" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"/>
</li>
</ul>
<input type="text" value="qqq" name="q"/>
<input type="submit" value="submit"/>
</form>
</div>
</body>
</html>
But when i submit the form, i can't get input "test1" value. But i can get input "q" value.
This is my display.php page
<?php
$Category=$_POST['test1'];
$q=$_POST['q'];
echo $q;
//exit();
$allCourse=NULL;
$count=0;
foreach($Category as $Cat)
{
$count=$count+1;
$allCourse=$allCourse.'~'.$Cat;
}
$allCourse=$allCourse.'~';
echo $allCourse;
?>
How can i get my tag-it value from html form..
Basically I have a page that has a drop down <select> listing a number of items / models which when selected triggers an AJAX call to dynamically display a form with all the details pertaining to that model to allow editing and updating.
<script type="text/javascript">
function item_loader(x) {
req = $.ajax({
type: "GET",
url: x,
datatype: "html",
success: function(data){
$('#item_table').html(data);
}
});
}
</script>
Within the form I have a "preview" button which displays dialog popup giving a preview of how the item will be displayed.
<script>
$(function(){
$("#wrapper").dialog({
autoOpen:false,
width:780,
height:800,
title: 'Item Preview'
});
$("#opener").click(function() {
$("#wrapper").dialog("open");
});
});
</script>
Everything works as intended when the page is loaded or refreshed, but the dialog portion breaks when the original content is dynamically updated/changed via AJAX. Doing research on this I'm finding old references suggesting modifying the code to use live(), but have read that is deprecated and to use on()? I am still fairly new to all of this and from the examples I've found on the net going through trial and error has always ended up in error. Hoping someone can share a resource or possibly offer some assistance. Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Basic Page</title>
<script type="text/javascript" src="/JS/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/JS/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="/JS/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="/JS/tinymce/tinymce.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/intranet-theme/jquery-ui-1.10.4.custom.css"/>
<script type="text/javascript">
function item_loader(x) {
req = $.ajax({
type: "GET",
url: x,
datatype: "html",
success: function(data){
$('#item_table').html(data);
}
});
}
</script>
<script>
$(function(){
$("#wrapper").dialog({
autoOpen:false,
width:780,
height:800,
title: 'Item Preview'
});
$("#opener").click(function() {
$("#wrapper").dialog("open");
});
});
</script>
</head>
<body bgcolor='#FFFFFF'>
<form>
<select name="period_select" id="item_dropdown" onChange="javascript:item_loader(this.value);">
<option value="Item_AJAX.php?Model_ID=0"> Choose Model</option>
<option value="Item_AJAX.php?Model_ID=404">AEROCOOL 100</option>
</select>
</form>
<div id="item_table" align="center">
<!-- Start of AJAX Dynamic Content -->
<form method="POST" enctype="multipart/form-data" action="" name="model_item">
<input name="Start_Special" type="hidden" value="2014-06-01"/>
<input name="Model_ID" type="hidden" value="model_id"/>
<table border="1" width="800">
<tr>
<td colspan="3" align="center">
[Form displaying item details for editing]
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="Update_Model" value="Save Model Info"/>
<input type="submit" name="Update_Listing" value="Update Listing"/>
<input type="submit" name="Delete" value="Remove Item"/>
<button type="button" id="opener">Preview</button>
<div id="wrapper" align="center">
<!-- Start of Hidden diolog Content -->
[Hidden Preview Content]
<!-- End of Hidden dialog Content -->
</div>
</td>
</tr>
</table>
</form>
<!-- End of AJAX Content -->
</div>
</body>
</html>
Either you can rebind in success method of ajax:
success: function(data){
$('#item_table').html(data);
$("#wrapper").dialog({
autoOpen:false,
width:780,
height:800,
title: 'Item Preview'
});
$("#opener").click(function() {
$("#wrapper").dialog("open");
});
}
or you can try with event delegation:
$("#wrapper").on("click", "#opener", function() {
$("#wrapper").dialog("open");
});
i guess you have #opener in #wrapper element. if not then try to delegate to the closest parent or to $(document).
Change:
$("#opener").click(function() {
$("#wrapper").dialog("open");
});
To:
$(document).on("click", "#opener", function() {
$("#wrapper").dialog("open");
});
$("#elem").click() only binds to the elements currently on the page. Placing the event on the document itself will allow the event to work on newly created elements.
I am trying to find the size of file but it is display nothing please help me
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
div {
padding: 1px;
border-bottom: ridge;
width: 600px
}
this function is use to check whether or not user enter a image.
</style>
<script language="javascript">
function checkImage() {
if (document.form2.path.value == "") {
alert("Enter path of Image");
return false;
}
return true;
};
this function is not working properly
here i am try to check the size of file but it is not
working
function checkSize(){
var images=document.form2.path.value;
if (images != "") {
var f =document.getElementById("loadImage").files[0];
alert(f.size);
return false;
}
}
</script>
</head>
<body>
<center>
<div>
<h2>Image Management Utility</h2>
</div>
</center>
<br>
<br>
<br>
<form name="form2" action="images" method="post" onsubmit="return checkImage()">
<table width="800" align="center">
<tr>
<td>Please select an image file (maximum size 1MB)</td>
</tr>
<tr>
<td><input type="file" name="path" id="loadImage" /></td>
<td align="right"><input type="submit" name="submit"
value="submit" onclick="return checkSize()" /></td>
</tr>
</table>
</form>
</body>
</html>
Is there a command line tool or online service that can convert javascript unicode notation code to utf-8?
E.g. I got this json code, but it is hard to edit in common text editor.
{"name":"leon zhang","city":"\u4e0a\u6d77"}
I want to convert it to:
{"name":"leon zhang","city":"上海"}
You use the below javascript function to convert unicode to utf-8
function encode_utf8( s ){
return unescape( encodeURIComponent( s ) );
}( '\u4e0a\u6d77' )
You can also try it out in firebug console. It works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>UTF-8 To Unicode</title>
<style type="text/css">
<!--
td {
height: 24px;
line-height: 24px;
}
#content {
margin-top: 2px;
}
-->
</style>
</head>
<script type="text/javascript">
function encodeGB2312(){
var c = document.all.content.value;
var re = /(%)+/g;
var result = escape(c);
document.all.content.value = result.replace(re, "\\");
document.all.content.focus();
document.all.content.select();
}
function clearContent(){
document.all.content.value = "";
document.all.content.focus();
}
</script>
<body>
<h3 align="center">UTF-8 To Unicode</h3>
<table width="600" border="1" cellspacing="0" cellpadding="0" align="center" style="text-align:center;">
<tr>
<td>Input what you want to convert：</td>
<td><input type="text" name="content" id="content" size="50"/></td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="encoding" value="Start Conversion" onclick="encodeGB2312()"/>
<input type="button" name="clear" value=" Cancel" onclick="clearContent();"/></td>
</tr>
</table>
</body>
</html>
This is a sample of convert utf-8 to unicode, do it in turn.