I have one jquery ui autocomplete input that I would like to show another dropdown after another. For example : If I type two characters of the city name like ba, it would display a dropdown contained : Addis Ababa, Baghdad, Baku, Bamako and Bangkok. If I pick one of them (Bangkok) and press a spacebar, another dropdown (at the same input box) would be displayed : Bangkok Accommodation, Bangkok Restaurants, Bangkok Sights, and Bangkok Transport. I can do this but only for the first time. When I change the keyword like ab. it should display Abu Dhabi, Abuja, etc but the dropdown fail to be displayed. Here is the script :
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var Cities = [
'Abu Dhabi',
'Abuja',
'Accra',
'Amsterdam',
'Addis Ababa',
'Baghdad',
'Baku',
'Bamako',
'Bangkok',
'Beijing',
'Cairo',
'Canberra',
'Caracas'
];
$('#dest').autocomplete({
source: Cities,
minLength: 2,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).blur();
$(this).focus();
//the second autocomplete
var more=[
ui.item.value + ' Accommodation',
ui.item.value + ' Restaurants',
ui.item.value + ' Sights',
ui.item.value + ' Transport'
];
$('#dest').autocomplete({
source: more,
select: function (event, ui) {
$(this).val(ui.item.value);
}
});
}
});
});
</script>
</head>
<body>
<div>
<span><em><strong>City</strong></em></span>
<br />
<span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
</div>
</body>
</html>
I dont want to use another input box for this.
http://jsfiddle.net/Lngzbjc6/5/
After many trying, I got the solution (I dont know if this is the best). Here is the full code.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var Cities = [
'Abu Dhabi',
'Abuja',
'Accra',
'Amsterdam',
'Addis Ababa',
'Baghdad',
'Baku',
'Bamako',
'Bangkok',
'Beijing',
'Cairo',
'Canberra',
'Caracas'
];
$('#dest').autocomplete({
source: Cities,
minLength: 2,
select: function (event, ui) {
$(this).val(ui.item.value);
$('#temp_val').val(ui.item.value);
$(this).blur();
$(this).focus();
//the second autocomplete
var more=[
ui.item.value + ' Accommodation',
ui.item.value + ' Restaurants',
ui.item.value + ' Sights',
ui.item.value + ' Transport'
];
$('#dest').autocomplete({
source: more,
select: function (event, ui) {
$(this).val(ui.item.value);
$('#temp_val').val(ui.item.value);
}
});
}
});
$('#dest').keypress(function(event){
var dest = $.trim($('#dest').val());
var temp_val = $.trim($('#temp_val').val());
if(temp_val != ''){
if(event.which != 32)
$('#dest').autocomplete('option','source',Cities);
else{
var arr=[' Accommodation',' Restaurants',' Sights',' Transport'];
var found_arr='';
$.each(arr,function(index,value){
if(temp_val.indexOf(value) >= 0){
found_arr=value;
return false;
}
});
if(found_arr != '')
temp_val=temp_val.replace(found_arr,'');
var more=[
temp_val + ' Accommodation',
temp_val + ' Restaurants',
temp_val + ' Sights',
temp_val + ' Transport'
];
$('#dest').autocomplete('option','source',more);
}
}
});
});
</script>
</head>
<body>
<div>
<span><em><strong>City</strong></em></span>
<br />
<span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
<input type="hidden" id="temp_val" name="temp_val" value="">
</div>
</body>
</html>
Related
i have to get data from externaljson url api in yii2 framework,json url is:https://next.json-generator.com/api/json/get/EympRaB4D
<p>
<input type="button" value="Fill SELECT Dropdown List with JSON" id="bt" />
</p>
<select id="sel">
<option value="">-- Select --</option>
</select>
<p id="msg"></p>
<script>
$(document).ready(function () {
$('#bt').click(function () {
var url = "https://next.json-generator.com/api/json/get/EympRaB4D";
$.getJSON(url, function (data) {
$.each(data, function (index, value) {
// APPEND OR INSERT DATA TO SELECT ELEMENT.
$('#sel').append('<option value="' + value.company + '">' + value.country + '</option>');
});
});
});
// SHOW SELECTED VALUE.
$('#sel').change(function () {
$('#msg').text('Selected Item: ' + this.options[this.selectedIndex].text);
});
});
$(document).ready(function () {
$('#bt').click(function () {
$.ajax({
url: "https://next.json-generator.com/api/json/get/EympRaB4D",
type: "GET",
success: function (result) {
//console.log(result);
for(var dataSet in result){
$("#sel").append("<option value="+result[dataSet].company+">"+result[dataSet].country+"</option>");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
});
// SHOW SELECTED VALUE.
$('#sel').change(function () {
$('#msg').text('Selected Item: ' + this.options[this.selectedIndex].text);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p>
<input type="button" value="Fill SELECT Dropdown List with JSON" id="bt" />
</p>
<select id="sel">
<option value="">-- Select --</option>
</select>
<label id="msg"></label>
</body>
</html>
I'm trying to use JQUERY-file-upload plugin to upload multiple files, after I added the container and file field, and try to upload, I can select multiple files, but the select files not be shown in the template table list.Below you may find the details:
The input and table as below in the html template:
<input id="fileupload" type="file" name="files[]" multiple>
<table role="presentation"><tbody class="files"></tbody></table>
added the JS library and CSS as below:
<script src="{% static "js/jquery.ui.widget.js" %}" ></script>
<script src="{% static "js/jquery.iframe-transport.js" %}" ></script>
<script src="{% static "js/jquery.fileupload.js" %}" ></script>
<script src="{% static "js/jquery.fileupload-ui.js" %}" ></script>
<link href="{% static "css/jquery.fileupload.css" %}" rel="stylesheet">
<link href="{% static "css/jquery.fileupload-ui.css" %}" rel="stylesheet">
with below JS, I can select multiple files, but the selected files didn't show in the template table:
$('#fileupload').fileupload({
filesContainer: $('table.files'),
uploadTemplateId: null,
downloadTemplateId: null,
replaceFileInput:false,
uploadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-upload fade">' +
'<td><span class="preview"></span></td>' +
'<td><p class="name"></p>' +
'<div class="error"></div>' +
'</td>' +
'<td><p class="size"></p>' +
'<div class="progress"></div>' +
'</td>' +
'<td>' +
(!index && !o.options.autoUpload ?
'<button class="start" disabled>Start</button>' : '') +
(!index ? '<button class="cancel">Cancel</button>' : '') +
'</td>' +
'</tr>');
row.find('.name').text(file.name);
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.error').text(file.error);
}
rows = rows.add(row);
});
return rows;
},
downloadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-download fade">' +
'<td><span class="preview"></span></td>' +
'<td><p class="name"></p>' +
(file.error ? '<div class="error"></div>' : '') +
'</td>' +
'<td><span class="size"></span></td>' +
'<td><button class="delete">Delete</button></td>' +
'</tr>');
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.name').text(file.name);
row.find('.error').text(file.error);
} else {
row.find('.name').append($('<a></a>').text(file.name));
if (file.thumbnailUrl) {
row.find('.preview').append(
$('<a></a>').append(
$('<img>').prop('src', file.thumbnailUrl)
)
);
}
row.find('a')
.attr('data-gallery', '')
.prop('href', file.url);
row.find('button.delete')
.attr('data-type', file.delete_type)
.attr('data-url', file.delete_url);
}
rows = rows.add(row);
});
return rows;
}
});
Any idea on what's wrong on my code? Any help will be appreciated, thanks in advance!
I have an enum field linked to a remote source and as you type in the field the remote source supplies matches, which pop up just like you would expect. It works great. But I need that field to be in a Form. The problem is that when it's in the form it no longer works. I stripped the code down and listed it below. Hopefully the code below is enough, but you can click the links provided to try it and view source for the next couple of weeks or so.
Can anyone explain how to make it work in the Form?
This code works (try it here):
<html>
<head>
<title>Remote Source Enum</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div class="w2ui-field"><label>Name Picker:</label><div> <input id="tcidPicker"></div></div>
<script>
$('#tcidPicker').w2field('enum', {
url: '/v1/transactantstd/ISO',
renderItem: function (item) {return item.FirstName + ' ' + item.LastName; },
renderDrop: function (item) {return item.FirstName + ' ' + item.LastName; },
compare: function (item, search) {
// ... lines removed for brevity ...
}
});
</script>
</body>
</html>
This code does not work (try it here):
<html>
<head>
<title>Remote Source Enum in a Form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="form">
<div class="w2ui-field">
<label>Name Picker:</label><input id="tcidPicker" name="tcidPicker">
</div>
</div>
<script type="text/javascript">
$(function () {
$('#form').w2form({
name : 'form',
fields: [
{ field: 'tcidPicker',
type: 'enum',
url: '/v1/transactantstd/ISO',
renderItem: function (item) {return item.FirstName + ' ' + item.LastName; },
renderDrop: function (item) {return item.FirstName + ' ' + item.LastName; },
compare: function (item, search) {
// ... lines removed for brevity
},
},
],
});
});
</script>
</body>
</html>
You need to wrap the options in a options property.
See: http://w2ui.com/web/docs/1.5/w2form.fields
In your case:
fields: [
{ field: 'tcidPicker',
type: 'enum',
options: {
url: '/v1/transactantstd/ISO',
renderItem: function (item) {return item.FirstName + ' ' + item.LastName; },
renderDrop: function (item) {return item.FirstName + ' ' + item.LastName; },
compare: function (item, search) {
// ... lines removed for brevity
},
},
},
],
When using jQuery UI Dialog, values loaded into form textarea fields that are part of the dialog are not displayed.
I am attempting to use a jQuery dialog to pop up a CRUD form. In the case of update (edit), the form fields are loaded with the values from the item being "edited."
When I open the dialog (if key == "edit"), the "name" field is displayed but the description textarea is not.
Viewing the HTML tab under Firebug, the text value of the textarea (that between the textarea and /textarea) is correctly set, but that value does not display in the resultant dialog:
<form id="CRUDform">
<fieldset>
<label for="name">Name</label>
<input id="name" class="text ui-wiget-content ui-corner-all" type="text" style="display:block" value="[SHOULD NEVER SEE THIS]" name="name">
<label for="description">Description</label>
<textarea id="description" class="text ui-widget-content ui-corner-all" style="display:block" name="description">Description of Nothing</textarea>
<!-----------------------------------^^^^^^^^^^^^^^^^^^^^^^ -->
</fieldset>
</form>
I've found some references to issues with form fields related to dialogs being appending to the body of the document rather than the form, but that does not seem relevant to this case.
Platform: Windows 7 Professional
Browser: Firefox 24.0
Firebug: 1.12.3
jQuery: 1.9.1
jQuery UI: 1.10.3
Here is the test code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.contextMenu.css">
<style>
.dialog
{
}
</style>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/jquery.contextMenu.js"></script>
<script>
$(function () {
$(".dialog").hide();
$.contextMenu({
selector: '.myContext' ,
build: function ( trigger , thrown )
{
return (
{
autoHide: true ,
callback: function ( key , menuOptions )
{
var name = $(this).data("label");
var message = "menu action [" + key + "] on [" + name + "]";
window.console && console.log(message) || alert(message);
if (key == "new")
{
$("#dialog").dialog({
title: "Adding Child of " + name + " Class",
modal: true ,
buttons:
{
"Create" : function ()
{
var name = $("#name").val();
var description = $("#description").val();
alert("Adding name [" + name + "] description [" + description + "]");
$(this).dialog("close");
},
"Cancel" : function ()
{
$(this).dialog("close");
}
},
close: function ()
{
$("#name").val("").removeClass("ui-state-error");
$("#description").val("").removeClass("ui-state-error");
}
});
}
else if (key == "edit")
{
var name = $(this).data("label");
var description = $(this).data("description");
console.log("editing name [", name , "] description [", description , "]");
$("#name").val(name);
$("#description").text(description);
console.log("name set to [" ,
$("#name").val() , "] description set to [",
$("#description").text() , "]");
$("#dialog").dialog({
modal: true ,
title: "Editing " + name ,
buttons:
{
"Save" : function ()
{
var name = $("#name").val();
var description = $("#description").val();
alert("Saving name [" + name + "] description [" + description + "]");
$(this).dialog("close");
},
"Cancel" : function ()
{
$(this).dialog("close");
}
},
close: function ()
{
$("#name").val("").removeClass("ui-state-error");
$("#description").val("").removeClass("ui-state-error");
}
});
}
},
items:
{
"new" : { name: "New", icon: "new" } ,
"edit" : { name: "Edit", icon: "edit" } ,
"delete" : { name: "Delete" , icon: "delete" }
}
});
}
});
});
</script>
<body>
<title>jQuery Dialog Test</title>
</head>
<h1>jQuery Dialog Test</h1>
<div id="list" class="list">
<ul>
<li class="myContext" data-description="Description of Something" data-label="Something">Something</li>
<li class="myContext" data-description="Description of Something Else" data-label="Something Else">Something Else</li>
<li class="myContext" data-description="Description of Nothing" data-label="Nothing">Nothing</li>
</ul>
</div>
<div class="dialog" id="dialog" title="Do Something">
<h1>Doing Something</h1>
<form id="CRUDform">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="[SHOULD NEVER SEE THIS]" style="display:block" class="text ui-wiget-content ui-corner-all">
<label for="description">Description</label>
<textarea name="description" id="description" style="display:block" class="text ui-widget-content ui-corner-all">[SHOULD NEVER SEE THIS]</textarea>
</fieldset>
</form>
</div>
</body>
</html>
Here is what I have so far...
<html>
<head>
<title>addForm</title>
<link href="css/addForm.css" rel="stylesheet" type="text/css">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<script type="text/javascript" src="../lib/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery/jquery.autocomplete.min.js"></script>
</head>
<body>
<div>
<form id="addForm" name="addForm" method="post" action="">
...
<div id="container">
<p id="add_field">
<label>Add A Class Code</label>It may take a moment for your Class Code to appear in the dropdown box.
</p>
</div>
<label>Class Screens E: </label>
<select name="ClassScreenE" id="ClassScreenE" size="5"></select>
<br>
...
</form>
</div>
<script language="javascript" type="text/javascript">
$(function(){
var count = 0;
$('p#add_field').on('click', function(){
count += 1;
$('#container').append(
'<label>ClassCode: </label>' + '<input type="text" class="autocomplete" name="ClassCode[]" id="ClassCode_' + count + '" size="34" maxlength="3">' + ' Payroll: ' + '<input type="text" name="Payroll[]" id="Payroll_' + count + '" size="10" onKeyPress="return numbersonly(this, event)">' + '<br>')
$(".autocomplete").autocomplete("scripts/findClassCode.php")
});
})
**//Edited in the following bit from Femi
//This seems to work when running 'jQuery("#ClassCode_" + i).val();' in Chrome's Inspector
//Now I need to get a solid value assigned when looping through so I can dynamically call each value to affect the a select box.
var val, i = 1, inp = jQuery("#ClassCode_" + i);
while(inp.length > 0){
// get the value
val = inp.val();
++i;
inp = jQuery("#ClassCode_" + i);
}**
</script>
</body>
</html>
All of this works perfectly. When I click the link, it generates the next set of fields while maintaining their attributes so the autocomplete piece will work. I now need to use the results of each "ClassCode_' + count + '" within the form to determine what will dynamically appear in another select box pulling data from MySQL. My issue is converting the dynamic value into a variable that can be used without having to submit the form. I've spent the day scouring the Internet to get this one working to no avail. Does anyone have any suggestions?
A little pedantic, but:
var val, i = 0, inp = jQuery("#container").find("input").find("#ClassCode_" + i);
while(inp.length > 0){
// get the value
val = inp.val();
++i;
inp = jQuery("#container").find("input").find("#ClassCode_" + i);
}
Try that?