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
Related
I have been using below posted code for transliterating user input on button click. But when run the code and click the transliterate button, I am getting /* callback */google.language.callbacks.id100('22', null, 403, 'This API is no longer available.', 200) response in my browser's (firefox) console. So please tell what can be its alternate solution?
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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Language API - Basic Transliteration</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
google.load("elements", "1", { packages: "transliteration" });
function intialize_transliteration(){
var options = {
sourceLanguage: 'en',
destinationLanguage: ['kn'],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
var control =
new google.elements.transliteration.TransliterationControl(options);
//add as many as required
var ids = [ "fnk", "lnk" ];
control.makeTransliteratable(ids);
control.showControl('translControl');
}
google.setOnLoadCallback(intialize_transliteration);
function tr() {
//Call google.language.transliterate()
google.language.transliterate(["asdas"], "en", "ur", function(result) {
var container = document.getElementById("fnk");
if (result.transliterations && result.transliterations.length > 0 &&
result.transliterations[0].transliteratedWords.length > 0) {
container.innerHTML = result.transliterations[0].transliteratedWords[0];
}
});
}
</script>
</head>
<body>
<br> First Name <input value="Thejesh Gangaiah" id="fn" />
<br> First Name (in Kannada) <input value="" id="fnk"/>
<br> Last Name <input value="Nagarathna" id="ln" />
<br> Last Name (in Kannada) <input value="" id="lnk"/>
<div id='translControl'></div>
<input type="button" onclick="tr()" value="transliterate"/>
</body>
</html>
The google transliteration API was deprecated in 2011, so I think that, as of today (June 2018), according to their Deprecation Policy, it can be gone. That means that can't be used anymore. The problem is not with your code, but with the service becoming unavailable.
I know its a simple but i tried many solutions but i failed. I have a form on which I use <select> tag in <option> i use two values coo and uh i want that when user select uh then it display an extra input type field.
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" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script>
$('#s_designation').on('change',function(){
if ($(this).val() === "uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
</script>
<title>Untitled Document</title>
</head>
<body>
<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>
</body>
</html>
I just tested your code and it works fine:
Link:https://jsfiddle.net/g95pyqw6/
Edit: But that could be because of JSfiddle.
Try to uncomment the first line of Javascript, that should help! :-)
I hope I could help you out. If you need more help, feel free to write a comment :-)
You jQuery code is executing before the document loads, which means the select element is not visible to jQuery, and jQuery won't throws error if it didn't find any given element.
use the $(document).ready like the following, it will load your code after document loads:
<head>
-------
-------
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function() {
$('#s_designation').on('change',function(){
if( $(this).val()==="uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
});
</script>
-------
</head>
if you want to execute jQuery code after page loading
you simply place your jQuery code before </body> tag like the following:
<body>
-------
-------
<script>
$('#s_designation').on('change',function(){
if( $(this).val()==="uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
</script>
</body>
here your Working code (checked on my local machine) answer is here for your problem Jquery not working from Google CND
<!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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script>
$(function() {
$('#s_designation').on('change',function(){
if( $(this).val()=="uh"){
$("#uh").show()
}
else{
$("#uh").hide()
}
});});
</script>
<title>Untitled Document</title>
</head>
<body>
<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>
</body>
</html>
In your code you have commented the $(function() line :
You are also missing the required jquery library files
Please add this to your html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Fiddle: http://jsfiddle.net/0mqze5ny/
$(function () {
$('#s_designation').on('change', function () {
if ($(this).val() === "uh") {
$("#uh").show()
} else {
$("#uh").hide()
}
});
})
Here I have two HTML pages, First_page.html and Second_page.html,
In First_page.html I have a code that redirects to a page when a link is clicked with a certain URL parameter.
First_page.html's Code is 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>
one<br />
two<br />
three<br />
four
</body>
</html>
And in the Second_page.html I have a code that reads the URL parameter and change the Dropdowns Menu according to it.
Second_Page.html's Code is 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>
<script type="text/javascript">
function show(choice) {
var success = -1;
for (var i=0; i < document.form1.selecoption.length; i++) {
if (document.form1.selecoption.options[i].value == choice)
success = [i];
}
document.form1.selecoption.selectedIndex=success;
}
</script>
</head>
<body onLoad="var choice = location.href.split('?')[1].split('=')[1];show(choice);">
<form name="form1">
<select name="selecoption">
<option value="1">ONE</option>
<option value="2">TWO</option>
<option value="3">THREE</option>
<option value="4">FOUR</option>
</select>
</form>
</body>
Now, what I want is that how do i select two different dropdown menu's i.e "selecoption" & "selecsecondoption" in Second_page.html using URL Parameter. Please help....
First, you have to use the correct URL format. Passing value(s) to URL needs corresponding variable name(s). So the corrected First_page.html file should be like below.
<!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>
one<br />
two<br />
three<br />
four
</body>
</html>
And here's the fixed Second_Page.html file. All script code are moved into the script 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>Untitled Document</title>
<script type="text/javascript">
function getUrlVar(varName) { //returns empty string if variable name not found in URL
if (!varName) return ''; //no variable name specified. exit and return empty string
varName = varName.toLowerCase(); //convert to lowercase
var params = location.search; //get URL
if (params == '') return ''; //no variables at all. exit and return empty string
var vars = params.split('?')[1].split('&'); //get list of variable+value strings
for (var i = 0; i < vars.length; i++) { //check each variable
var varPair = vars[i].split('='); //split variable and its value
if (varPair.length > 1) { //has "=" separator
if (varPair[0].toLowerCase() == varName) { //same variable name?
return varPair[1]; //found variable. exit and return its value
} //else: check next variable, if any
} //else: is not an array. i.e.: invalid URL variable+value format. ignore it
}
return ''; //no matching variable found. exit and return empty string
}
function show() {
var value = getUrlVar('selecoption'); //get variable value
if (!value) return; //variable not found
if (parseInt(value) == NaN) return; //value is not a number
var sel = document.getElementById('form1').selecoption;
for (var i=0; i < sel.length; i++) {
if (sel.options[i].value == value) {
document.getElementById('form1').selecoption.value = value;
return;
}
}
}
</script>
</head>
<body onLoad="show();">
<form id="form1">
<select name="selecoption">
<option value="1">ONE</option>
<option value="2">TWO</option>
<option value="3">THREE</option>
<option value="4">FOUR</option>
</select>
</form>
</body>
</html>
Try this :
<script type="text/javascript">
document.getElementById('selecoption').value=String(choice);
</script>
at the end of the Second_Page.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?
Here is a language translation code that google provides to detect the language in which the code is typed . This is the default code in which it translates the code from "var text=" field . I want to modify this code so as to recieve input from the user in a text box and on clicking the submit button it should display the result of language detected on the same page .
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Language API - Basic Translation</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var text = "¿Dónde está el baño?";
google.language.detect(text, function(result) {
if (!result.error) {
var language = 'unknown';
for (l in google.language.Languages) {
if (google.language.Languages[l] == result.language) {
language = l;
break;
}
}
var container = document.getElementById("detection");
container.innerHTML = text + " is: <b>" + language + "</b>";
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="detection"></div>
</body>
</html>
Try this
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Language API - Basic Translation</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize(text) {
google.language.detect(text, function(result) {
if (!result.error) {
var language = 'unknown';
for (l in google.language.Languages) {
if (google.language.Languages[l] == result.language) {
language = l;
break;
}
}
var container = document.getElementById("detection");
container.innerHTML = text + " is: <b>" + language + "</b>";
}
});
return false;
}
</script>
</head>
<body>
<form onsubmit="return initialize(this.text1.value">
<input type="text" value="" name="text1" /><input type="submit" />
</form>
<div id="detection"></div>
</body>
</html>