I am trying to give my search bar autocomplete function.
$(function() {
var availableTags = [{
"game1": "title1"
},
{
"game2": "title2"
},
{
"game3": "title3"
},
];
$("#choices-text-preset-values").autocomplete({
source: availableTags
});
});
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form method="GET" action="{% url 'search_results' %}" style="display: inline; background-color: transparent;" method="get">
<div id="search_bar" class="row" style="margin-top: 0px; text-align: center;">
<input name="q" class="sb-pos" id="choices-text-preset-values" type="text" placeholder="Aramak istediğiniz oyunu yazın! " style="padding-left: 30px;" />
<button type="submit" style="background-color: transparent; border: none;" class="sb-icon-pos">
<i class="fa fa-search" style="color: black; font-size: x-large;"></i>
</button>
</div>
</form>
I am getting this error:
TypeError: $( "#choices-text-preset-values" ).autocomplete is not a function. (In '$( "#choices-text-preset-values" ).autocomplete({
source: ['deneme','deneme2']
})', '$( "#choices-text-preset-values" ).autocomplete' is undefined)
The jQuery (or any javascript API in general) API might not be found for a various number of reasons.
Usually the problem is caused by the jQuery javascript code not being loaded at the moment your script executes. This can be due to a various number of reasons:
An adblocker might have blocked the jQuery javascript file
The jQuery javascript file is hosted on a CDN / other server that is offline
You loaded jQuery, but forgot to include jQuery UI (autocomplete is part of jQuery UI!)
Your code was executed before jQuery was loaded.
This can be caused because your <script>$(document).ready(/*whatever*/);</script> code is located before the <script src="/path/to/jquery.js"></script> block, or alternately because you mistakenly made the jquery script tag async. So, make sure that:
the jQuery script tag is located before your script and
it is not marked as async.
Related
I'm currently new to javascript and I'm attempting to learn to set my webcam and have it take a snap using js.
However, only the Webcam.snap() works on my end. My Webcam.set() and Webcam.attach() won't show despite being able to take a snapshot.
Here's how it looks like when the page loads up vs after I take a snap
The empty space on the left part is where the webcam is supposed to be positioned at
Here's my webcam part in html:
<h3>Photo capture</h3>
<fieldset>
<div class="form-row">
<div class="col-md-6">
<div id="my_camera"></div>
<br/>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
<input type="hidden" name="image" class="image-tag">
</div>
<div class="col-md-6">
<div id="results">Your captured image will appear here...</div>
</div>
</div>
</fieldset>
I also included webcam.js right at the beginning of my body tag
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
...
Lastly, I included the script tag for custom functions within the body tag:
<script language="JavaScript">
Webcam.set({
width: 300,
height: 200,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#my_camera');
function take_snapshot() {
Webcam.snap(function(data_uri) {
$(".image-tag").val(data_uri);
document.getElementById('results').innerHTML = '<img src="' + data_uri + '"/>';
});
}
</script>
I have tried downloading and replicating the source code from Savani H. (2018)'s article and his code seems to work well. Did I miss anything? Any help/insight would be appreciated.
Reference:
Savani H. (2018)
I have a form that contains 2 divs, and in each div is an input, and when I press the buttons associated with each input, nothing happens and I believe it has something to do with the divs in the form. I know this code works when there wasn't the 2 divs, but I need to the divs so I can have the layout the way it is. Any suggestions?
I know I'd forgotten to add JQuery to this post, it was my mistake, but even with JQuery added it wasn't working in my project, in which this code is based.
Live code: https://jsfiddle.net/1brk3npL/
$(document).ready(function() {
$('#addLikes').click(function() {
if ($('#likes').val() === "") {
alert("Likes input is empty.");
} else {
$('#likesOutput').append($("<option></option>")
.attr("value", $('#likes').val()).text($('#likes').val()));
}
});
$('#removeLikes').click(function() {
$('#likesOutput option:selected').remove();
});
$('#addDislikes').click(function() {
if ($('#dislikes').val() === "") {
alert("Dislikes input is empty.");
} else {
$('#dislikesOutput').append($("<option></option>")
.attr("value", $('#dislikes').val()).text($('#dislikes').val()));
}
});
$('#removeDislikes').click(function() {
$('#dislikesOutput option:selected').remove();
});
});
select {
width: 250px;
}
input[type=text] {
font-family: "ProximaRegular", sans-serif;
width: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="preferenceDiv">
<form id="preferenceInput">
<div style="float:left; position:relative; width : 50%;">
Likes:
<br/>
<input type="text" id="likes" />
<br />
<button id="addLikes" type="button">Add Likes</button>
<button id="removeLikes" type="button">Remove Likes</button>
<br />Selected Likes:
<br />
<select id="likesOutput" multiple="multiple"></select>
</div>
<div style="float:left; position:relative; width : 50%;">
Dislikes:
<br/>
<input type="text" id="dislikes" />
<br />
<button id="addDislikes" type="button">Add Dislikes</button>
<button id="removeDislikes" type="button">Remove Dislikes</button>
<br />Selected Dislikes:
<br />
<select id="dislikesOutput" multiple="multiple"></select>
</div>
</form>
</div>
Ok, so the code started working as intended yesturday. I don't know what happened, I didn't change the code in anyway. But one minute it wasn't working, then suddenly it was.
Add jQuery and also add $ reference to jQuery.
Chnage the first line of the JS like this
jQuery(document).ready(function ($) {
Even if you include jQuery there is reference missing. PLease change it and it'll work.
Just Add below jquery library in this https://jsfiddle.net/1brk3npL/ HTML part and see it's working :)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Thanks
jQuery is not defined.
I just added jQuery on your jsfiddle and your code works.
Click on Javascript options -> FRAMEWORKS & EXTENSIONS -> Select jQuery version - > Click On Run
I am developing an application, and I need to parse JSON and display it. I used the getJSON() function, which is working fine, and I'm using $(class_name).html(text). When I view the isolated HTML file in the browser, minus the CSS formatting, I can see the text, but when I run the application, and navigate to the page, the text (with the CSS formatting) does not show up. Even when I Inspect the element, the text is not present in it. Why is this happening?
Thank you
What console.log(data); contains:
schools:"Schools"
search-school:"Search school by number or name"
student-det:"Student Details"
students:"Students"
summary:"Summary"
The actual JSON:
{
"schools":"Schools",
"search-school":"Search school by number or name",
"student-det":"Student Details",
"students":"Students",
"summary":"Summary"
}
$.getJSON("./lang/en.json", function(data) {
$(".SecondTopBarTitleProperties").html(data.schools);
});
.SecondTopBarProperties
{
background-color:#333333;
height:40px;
}
.SecondTopBarTitleProperties
{
color:white;
font-size:16px;
margin-top:6px;
margin-left:6px;
font-family: Helvetica;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container SecondTopBarProperties">
<label class="SecondTopBarTitleProperties"></label>
<button data-bind="click:NewSchool" type="button" class=" pull-right btn btn-primary btn-default btn-sm" style="margin-right: 10px;margin-top: 2px; margin-bottom: 2px;">Add School</button>
</div>
Before the "Add School" button, it's supposed to display "Schools".
Plain HTML:
Formatted:
Any help please?
you need to include your styles into your html code i prepared this fiddle
https://jsfiddle.net/vmf3e3mf/4/
$(function(){
var data = { name = "hey" }
$('.SecondTopBarTitleProperties').html('<span style="color:red">'+data.name+'</span>')
})
You need to wait with the execution of your JS until the DOM is ready, else your JS can't manipulate the DOM elements, because they do not yet exist.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
// Code inside this block will be executed when the DOM is ready
var data = {
schools: "Schools"
};
$(".SecondTopBarTitleProperties").html(data.schools);
}); // DOM ready
</script>
<div class="container SecondTopBarProperties">
<label class="SecondTopBarTitleProperties">
</label>
<button data-bind="click:NewSchool" type="button" class=" pull-right btn btn-primary btn-default btn-sm" style="margin-right: 10px;margin-top: 2px; margin-bottom: 2px;">Add School</button>
</div>
If this does not work for you, then you need to check what your $.getJSON("./lang / en.json ", function(data) { does, because we can't test this part for you.
Maybe it's due to copy&paste, but it should probably read $.getJSON("./lang/en.json", function(data) { without those spaces.
Check your browser's Network tab (in the browser's console) to see what you're requesting from the server and what the server returns.
I've tried this in w3schools and it works fine.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var data = { name :"hey" };
alert('hi');
$('.SecondTopBarTitleProperties').html(data.name);
});
</script>
</head>
<body>
<div class="container SecondTopBarProperties">
<label class="SecondTopBarTitleProperties"></label>
<button data-bind="click:NewSchool" type="button" class=" pull-right btn btn-primary btn-default btn-sm" style="margin-right: 10px;margin-top: 2px; margin-bottom: 2px;">Add School</button></div>
</body>
</html>
I'm currently upgrading a WYSIWYG Rich Text Editor that was based on the DHTML Editor Control (DEC) to use the more modern editor controls in modern browsers. I'm using an iFrame with design mode turned on and a mixture of regular javascript and jquery.
One of my requirements is to insert html content (forms etc) into the iframe so that users can edit them. I have it working in FF + Chrome, but IE is proving a pain. My current code inserts the content at the start of the parent document and not the iframes, I'm using the selection.createRange() function that when used with DEC would insert the content either at the cursor if the control was selected or at the end of the document inside the editor if not.
Currently it only works when I select some text in IE. Heres my current code (apologies if it looks unformatted the firewall at work is blocking a lot of the css + js from stackoverflow), any ideas?
<html>
<head>
<title>Text Editor Test</title>
<style type="text/css">
.toolbar {background-color:#BFC193;width:500px;padding:5px;}
#insertForm {position: absolute;height:60px;width:200px;top:50px;left:50px;border:1pt solid black;background-color:#fff;padding:10px;}
</style>
</head>
<body>
<h1>MSHTML Text Editor</h1>
<form id="frmEdit">
<div class="toolbar" id="toolbar">
<input type="button" name="insertHTML" value="insert html" onClick="showForm();"/>
</div>
<div id="insertForm" style="display:none;">
Insert Content Form
<input type="button" value="OK" style="width: 80px" onClick="insertContent();">
</div>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
// functions to execute once the DOM has loaded.
$(document).ready(function() {
pageInit();
});
function pageInit() {
// create iframe
$('.toolbar').after("<iframe id='frameEdit' style='width:500px; height:400px' ></iframe>");
//insert delay for firefox + webkit browsers before turning on designMode open + close seems to do the job
document.getElementById('frameEdit').contentWindow.document.open();
document.getElementById('frameEdit').contentWindow.document.close();
document.getElementById('frameEdit').contentWindow.document.designMode='On';
}
function showForm() {
$('#insertForm').toggle();
}
function insertContent() {
// turn off form
showForm();
// set test content
var htmlContent = "<p>Insert Test</p>";
var doc = document.getElementById('frameEdit').contentWindow.document;
if (doc.selection && doc.selection.createRange) { // IE
var range = doc.selection.createRange();
range.pasteHTML(htmlContent);
} else { // FF
doc.execCommand('insertHTML', false, htmlContent);
}
}
</script>
</form>
</body>
</html>
Make your button unselectable to stop it nicking the focus from the iframe. You can do this in IE using uneselectable="on":
<input type="button" value="OK" unselectable="on"
style="width: 80px" onclick="insertContent();">
I printed to the screen 16 icons (little pictures).
Now I want to be able to select icons,
and when I press a button the selected icons ids will be sent in a form.
I saw in the net only checkboxes and lists multiselect,
what's the best way to do this?
(I'm pretty new to web design)
thanks ahead!
Although jQuery isn't in your tags, you should introduce yourself to jQuery. It'll make your life easier, for what you're trying to do. Here is the basic steps both if you use jQuery and if use just Javascript:
With jQuery
Give all your icons a class and each one a unique id:
<img src='icon1.png' data-iconID=2233 class='myIcons' />).
Then bind that class to a click event
$('.myIcons').bind('click', function() {
$(this).toggleClass('selectIcon');
});
Attach form submit function to onsubmit:
<form ... onsubmit="submitForm();">
Build submitForm function:
function submitForm() {
var csvIconIds = '';
$.each($('.myIcons.selectIcon'), function (index, value) {
csvIconIds += $(value).attr('data-iconID');
});
//submit scvIconIds here along with other form data (ajax?)
}
With Javascript
Similar as above but way more complicated...
To toggle classes see this thread: How to add/remove a class in JavaScript?
To getting attributes by class see this site: http://www.actiononline.biz/web/code/how-to-getelementsbyclass-in-javascript-the-code/
This could be a way using just plain Javascript or jQuery. I prefer the jQuery version, since it separates the click handler from the markup, instead of using inline onclick handlers, which are in general discouraged.
What this does is use an input element array, which you can create by adding [] to the element name. This same technique can be used on SELECTs and other elements, since it signals to the server that an array has been submitted, as opposed to value known by a single key.
<html>
<head>
<style type="text/css">
div img {
cursor: pointer;
border: 1px solid #f00;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
function setFormImage(id) {
if (id != '' && !document.getElementById('input_'+id)) {
var img = document.createElement('input');
img.type = 'text';
img.id = 'input_'+id;
img.name = 'images[]';
img.value = id;
document.imageSubmit.appendChild(img);
}
}
$(document).ready(function(){
$('#jqueryimages img').click(function(){
setFormImage(this.id);
});
});
</script>
</head>
<body>
<pre><?php
if (count($_GET['images'])) {
print_r($_GET['images']);
}
?></pre>
<div style="float: left; width: 49%;">
<h1>Plain ol' HTML</h1>
1. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-1" onclick="setFormImage(this.id)"/>
<br/>
2. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-2" onclick="setFormImage(this.id)"/>
<br/>
3. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-3" onclick="setFormImage(this.id)"/>
<br/>
4. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-4" onclick="setFormImage(this.id)"/>
</div>
<div id="jqueryimages" style="float: left; width: 49%;">
<h1>jQuery</h1>
5. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-5"/>
<br/>
6. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-6"/>
<br/>
7. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-7"/>
<br/>
8. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-8"/>
</div>
<h1>Form Submit</h1>
<form name="imageSubmit" method="get">
<input type="submit" value="View Selected"/>
</form>
</body>
</html>
try this
var idArray = [];
$("#container-id img").each(function(index,value){
idArray.push($(value).attr("id"));
});
//do anything with the array