My index.php code
<!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="js/jquery.js"></script>
<script>
$(function(){
$("body").load("AJAX.php");
});</script></head>
<body>
</body>
</html>
And my AJAX.php code
<body>
<script src="js/asdf.js"></script>
</body>
and my asdf.js code
function cool(){
alert("hi");}
Now When i load index.php and see the console it output
[16:21:57.237] GET http://localhost/js/asdf.js?_=1342003917230 [HTTP/1.1 200 OK 8ms]
Now i want to know why it is adding that random number to url of js file and how to prevent that?
See the docs for the ajax method:
cache
Default: true, false for dataType 'script' and 'jsonp'
If set to false, it will force requested pages not to be cached by the
browser. Setting cache to false also appends a query string parameter,
"_=[TIMESTAMP]", to the URL.
It is added to prevent the file from being served from browser cache.
If you are using the .load method in jQuery you can disable it by passing the option {cache:false}
$.ajaxSetup({cache : true});
$.load(url, data, function() {
// callback function
});
Or
$.ajax(url, {cache : true, dataType : 'html', success : function (response) {
$('body').html(response);
}});
Related
I'm fairly new in using Facebook javascript SDK and I have no idea what I am doing!
I'm trying to like a facebook post using Facebook javascript SDk in my html page.
My full code this:
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="bod" style="width:100%; height:100px; background:#000;"></div>
<script>
$( "#bod" ).click(function() {
FB.api("/10153XXXXXXXXXX/likes", 'post',function(response) {
if(response === true) {
alert("done!");
}
});
});
</script>
</body>
</html>
I thought this code will like the given post (its ID is 10153XXXXXXXXXX) once i click on the div #bod but when I click on the div, nothing happens and I don't even get the alert(); at all!
could someone please advise on this issue and let me know what I'm doing wrong?
First of all you'll need to initialize the FB SDK.
Then, in order to call the API you'll need a valid access token therefore, you'll need to login the user using your App.
I would suggest to double check the docs again:
https://developers.facebook.com/docs/javascript
https://developers.facebook.com/docs/javascript/examples
In the second link you'll find an example to login a user and then call the API that I believe will be helpful for you.
I hope it helps.
I have a web application in which index.jsp is a welcome page. Index.jsp contains the UI code . And i have multiple html files which has the same href link . My problem is whenever I click on the link the UI is reloaded. So when the url is same, the UI should be maintained and the page should not be reloaded.
I am new to web application development . Please help me on this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="myform_sample1">
<a href="http://localhost:8080/app/index.jsp?file=filepath" target="http://localhost:8080/app/index.jsp?file=filepath">sample1<br>
</a>
</div>
<div id="myform_sample2">
<a href="http://localhost:8080/app/index.jsp?file=filepath" target="http://localhost:8080/app/index.jsp?file=filepath">sample2<br>
</a>
</div>
</body>
</html>
you can try this:
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
on a click event you can transfer values and get back through ajax without reloading ur UI
I think you might be looking for jQuery:load, get, ajax
I want to load the content of a webpage in a div. Here's my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
When the this item is clicked, the webpage should be loaded inside the content id:
<ul><li><a id="menu_top" href='testing.html'><span>My account</span></a></li></ul>
<div id="content"> </div>
JS:
$("#menu_top").click(function() {
var href = $ (this).attr('href');
alert(href);
$("#content").load(href);
return false;
});
testing.html:
<!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=utf-8"/>
</head>
<body>
SUCCESS!
</body>
</html>
Unfortunately, the above code does not work. I have checked it multiple times but could not find the issue.
#Milind Anantwar is correct - must have the $(document).ready wrap your JS:
$(document).ready(function(){
$("#menu_top").click(function() {
var href = $ (this).attr('href');
alert(href);
$("#content").load(href);
return false;
});
});
I also tested whether or not the UL or OL tags affected it as #psicopoo mentioned, but it didn't seem to in Chrome. *ALSO, make sure that "testing.html" is a valid page to load.
*As noted on http://api.jquery.com/load/: "Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol."
I think you're encountering an issue with the page you're trying to load. I copied your code exactly and it works in Fiddle, see if this works for you, if so, it's probably your page:
testing.html
JS Fiddle:
http://jsfiddle.net/fb4j6y6d/
Need help with my simple script that is supposed to auto click next after 5 seconds.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>
</title>
<script type="text/javascript">
window.onload = Next() {
setTimeout(Next() {
var next = document.getElementById("NEXT");
window.location.href = next.href;
}, 5000);
}
</script>
</head>
<body>
<div align="right">
<a id="NEXT" href="http://www.mysite.com/pictures.php?id=34">[ NEXT ]</a>
</div>
</body>
</html>
Your problem is that .click() only works on buttons.
Whilst were at it lets use unobtrusive javascript.
window.onload = function() {
setTimeout(function() {
var next = document.getElementById("NEXT")
window.location.href = next.href;
}, 5000);
}
Live example.
Edit
window.onload = Next() {
setTimeout(Next() {
Don't use the word Next() just use function()
To create functions you need either function () or function SomeName()
On a point of correctness, your script doesn't say it's javascript (you need to say which scripting language it is), and your html technically doesn't say it's HTML (it's missing a doctype declaration):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript">
function next() {
// '1' dynamically generated when this page was generated by PHP,
// and will be '2' next time the page loads.
location = "pictures.php?id=1";
}
document.addEventListener("DOMContentLoaded", function(){setTimeout(next,5000);}, false);
</script>
</head>
<body>
...
</body>
</html>
This sounds like being pedantic, but IE in particular is really anal about having those things. Without a doctype declaration, it won't treat a document starting with as HTML code, but start to take fairly inaccurate guesses.
I am using the jQuery Uploadify plugin on a web page to transfer files from the local computer to an ASP.NET MVC2 control action method. Is there a way to transfer the creation date/time of the file to the server?
I can get at the data in an Uploadify event on the client, but can not figure out how to "package" that data so it is moved to the server w/ the file.
Any thoughts appreciated.
Try using onSelect event to add values to the scriptData object.
UPDATE: The following is an ad-hoc view to pass the data to the action. It appears that modificationDate returns a Unix timestamp in it's time field and you'll have to convert it on the server side. I wasn't able to find any documentation on modificationDate property.
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!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 runat="server">
<title>Home</title><link href="/Scripts/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/Scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Scripts/swfobject.js"></script>
<script type="text/javascript" src="/Scripts/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
var myScriptData = {};
$(document).ready(function () {
$('#file_upload').uploadify({
'uploader': '/Scripts/uploadify.swf',
'script': '/Test/Upload',
'cancelImg': '/Scripts/cancel.png',
'folder': '/App_Data',
'auto': true,
'onSelect': function (event, ID, fileObj) {
$('#file_upload').uploadifySettings('scriptData', {
modifiedTimestamp: fileObj.modificationDate.time
});
return true;
}
});
$('#file_upload').uploadifySettings('scriptData', myScriptData);
});
</script>
</head>
<body>
<input id="file_upload" name="file_upload" type="file" />
</body>
</html>
In your action method, you can grab timestamp through the Request.Form["modifiedTimestamp"]. Check here on how to convert timestamp to the DateTime object.