JQuery search no longer working - javascript

I cannot figure out why this isn't working. It's a JQuery search box that uses the Freebase API to find games. When I POST, the gameID and gameName are blank.
<link type="text/css" rel="stylesheet" href="http://freebaselibs.com/static/suggest/1.3/suggest.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://freebaselibs.com/static/suggest/1.3/suggest.min.js"></script>
<script type="text/javascript">
$(function() {
$("#game-search").suggest({type:'/games/game'}).bind("fbSelect", function(e, data) {
$("#game-id").val(data.id);
$("#game-name").val(data.name);
});
});
</script>
<form name="input" action="/game-profile" method="post">
<input class="search-box" name="fbSelect" type="text" id="game-search"/>
<input type="hidden" name="gameID" id="game-id" />
<input type="hidden" name="gameName" id="game-name" />
<input class="button" value="Go" type="submit"/>
</form>

I grabbed your code and changed the hidden fields to type="text" just so I could see the data when a selection was made from the auto-complete. The fields weren't being populated on select, so I took a quick peek at the API.
It looks like the event you should be binding to is fb-select rather than fbSelect a la:
$(function() {
$("#game-search").suggest({type:'/games/game'}).bind("fb-select", function(e, data) {
$("#game-id").val(data.id);
$("#game-name").val(data.name);
});
});

