I have 2 login pages, login.jsp and loginMobile.jsp. Login.jsp is default login page and configured in web.xml.
On entring login.jsp a javascript method isMobile is called.
WHITHOUT CHANGING the URL, need to forward the request to loginMobile.jsp.
FRAMEWORK : struts1 , AJAX + prototype + GLASSFISH 3.1.2
2 login pages :
login.jsp
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/login.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
isMobile();
</script>
<html>
<body>
<p> AM IN LOGIN PAGE </p>
</body>
</html>
loginMobile.jsp
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/login.js" type="text/javascript"></script>
<html>
<body>
<p> AM IN MOBILE PAGE </p>
</body>
</html>
Inside login.js
function isMobile()
{
//check some conditions then call below AJAX
new Ajax.Request('/loginMobile.jsp', { method:'post' });
}
//Complain's FILE NOT FOUND !!
"C:\Users\dummy\AppData\Roaming\NetBeans\7.2.1\config\GF3\domain1\docroot\loginMobile.jsp" not found
ALSO TRIED
function isMobile()
{
//check some conditions then call below AJAX
var athena_login_url = window.location.href+'/loginMobile.jsp';
new Ajax.Request(athena_login_url, { method:'post' });
}
// Just goes to default login.jsp
Any suggestion is appreciated. Thank you in advance.
Related
I am new to AJAX and am experimenting with a simple page that should show a txt file into a specific location. At this point it does not show the vlist.txt file.
Question: Why does this code not display the file (vlist.txt)?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("C:\Users\itpr13266\Desktop\vlist.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2>This is where your text will go</div>
<button>Get External Content</button>
</body>
</html>
New Code that was Tried.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load(function() {alert( "Load was performed." ););
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2>This is where your text will go</div>
<button>Get External Content</button>
</body>
</html>
No alert box was displayed so I am not sure that it is even getting to that point.
$().load() can't be used with a local file path like C:\Users\itpr13266\Desktop\vlist.txt.
Put your file on a web server and your code will most likely work.
I have a simple page which uses the mediaelement.js audioplayer plugin. The player attaches and functions correctly when loaded normally. However, when the page is loaded via ajax, the mediaelementplayer does not attach to the audio tag.
I use this code to call the file via ajax and jquery:
<html>
<head>
<link href="/test-vocabulary.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ajax_vocab_link").click(function(evento){
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", {chrisSearch: searchTerm}
);
});
})
</script>
</head>
<body>
<p><button class='ajax_vocab_link' id='ajaxlink_1' title='clothes'>Link to load ajax doc</button></p>
<div class='ajax_vocab_container' id='ajaxcontainer_1'>This is div id ajaxcontainer_1</div>
</body>
</html>
The audioplayer page is:
<!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" lang="es" xml:lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- Audio Player CSS & Scripts -->
<script src="http://www.ingles23.com/audioplayer/js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://www.ingles23.com/audioplayer/css/style4.css" media="screen">
<!-- end Audio Player CSS & Scripts -->
<script>
$(document).ready(function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
</script>
</head>
<body>
<div class='display_vocab_container' >
<div class='display_vocab_text' >
<div class='audio-player-slim'>
<audio controls='controls' type='audio/mp3' src='/sound/mp3/i23-crear-frases-ingles-5.mp3' id='audio-player-vocab0'></audio>
</div>
</div>
</div>
</body>
</html>
I've tried many combinations including using on, live, success and moving the css/js links between the documents, but these have all made the situation worse.
What can i do get the file to attach medaielementplayer when loaded via ajax?
Try to put the mediaelementplayer() function call in the ajax success function, that worked for me. So unless you want to use .ajax instead of .load you'll need to pass it as the second argument to the load function. Or use http://api.jquery.com/ajaxSuccess/
$(".ajax_vocab_link").click(function(evento) {
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
});
Beginner's question here.
I'm trying to upload the photo from a webpage directly to cloudinary.
Here is the jQuery plugin that Cloudinary recommends to use.
Unfortunately the plugin is not documented yet, and doesn't have a clear "example.html" file.
I've tried to get my head around the plugin code, but with no success so far.
Can somebody point me to the right direction in terms of what "example.html" should look like?
Thanks.
Download the Jquery SDK and the server sdk.
Here is the code with a java server side :
Generating the signature on server side :
Here is the JSP code in java :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# page import="java.util.Map" %>
<%# page import="java.util.HashMap" %>
<%# page import="java.sql.Timestamp" %>
<%# page import="com.cloudinary.Cloudinary" %>
<%
String timestamp=(new Long(System.currentTimeMillis() / 1000L)).toString();
Cloudinary cloudinary = new Cloudinary("cloudinary://CLOUDINARY_URL");
Map<String, Object> params = new HashMap<String, Object>();
Map options = Cloudinary.emptyMap();
boolean returnError = Cloudinary.asBoolean(options.get("return_error"), false);
String apiKey = Cloudinary.asString(options.get("api_key"), cloudinary.getStringConfig("api_key"));
if (apiKey == null)
throw new IllegalArgumentException("Must supply api_key");
String apiSecret = Cloudinary.asString(options.get("api_secret"), cloudinary.getStringConfig("api_secret"));
if (apiSecret == null)
throw new IllegalArgumentException("Must supply api_secret");
params.put("callback", "http://www.mcbjam.com/Scripts/vendor/cloudinary/html/cloudinary_cors.html");
params.put("timestamp", timestamp);
String expected_signature = cloudinary.apiSignRequest(params, apiSecret);%>
You can have the CLOUDINARY_URL on your Cloudinary Dashboard.
I use the cloudinary.apiSignRequest method wich is include in server cloudinary sdk. I sign the callback and the timestamp.
The HTML and Javascript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="../Scripts/vendor/jquery-1.9.1.min.js"></script>
<script src="../Scripts/vendor/cloudinary/jquery.ui.widget.js"></script>
<script src="../Scripts/vendor/cloudinary/jquery.iframe-transport.js"></script>
<script src="../Scripts/vendor/cloudinary/jquery.fileupload.js"></script>
<script src="../Scripts/vendor/cloudinary/jquery.cloudinary.js"></script>
</head>
<body>
<script type="text/javascript">
$.cloudinary.config({"api_key":"YOUR_API_KEY","cloud_name":"YOUR_CLOUD_NAME"});
</script>
<input name="file" type="file" id="uploadinput"
class="cloudinary-fileupload" data-cloudinary-field="image_upload"
data-form-data="" ></input>
<script>
var data = { "timestamp": <%= timestamp %>,
"callback": "http://YOUR_DOMAIN/cloudinary_cors.html",
"signature": "<%= expected_signature %>",
"api_key": "YOUR API KEY" };
$('#uploadinput').attr('data-form-data', JSON.stringify(data));
</script>
</body>
</html>
Put the cloudinary_cors.html on your host and modify the path on the html. Set your APIKEY and your cloud name.
<%= timestamp %> and <%= expected_signature %> are the element calculate on java. ( You can do the same on php).
I use this code on my website here http://paint.mcbjam.com
You have more details here : http://mcbjam.blogspot.fr/2013/05/integrer-cloudinary-pour-realiser-des.html in French.
Please see the recently published blog post that covers direct uploading from the browser to Cloudinary using jQuery: http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery
You cannot upload images to Cloudinary just by using plain html. You'll need a server that signs your request params. So,here is your example.html file:
<html>
<head>
<title></title>
<script src='jquery.min.js' type='text/javascript'></script>
<script src='jquery.ui.widget.js' type='text/javascript'></script>
<script src='jquery.iframe-transport.js' type='text/javascript'></script>
<script src='jquery.fileupload.js' type='text/javascript'></script>
<script src='jquery.cloudinary.js' type='text/javascript'></script>
<script type = "text/javascript">
$.cloudinary.config({ cloud_name: 'sample', api_key: '874837483274837'});
</script>
</head>
<body>
<input name="file" type="file"
class="cloudinary-fileupload" data-cloudinary-field="image_id"
data-form-data="--signedData--" />
</body>
</html>
Note: The signedData in data-form-data attribute is a JSONObject generated by a server-side code which includes a sha1Hex signature of your request parameters.
An example of that would look like:
{
"api_key": "874837483274837",
"timestamp": "1234567890",
"public_id": "sample",
"signature": "de9f2c7fd25e1b3afad3e85a0bd17d9b100db4b3"
}
Also, let me make you clear that you don't need any other buttons to upload the file, just choosing the file would trigger the jQuery event and send the request parameters to Cloudinary.
You can find about generating signature on java here.
I got a jquery reference in my _Layout.cshtml . It does not look like this is working in my Index.cshtml page though: the /Home/GetSquareRoot is not hit? (it works when I uncomment the jquery reference in the index.cshtml though)
ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Index.cshtml
#{
ViewBag.Title = "Home Page";
}
<h2>#ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>.
</p>
#*<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>*#
<script type="text/javascript">
function calculateSquareRoot(numberToCalculate) {
$.ajax({
type: 'GET',
url: '/Home/GetSquareRoot',
data: { number: numberToCalculate },
success: function (data) { alert(data.result); }
});
}
</script>
<button type="button" onclick="calculateSquareRoot(9);">
Calculate Square</button>
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
homecontroller
public JsonResult GetSquareRoot(long number)
{
var square = Math.Sqrt(number);
return Json(new { result = square }, JsonRequestBehavior.AllowGet);
}
It works when you have the jQuery reference commented out, because your _Layout.cshtml file has the reference as well (just stating the facts, I realise you probably know this).
This also means that you have your routing set up correctly and that there is nothing wrong with the URL '/Home/GetSquareRoot'
The code looks fine, the only unknown that I can see is that ../../Scripts/ actually goes to the same place as ~/Scripts/ (will depend on what the URL of your page looks like).
I would use Google Chrome to check for script errors on your page: go to your page, right click and 'inspect element' on the page, then check that you don't have any script errors (bottom right of the inspector will have a red circle if you do).
If you have script errors that could be stopping the AJAX call from running.
When referring to hard-coded content URLs in your application, it's always a good idea to use Url.Content.
So instead of this:
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
use this:
<script src="#Url.Content("~/Scripts/jquery-1.5.1-vsdoc.js")" type="text/javascript"></script>
This way the correct URL to the jQuery script file will always be used, no matter what the URL of the page is.
Try out this one...
public JsonResult GetSquareRoot(long? number)
{
var square = Math.Sqrt(number);
return Json(new { result = square }, JsonRequestBehavior.AllowGet);
}
I am trying to get another page to call into a div on a page, I have done this multiple times before and had no problem with it but it just refuses to work this time.
Can anyone see a reason why it is not loading into my div.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>Test page</title>
<script src="js/jquery.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function new(){
$.ajax({
type: "GET",
url: "map.php",
success: function(msg){
$("#map").html(msg);
}
});
}
</script>
<script src="js/jquery-latest.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.draggable.js"></script>
</head>
<body onLoad="new()">
<div id="map" style="width: 40px; height: 100px; background: blue;"> </div>
</body>
</html>
Any help would be much appreciated
Thank you in advance!
I don't think you can name a function new as this is a reserved keyword. Try renaming it to something that's not a reserved keyword e.g loadNewPageData() .