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
}
);
Related
I used jquery getJSON method to get the two strings from java servlet. one string contains the type of data like simple string, XML and HTML and another string contains data. I need to open a popup window with different size based on contents.
Below the code used to get the strings.
<%# 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>AJAX calls using Jquery in Servlet</title>
<script src="http://code.jquery.com/jquery-latest.js"> </script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('#submit').click(function(event) {
var applid=$('#applicationid').val();
var applname=$('#appname').val();
$.getJSON('ActionServlet',
{
appid:applid,
appname:applname
},function(data) {
var errortype = data.errortype;
var errorMsg = data.errorMsg;
});
});
});
</script>
</head>
<body>
<form id="form1">
<h1>AJAX Demo using Jquery in JSP and Servlet</h1>
Enter your Name:
<input type="text" id="applicationid"/>
<input type="text" id="appname"/>
<input type="button" id="submit" value="Ajax Submit"/>
<br/>
<div id="hello" title="Hello World!"></div>
</form>
</body>
</html>
You can user fancybox. It gives options for opening the passed html string check here
To open a new window you can use the window.open() function.
To display the XML as raw text, you need to escape the special characters.
Javascript does not have builtin function for it (like htmlentities() in php).
You can try the following code:
function htmlentities(str)
{
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
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);
}
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}" />
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?
First off here is the code!
<!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">
<head>
<link href="content/wmd.css" rel="stylesheet" type="text/css" />
<title>some title </title>
</head>
<body>
<div class="main">
<form>
<h2>Only teaxt area</h2>
<div id="wmd-editor-uno" class="wmd-panel">
<div id="wmd-button-bar-uno" class='wmd-button-bar'></div>
<textarea name='id-uno' id='id-uno'></textarea>
</div>
</form>
</div>
<script type='text/javascript' src="Scripts/mootools-yui-compressed.js"></script>
<script type='text/javascript' src="Scripts/moowmd.js"></script>
<script type="text/javascript">
var MyConfig = [
{
input: 'id-uno',
postfix: '-uno'
}];
window.addEvent('domready', function() {
window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
window.MyMooWMD.start();
});
</script>
</body>
</html>
Bam!
My problem is this, it doesn't work like the example at mooWMD tutorial all I get is an empty text area with the wmd.css style applied to it. I cant figure out what I could be doing wrong. All the file locations are correct but i get 'mooWMD' is undefined. I am at a loss any and all suggestions are appreciated.
The problem (for later generations) is IE does not accepts the following syntax:
{
att1: 'value',
att2: 'value'
}
Where other browsers do.
I changed it to
{
'att1': 'value',
'att2': 'value'
}
And it is fine now.
(using the mailing list would have gotten my attention earlier)
The code in the local javascript tag executes as soon as the tag is processed. This may happen before moowmd.js has completed loading.
Wrap the code in a function:
<script type="text/javascript">
function loaded() {
var MyConfig = [
{
input: 'id-uno',
postfix: '-uno'
}];
window.addEvent('domready', function() {
window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
window.MyMooWMD.start();
});}
</script>
Then add an onload handler to your body tag:
<body onload="loaded();">
The onload handler will not fire until all the javascript, images, css, etc have loaded.
<head>
<title>some title </title>
<link rel="stylesheet" type="text/css" href="Content/wmd.css" />
<script type="text/javascript" src="Scripts/showdown.js"></script>
</head>
<body>
<div class="main">
<div id="wmd-editor" class="wmd-panel">
<div id="wmd-button-bar">
</div>
<textarea id="wmd-input"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel">
</div>
<div id="wmd-output" class="wmd-panel">
</div>
</div>
<script type="text/javascript" src="Scripts/wmd.js"></script>
</body>
The root of the problem ended up being the moowmd editor just didn't work consistently in IE. The reason I was tiring to go with the moowmd was I liked how he handled setting up multiple editors. I ended up just switching to stackoverflow's branch of wmd it is working well so far.