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?
Related
I am developing a jquery plugin and the problem I have is that when trying to pass settings, works with two of the three options I try to set. When I want to pass the "fadeIn" effect does not display me anything and stops working. This is my code:
// JavaScript Document
jQuery.fn.slider = function(opciones) {
var configuracion = {
efecto: "fadeIn",
velocidadEfecto: 1000,
tiempoPausa: 3000
}
jQuery.extend(configuracion, opciones);
this.each(function() {
elem = $(this);
elem.find('div:gt(0)').hide();
//$('#imagenes div:gt(0)').hide();
setInterval(function() {
elem.find('div:first-child').fadeOut(0)
.next('div')[configuracion.efecto](configuracion.velocidadEfecto)
.end().appendTo('#imagenes');
}, configuracion.tiempoPausa);
});
return this;
};
#imagenes {
width: 200px;
height: 200px;
border: 1px solid grey;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!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>Documento sin título</title>
<script type="text/javascript">
$(document).ready(function() {
$("#imagenes").slider({
efecto: "slideUp",
velocidadEfecto: 2000,
tiempoPausa: 4000
})
});
</script>
</head>
<body>
<h2>Slider</h2>
<div id="imagenes">
<div>
<img src="http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg" id="foto1" />
</div>
<div>
<img src="http://davidnaylor.org/temp/firefox-logo-200x200.png" id="foto2" />
</div>
<div>
<img src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" id="foto3" />
</div>
</div>
</body>
</html>
I don't understand why "slideUp" effect not working. Thank you!
Regards! :-)
You can reference methods and attributes via string names, like "fadeIn" in your example, but you have to use bracket [] notation, not dot .
setInterval(function() {
elem.find('div:first-child').fadeOut(0)
.next('div')[configuracion.efecto](configuracion.velocidadEfecto)
.end().appendTo('#imagenes');
}, configuracion.tiempoPausa);
If you don't use brackets, Javascript is going to look for a configuracion property on the next('div') object, with an efecto method attached to it (which isn't the case). Using brackets works out to .next('div')['fadeIn'](configuracion.velocidadEfecto) because configuracion.efecto is evaluated to its string value.
Hope this helps.
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 am new to JQuery and I am trying to make a search box. When I type in the search box it doesn't do anything and I don't know why. Any help would be appreciated. Here is my 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=utf-8" />
<title>Search Test</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $cells = $("td");
$("#search").keyup(function() {
var val = $.trim(this.value).toUpperCase();
if (val === "")
$cells.parent().show();
else {
$cells.parent().hide();
$cells.filter(function() {
return -1 != $(this).text().toUpperCase().indexOf(val); }).parent().show();
}
});
});
</script>
<form action="" method="post">
<label for="search">Search</label>
<input type="text" name="search" id="search" class="inputfield" />
</form>
<table border="0" align="left">
<tr><td>Gripper 25x8-12 GR25812</td></tr>
<tr><td>Gripper 25x10-12 GR251012</td></tr>
<tr><td>Gripper 26x9-12 GR26912</td></tr>
<tr><td>Gripper 26x12-12 GR261212</td></tr>
</table>
</body>
</html>
This is working code I have tried it in Fiddle and it works
Try to search 25x in input box you will find the output.
Updated
May be there are some zero-width spaces between your code,
I check and I got Error in your code like,
Uncaught SyntaxError: Unexpected token ILLEGAL
Reference Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL
And if you rewrite above code like,
$(function(){
var $cells = $("td");
$("#search").keyup(function() {
var val = $.trim($(this).val()).toUpperCase();
if (val === "")
$cells.parent().show();
else {
$cells.parent().hide();
$cells.filter(function() {return -1 != $(this).text().toUpperCase().indexOf(val);}).parent().show();
}
});
})
Then I found it works
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 trying to figure out how to use Google's code to translate text ONLY if it is NOT English. The code below works if you enter Spanish or another foreign language, but it just repeats English if English is entered (obviously we don't need English translated). Any ideas? Thx.
<!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>Google Ajax Language API</title>
</head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var text = document.getElementById("text").innerHTML;
google.language.detect(text, function(result) {
if (!result.error && result.language) {
google.language.translate(text, result.language, "en",
function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
});
}
google.setOnLoadCallback(initialize);
</script>
<body>
<div style="width:420px; margin:auto; padding:5px;">Original Text:</div>
<div id="text" style="width:420px; margin:auto; padding:5px;">I like cold beer</div>
<br />
<div style="width:420px; margin:auto; padding:5px;">Translated Text:</div>
<div id="translation" style="width:420px;margin:auto;padding:3px;"></div>
</body>
</html>
detect tells you the language. Just take advantage of that to do nothing if the language is 'en'
if (!result.error && result.language && result.language != 'en') {
google.language.translate(text, result.language, "en",
function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}