OK I have a simple script at http://kleague.org/test/
Type a movie name and it should output the movie name, year, and get the movie poster URL (if there is one, there usually is.)
Well, I just tried it and I got a 403 error on the image. it GOT the image but it didn't display it. What am I doing wrong?
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>IMDB api</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#search').click(function(){
$(".loading").css("display", "inline");
var yourMovie = $("#movie").val();
$("#debug").append("You are searching for ... "+yourMovie+"\n");
dataString = "callback=?&t=" +yourMovie;
$.getJSON('http://www.imdbapi.com/', dataString, function(html){
$(".loading").css("display", "none");
var movieSugg = html.Title;
var movieYear = html.Year;
var movieImg = html.Poster;
$("#movieposter").attr("src", movieImg);
$("#movieposter").css("display", "inline");
$("#more").append("You found: " + movieSugg + " ("+movieYear+") ["+movieImg+"] \n");
});
});
});
</script>
</head>
<body>
<img src="" alt="Poster" id="movieposter" style="display: none;float:left;margin-right:10px;" />
<form method="get" action="#" enctype="text/html" >
<input type="text" id="movie" maxlength="50" /> Search now! <img alt="Searching..." style="display: none;" class="loading" src="ajax-loader.gif" title="Searching..." />
</form>
<div id="other">
Trigger the handler
</div>
<br />
<textarea id="debug" style="width: 500px;height:150px;border:1px solid black;font-face:typewriter;"></textarea><br />
<textarea id="more" style="width: 500px;height:150px;border:1px solid red;font-face:typewriter;"></textarea>
</body>
</html>
JSONP requires a function/script to be returned. Loading an image through AJAX has no use. Just appending the image itself will do the trick.
<img src="{html.poster here}" />
Related
I'd like to show a progress image loader only when the user clicks on submit on my html form but at the moment the progress image loader is displayed also when the user reloads the page... so I'd like to isolate the event only a clicked button (submit) without having the progress image loader displayed when the user reloads the page. I provide an example in order to show what I looking for in pure javascript.
Any help is appreciated.
<!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=utf-8">
<meta name="pragma" content="no-cache">
<meta name="robots" content="noindex, nofollow">
<title>BackUp</title>
<link rel="stylesheet" type="text/css" href="backup.css">
<script language="javascript" type="text/javascript">
function StartProgress() {
ProgressImage = document.getElementById('progress_image');
document.getElementById("progress").style.display = "block";
setTimeout("ProgressImage.src = ProgressImage.src", 100);
return true;
}
</script>
</head>
<body onUnload="StartProgress()">
<div class="mainbox">
<div class="box1">
<span class="title">BackUp</span>
</div>
<div class="cleardiv"></div>
<div class="box2">
<form onSubmit="return StartProgress()" action="backup.php" method="post">
<input class="backup_button" type="submit" name="submit" value="BackUp">
</form>
</div>
<div class="cleardiv"></div>
<div style="display: none" id="progress"><img id="progress_image" src="css/busy.gif" alt="BackUp in progress..."></div>
<div class="cleardiv"></div>
</div>
</body>
</html>
You can try this:
change your form to be something like this:
<form id='form1' action="backup.php" method="post">
<input type='button' onclick='submitForm()' value="BackUp" />
</form>
submitForm function:
function submitForm() {
StartProgress();
var form1 = document.getElementById('form1');
form1.submit();
//setTimeout(function(){
// form1.submit();
//}, 1000);
}
I have the following script. With that I am trying to update the div "right" in the jsp page. It's contained in a single file. It does not seem to update. Thanks for your help.
<!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=UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
$('#right').load('score.jsp');
setInterval(function() {
$('#right').load('score.jsp');
}, 10000);
});
</script>
</head>
<body bgcolor="c2f2bd">
Updated
Moved to file score.jsp
<img class="small" src="VTVFile1.jpg" alt="Image not found" onError="this.onerror=null;this.src='demo.jpg';" />
<img class="small" src="VTVFile2.jpg" alt="Image not found" onError="this.onerror=null;this.src='demo.jpg';" />
<img class="small" src="VTVFile3.jpg" alt="Image not found" onError="this.onerror=null;this.src='demo.jpg';" />
<img class="small" src="VTVFile4.jpg" alt="Image not found" onError="this.onerror=null;this.src='demo.jpg';" />
</body>
</html>
Your current code is just raising a load event on the #right div. If you want to load content then you need to specify the location to make the request to, eg:
$('#right').load('/foo/bar/content.php');
It will now take X seconds before the content loads the first time. Is there a way to make the content visible on first load and then refresh at the interval ?
$(document).ready(function() {
$('#right').load('/foo/bar/content.php'); // on load
setInterval(function() {
$('#right').load('/foo/bar/content.php'); // every 3 seconds
}, 3000);
});
So, there's a textarea and under that send button on panel wich is showing after puting first character, isButtonVisible() method controlls this. It sends text from textarea by AJAX send() method to data.php, where data from textarea has to be saved in .txt document. .js file name is ng-controllers.js Can anyone help me with this? I have no experience in angular.js
Here's how my HTML file look like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl" ng-app="Textarea"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}.ng-hide-add-active,.ng-hide-remove{display:block!important;}</style>
<title>Angular - Textarea</title>
<link rel="stylesheet" type="text/css" href="./Angular - Textarea_files/style.css">
<script type="text/javascript" src="./Angular - Textarea_files/jquery.min.js"></script><style type="text/css"></style>
<script type="text/javascript" src="./Angular - Textarea_files/angular.min.js"></script>
<script type="text/javascript" src="./Angular - Textarea_files/ng-controllers.js"></script>
</head>
<body style="padding:0px; margin:0px;" onload="">
<div class="Cont" ng-controller="TextAreaCtrl as ctrl">
<div class="TextAreaCont">
<textarea ng-model="text" placeholder="Write something..." style="margin: 0px; height: 106px; width: 795px;"></textarea>
</div>
<div class="ButtonCont" ng-show="ctrl.isButtonVisible()">
<button ng-click="ctrl.send()">Send</button>
</div>
</div>
</body></html>
Ajax calls in angualr use the $http provider
full documentation here
It's very close to how you do $.ajax in jquery, i.e.
var httpPost = $http({
method: "post",
url: "example.com/posts",
data: {
// some data here
}
});
Then you assign a function to run on success
httpPost.success(
function( html ) {
// do something here
}
);
i wonder why my code says that it's not defined when i'm trying to do a simple code with data binding :/
<!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" />
<title>Untitled Document</title>
<object name="login" id="login" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="member.txt"/>
<param name="UseHeader" value="true"/>
<param name="TextQualifier" value=""/>
<param name="FieldDelim" value="|"/>
</object>
<script>
var rs = login.resultset;
function validation()
{
rs.moveFirst();
while(rs.moveNext())
{
if(document.getElementById("txtid")== rs(0) && document.getElementById("txtpass")==rs(1))
{
alert("Login Succeed");
return;
}
}
alert("Email or Password Wrong");
return;
}
</script>
</head>
<body>
<form>
Username: <input type="text" id="txtid" /> <br/>
Password: <input type="text" id="txtpass" /><br/>
<input type="submit" value="game start" id="btnstart" onclick="validation()"/>
</form>
</body>
</html>
the error: login is not defined
but i know that it's defined ! i have tried to search about this but i got no clue about what's wrong in my code :/
help please?
EDIT:
i've updated my code to something like 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form>
Username: <input type="text" id="txtid" /> <br/>
Password: <input type="text" id="txtpass" /><br/>
<input type="submit" value="game start" id="btnstart" onclick="validation()"/>
</form>
<object name="login" id="login" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="member.txt"/>
<param name="UseHeader" value="true"/>
<param name="TextQualifier" value=""/>
<param name="FieldDelim" value="|"/>
</object>
<script>
var login = document.getElementById('login');
var rs = login.resultset;
function validation()
{
rs.moveFirst();
while(rs.moveNext())
{
if(document.getElementById("txtid")== rs(0) && document.getElementById("txtpass")==rs(1))
{
alert("Login Succeed");
return;
}
}
alert("Email or Password Wrong");
return;
}
</script>
</body>
</html>
the next error i got is the rs is undefined when i'm clicking the button. am i doing something wrong?
In your code:
> <object name="login" id="login" ...>
> ...
> </object>
> <script>
> var rs = login.resultset;
You are expecting an element with id login to be made available as a global variable, which it is some browsers always and others only under certain conditions. It was never a good idea and should never be used, always reference elements using standard DOM methods, in this case getElementById:
var el = document.getElementById('login');
Futher, there is no standard resultset attribute for object elements and you haven't defined one, therefore it is not reasonable to expect that the DOM element returned by the above expression will have a resultset property. At the very least, before attempting to use the rs variable, you should test that it has a value suitable for what you intend using it for, e.g.
if (rs && rs.moveFirst) {
rs.moveFirst();
and so on.
Content should be placed in the <body> and not in <head>. The only things that are reasonable to be placed in the <head> are scripts (the ones that don't manipulate the DOM at once), styles and misc. meta-data about your page. All the rest that appears in the page should be in <body>
Although I recently knew that id'ed elements expose a global variable of the same name as the id and refers to the element it IDs, you should not refer to the element in that way. You should do something like document.getElementById() to be safe.
And for safe script execution, place <script> tags after your content but before you close the <body> element. this ensure that all elements that your scripts refer to are already existing.
<!DOCTYPE html>
<html>
<head>
<!-- title, meta, styles, non-DOM scripts up here -->
</head>
<body>
<!-- everything that appears in the page here -->
<object id="login">
<!-- ... --->
</object>
<script>
//after the content, DOM manipulation scripts go here
var login = document.getElementById('login');
//now "login" is the object element
</script>
</body>
</html>
I'm using jquery to build a like and dislike on comments system, so I need jquery manipulation.
To achieve this I'm using data attribute, but I get a undefined error with this code
I've been trying this for hours and I cant get it to alert the value of data attribute.
My javascript code:
$('.unlike_link_comment').live("click", function(e){
e.preventDefault();
var likescount = jQuery(this).attr("data-likes");
var newlikescount = parseInt(likescount) - 1;
var commentid = jQuery(this).attr("data-id");
var dislikescount = jQuery('#dislike_link_comment_4').data("dislikes");
alert(dislikescount);
$.ajax({
url : 'alter_comments.php?action=unlike&comment_id='+commentid,
beforeSend: function( xhr ) {
xhr.overrideMimeType( 'text/plain; charset=UTF-8' );
},
success: function( data ) {
$('#emptydiv_'+commentid).html(data);
$('#like_count_'+commentid).html('<font color="red">'+newlikescount+' Likes</font>');
$('#comment_control_'+commentid).html("<a data-likes='"+newlikescount+"' data-id='"+commentid+"' href='' class='like_link_comment'>Like</a> ");
}
});
});
My 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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class='stbody' id='stbody_4'>
<div class='stimg'>
<img src='uploads/profile_pics_small/wood_texture_by_pabloalvin-d1igijr.jpg' /></img>
</div>
<div class="unlike_link_comment" style="width: 100px; height: 50px; margin: 0 auto; background-color:yellow">click me!</div>
<div class='sttext'><font color='black'>
sdasdasd
<div class='sttime'>By nicknick</div></font>
<br><br><font color='red'><p id='like_count_4' class='like_count'>0 Likes</p> <p id='dislike_count_4' class='dislike_count'>2 Dislikes</font></p> <div id='comment_control_4' class='commentcontrols'> <a data-likes='0' data-id='4' class='like_link_comment' id='like_link_comment_4' href=''>Like</a><a data-dislikes='2' data-id='4' class='dislike_link_comment' id='dislike_link_comment_4' href=''>Dislike</a></div> </div> </div> <div id='emptydiv_4'> </div> </body> </html>
I myself am not very good at javascript, but when i ran it through a lint(javascriptlint.com), it gave the following error:
$('.unlike_link_comment').live("click", function(e){
e.preventDefault();
var likescount = jQuery(this).attr("data-likes");
var newlikescount = parseInt(likescount) - 1;
===========================================^
lint warning: parseInt missing radix parameter
maybe that's the problem?