It doesn't look like the fbSelect event you're binding to, ever gets fired. Have you included all required code parts for this to work?
(Answered retrospectively via comment on original question. #borkweb is more correct.)

Related

Why am I not getting a response from serialize()?

I'm very new to jQuery. I've been trying to use the .serialize method in jQuery, but I can not seem to garner a response. I've checked console on Microsoft Edge, Internet Explorer, and Chrome but there's no indication of anything happening past connecting to the latest library (3.4.1). My HTML and JavaScript code are below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
</head>
<body>
<form name="ourform" id="ourform" action=''>
<select name="salute">
<option>Mr.</option>
<option>Mrs.</option>
</select>
<br>
First Name: <input type="text" name="firstname"/>
Last Name: <input type="text" name="lastname"/>
<br>
<select name="region" multiple="multiple">
<option>North</option>
<option>South</option>
<option>East</option>
<option>West</option>
</select>
<br>
<textarea rows="6" cols="20" name="comment">
</textarea>
<input type="submit" name="g" value="submit" id="g"/>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
Any help you could provide would be greatly appreciated.
Edit: Since it seems you want to disable the default submit behavior for the button, adding the type="button" attribute removes the need to cancel the default behavior.
When you are including your own javascript within <script> tags you don't need the src attribute (this was causing the 404)
updated jsfiddle
...
<button id="g" name="g" value="submit">Submit</button>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#g').click(function(event) {
//event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
The $ is undefined is caused by jquery failing to load, which is caused by misspelling 'javascript' in
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
You can't include an src attribute and have data in the tag - if you have src, your script tag must be empty.
Simply use two separate ones:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>

elements placed before javascript but getElementById returns null javascript

Don't know how this is supposed to work, but here goes. So the issue that I am seeing at the moment is I am unable to get a value from a getElementById when the element exists before the script to run. I have been unable to find anything via google or stack overflow. If I am barking in the wrong area, truly I apologize. Below is the offending code. I think?!? Again please forgive.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script type='text/javascript' src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<title>Testing Masking</title>
</head>
<body>
<input name='EmailAddress' type='text' maxlength='255' />
<input name='maskTest' />
<button id='maskButton'>Test
</button>
<script>
document.getElementById('maskButton').onclick = function() {
var test = document.getElementById('maskTest').value;
console.log(test);
}
</script>
</body>
</html>
As I said I am unable to get any value other than null back to the console. Thanks if you guys can help.
You don't have an element with an id of maskTest. Presumably you're just missing the attribute from the name="maskTest" element.
Also note that using onclick is considered outdated now. It's much better practice to use addEventListener instead. Try this:
document.getElementById('maskButton').addEventListener('click', function() {
var test = document.getElementById('maskTest').value;
console.log(test);
});
<input name="EmailAddress" type="text" maxlength="255" />
<input id="maskTest" name="maskTest" />
<button id="maskButton">Test</button>
Or alternatively you could use jQuery as you've added it to your page anyway:
$('#maskButton').on('click', function() {
var test = $('#maskTest').val();
console.log(test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="EmailAddress" type="text" maxlength="255" />
<input id="maskTest" name="maskTest" />
<button id="maskButton">Test</button>

Implementing jQuery function

I have been trying to implement some JavaScript that would disable a submit button until all fields were filled. I found a great here: Disabling submit button until all fields have values. Hristo provided a link that does exactly what I need here: http://jsfiddle.net/qKG5F/641/.
My problem is that when I try to put together a full "minimum working example" I am completely stumped. I'm sure there's some minor aspect that I'm missing but here's what I've come up with:
<html>
<head>
<title></title>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled'); // updated according to https://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
} else {
$('#register').removeAttr('disabled'); // updated according to https://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
}
});
})()
</script>
</head>
<body>
<form>
Username<br />
<input type="text" id="user_input" name="username" /><br />
Password<br />
<input type="text" id="pass_input" name="password" /><br />
Confirm Password<br />
<input type="text" id="v_pass_input" name="v_password" /><br />
Email<br />
<input type="text" id="email" name="email" /><br />
<input type="submit" id="register" value="Register" disabled="disabled" />
</form>
<div id="test">
</div>
</body>
I simply copied/pasted and added in what I thought would be necessary to make the page work but my submit button remains permanently disabled. What simple part am I missing to make this work??
Thanks!
You have to surround it with an onload function:
$(window).load(function(){
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
});
If you look at the source of the jsFiddle, you'll see it got wrapped the same way.
I tested this on my system, works with your own version of jquery, as well as code with a little change and wrapping javascript in document.ready().
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
} else {
$('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
}
});
});
</script>
</head>
<body>
<form>
Username<br />
<input type="text" id="user_input" name="username" /><br />
Password<br />
<input type="text" id="pass_input" name="password" /><br />
Confirm Password<br />
<input type="text" id="v_pass_input" name="v_password" /><br />
Email<br />
<input type="text" id="email" name="email" /><br />
<input type="submit" id="register" value="Register" disabled="disabled" />
</form>
<div id="test">
</div>
</body>
</html>
Your original js is an immediately-invoked function expression. Here's a link explaining that pattern:
http://benalman.com/news/2010/11/immediately-invoked-function-expression/
You defined an anonymous function and then immediately called it. By the time your html page had loaded, the script had already run. As others correctly answered, you need to instead wait for all the DOM elements to load before executing the script.
While
$(window).load(function(){};
works, you should probably use the jQuery version of this:
$(document).ready(function(){ };
For one, it's the jQuery idiom, and for another, $(window).load fires at a later time, where as $(document).ready() fires as soon as all DOM elements are available; not as soon as all assets (possibly large) are loaded.
Source: window.onload vs $(document).ready()
If you place the JavaScript (the entire script element) at the end of the page, right before the closing body tag, it should work. This is because the JavaScript needs to be run after the DOM is built. By placing your script after the page is loaded (and then immediately invoking it as you are doing), the document will be ready and it should work.
Working example: http://jsfiddle.net/NgEHg/

Enabling inactive fields by clicking on field

Is it possible to have a group of inactive fields where if one of the fields is clicked some of the fields become mandatory and some segments of code are run? Say for example you have three fields which are shown:
<input type="text" id="gov1" name="gov1">
<input type="text" id="parentb" name="parentb">
<input type="checkbox" name="child" id="child">
All three of these fields are initially inactive; but say you click on one of the fields it now makes the rest active and mandatory, and some segment of code is run on the field "parentb" and it is attributed at readonly.
window.onload = function(event)
{
var $input2 = document.getElementById('dec');
var $input1 = document.getElementById('parentb');
$input1.addEventListener('keyup', function()
{
$input2.value = $input1.value;
});
}
I have done a bit of searching around but i can't seem to find anything of use for this specific situation and i'm quite new to JavaScript so any sort of help would be great. Is this at all possible using JavaScript? Or is something similar to this possible?
This method you are looking is called 'chained-select' method.
jQuery framework is used for example below:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form action="" method="get">
<label>
<input name="Government" type="checkbox" value="">Government</label>
<br>
<label>
<input name="Parent" type="checkbox" id="parent_child_group" value="">Parent</label>
<br>
<label>Name of Child
<input type="text" name="parent_child" value="" class="parent_child_group"></label>
<br>
<label>Other
<input type="text" name="parent_other" value="" class="parent_child_group"></label>
</form>
<script type="text/javascript">
$(document).ready(function () {
$(function() {
enable_cb();
$("#parent_child_group").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.parent_child_group").removeAttr("disabled");
} else {
$("input.parent_child_group").attr("disabled", true);
}
}
});
</script>
</body>
</html>
Working example on JSFiddle: http://jsfiddle.net/farondomenic/fg7p8/1/

Why is this watermark plugin not working?

Why is this jquery image watermarking plugin not working? I am using the code from the official plugin website.. from here When i see the source code of the demo website they have used js/jquery-watermarker-0.3.js. but i cannot find this plugin online anywhere? how come this works for them in the demo. Please help.
<html>
<head>
<script type="text/javascript" src="js/jquery.js">
<script type="text/javascript" src="js/jquery-1.4.2.min.js">
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
<script type="text/javascript" src="js/jquery-watermarker-0.2.js">
<script type="text/javascript">
$().ready(function(){
$('#watermarked').Watermarker({
watermark_img: "a.png",
onChange: showCoords
});
});
function showCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
</script>
<style type="text/css">
div.watermark
{
border:1px dashed #000;
}
img.watermark:hover{
cursor:move;
}
</style>
</head>
<body>
<img src="1.jpg" id="watermarked" />
<form method="post" action="phpScriptToMergeBothImage.php">
<input type="text" id="x" name="x" value="" />
<input type="text" id="y" name="y" value="" />
<input type="text" id="w" name="w" value="" />
<input type="text" id="h" name="h" value="" />
<input type="submit" name="save" value="Ok >" />
</form>
</body>
</html>
Make sure you've downloaded the plugin from the site (here) and included the scripts in your file. In the code you supplied above, it looks like you should have a folder called 'js' that contains 'jquery.js', 'jquery-1.4.2.min.js', 'jquery-ui-1.8.6.custom.min.js' and 'jquery-watermarker-0.2.js'. If this is true, the plug-in is loaded.
Next, make sure that you also have the images '1.jpg' and 'a.png' in your root folder, where '1.jpg' is the background image and 'a.png' is the image you want the watermark to be. If they don't have those names, change the names in the plug-in code to match the name of the images that you're working with.
Your first line should either be $(function) or $(document).ready(function):
$(document).ready(function(){
$('#watermarked').Watermarker({
watermark_img: "a.png",
onChange: showCoords
});
});
$() Used to return a jQuery collection containing document in 1.3.x but this was changed in 1.4 to return an empty collection.
Also, your script tags need to be closed </script>
A nice watermark plugin can be found here.
Simply call it using the following:
<script type="text/javascript">
$(document).ready(function () {
$("#textbox1").WaterMark({
waterMarkText: "Watermark text"
});
});
</script>
<input type="text" id="textbox1" name="textbox1" />
There is also an example for use with textareas there too.

Categories