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>
Related
I am super new to React and quite new to Meteor.
I am doing a Meteor.call to a function ('getTheThing'). That function is fetching some information and returns the information as a response. In my browser I can see that the method is returning the correct information (a string), but how do I get that response into the DOM?
(As you can see, I have tried to place it in the DOM with the use of ReactDOM.findDOMNode(this.refs.result).html(response);, but then I get this error in my console: Exception in delivering result of invoking 'getTheThing': TypeError: Cannot read property 'result' of undefined)
App = React.createClass({
findTheThing(event) {
event.preventDefault();
var username = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
Meteor.call("getTheThing", username, function(error, response){
console.log(response);
ReactDOM.findDOMNode(this.refs.result).html(response);
});
ReactDOM.findDOMNode(this.refs.textInput).value = "";
},
render(){
return(
<div className="row">
<div className="col-xs-12">
<div className="landing-container">
<form className="username" onSubmit={this.findTheThing} >
<input
type="text"
ref="textInput"
placeholder="what's your username?"
/>
</form>
</div>
<div ref="result">
</div>
</div>
</div>
);
}
});
this is under the different context, thus does not contain the refs there. Also, you cannot set html for the Dom Element. You need to change into Jquery element
var _this = this;
Meteor.call("getTheThing", username, function(error, response){
console.log(response);
$(ReactDOM.findDOMNode(_this.refs.result)).html(response);
});
Though i recommend you to set the response into the state and let the component re-rendered
For a complete React way
App = React.createClass({
getInitialState() {
return { result: "" };
},
shouldComponentUpdate (nextProps: any, nextState: any): boolean {
return (nextState['result'] !== this.state['result']);
},
findTheThing(event) {
event.preventDefault();
var username = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
Meteor.call("getTheThing", username, function(error, response){
console.log(response);
_this.setState({ result: response });
});
ReactDOM.findDOMNode(this.refs.textInput).value = "";
},
render(){
return(
<div className="row">
<div className="col-xs-12">
<div className="landing-container">
<form className="username" onSubmit={this.findTheThing} >
<input
type="text"
ref="textInput"
placeholder="what's your username?"
/>
</form>
</div>
<div ref="result">{this.state['result']}</div>
</div>
</div>
</div>
);
}
});
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>
I want to send a POST (not GET) request to the server with ember.js. I don't know which function I need at "which function here", but I want to send it to the server for a login request.
App.LoginController = Ember.ObjectController.extend({
actions: {
userLogin: function(user) {
// which function here?
?? ("http://siteurl/api/authentication/login/&username=" + user.username + "&password=" + user.password + "");
this.transitionTo('cat');
},
cancelLogin: function() {
this.transitionTo('menu');
}
}
});
App.UserFormComponent = Ember.Component.extend({
actions: {
submit: function() {
this.sendAction('submit', {
username: this.get('username'),
password: this.get('password')
});
},
cancel: function() {
this.sendAction('cancel');
}
}
});
down here template code
<script type="text/x-handlebars" data-template-name="login">
<header class="bar bar-nav">
<h1 class="title">inloggen</h1>
{{#link-to 'menu' class="icon icon icon-bars pull-right"}}{{/link-to}}
</header>
<!-- SHOW LOADER -->
<div class="content">
<div class="content-padded">
{{user-form submit="userLogin" cancel="cancelLogin" submitTitle="login"}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="components/user-form">
<form {{action "submit" on="submit"}}>
<p><label>gebruikersnaam {{input type="text" value=username}}</label></p>
<p><label>wachtwoord {{input type="password" value=password}}</label></p>
<input type="submit" class="btn btn-primary btn-block" {{bindAttr value=submitTitle}}>
<button class="btn btn-negative btn-block" {{action "cancel"}}>Cancel</button>
</form>
</script>
Ember doesn't have any built in communication layer, you can use jquery for such calls.
App.LoginController = Ember.ObjectController.extend({
actions: {
userLogin: function(user) {
$.ajax({
type: "POST",
url: "http://siteurl/api/authentication/login/&username=" + user.username + "&password=" + user.password,
data: { name: "John", location: "Boston" }
})
this.transitionTo('cat');
},
cancelLogin: function() {
this.transitionTo('menu');
}
}
});
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>
I am trying to add multiple forms which associates different types of document but when I try to add a file from second form it shows up in primary form submission and also for process event. Please advise what could be wrong here.
<form accept-charset="UTF-8" action="/docs/1" class="documents" enctype="multipart/form-data" id="new_document" method="post">
<div class="input-append" >
<input class="filestyle" did="pdoc" id="document_doc_file" name="document[doc_file]" type="file" uid="template-upload-1" />
</div>
<input id="document_doc_type" name="document[doc_type]" type="hidden" value="1" />
</form><script id="template-upload-1" type="text/x-tmpl">
<div class="upload">
{%=o.name%}<span class="pull-right" id="pbar">Uploading 0%</span></span>
<div class="progress"><div class="bar" style="width: 0%"></div></div>
</div>
</script>
<div id="pdoc"></div>
<form accept-charset="UTF-8" action="/docs/1" class="documents" enctype="multipart/form-data" id="new_document" method="post">
<div class="input-append" >
<input class="filestyle" did="ldoc" id="document_doc_file" name="document[doc_file]" type="file" uid="template-upload-2" />
</div>
<input id="document_doc_type" name="document[doc_type]" type="hidden" value="2" />
</form><script id="template-upload-2" type="text/x-tmpl">
<div class="upload">
{%=o.name%}<span class="pull-right" id="pbar">Uploading 0%</span></span>
<div class="progress"><div class="bar" style="width: 0%"></div></div>
</div>
</script>
<div id="ldoc"></div>
<script type="text/javascript">
$(function () {
$('.documents').fileupload({
dropZone: $(this).find('input:file'),
dataType: 'script',
fileInput: $(this).find('input:file'),
singleFileUploads: true,
add: function(e, data) {
var file, types;
types = /(\.|\/)(pdf|xls|xlsx)$/i;
file = data.files[0];
if (types.test(file.type) || types.test(file.name)) {
uid = $(this).find(':file').attr('uid');
if ($('#' +uid).length > 0) {
data.context = $(tmpl(uid, file).trim());
}
did = $(this).find(':file').attr('did');
$('#' + did).append(data.context);
data.submit();
} else {
alert("" + file.name + " is not a pdf or an excel file.");
}
},
progress: function (e, data) {
if (data.context) {
var progress = parseInt(data.loaded / data.total * 100, 10);
data.context.find('.bar').css('width', progress + '%');
if (progress < 100) {
data.context.find('#pbar').html('Uploading ' + progress + '% ...');
} else {
data.context.find('#pbar').html('Upload Complete');
}
}
}
});
$(document).bind('drop dragover', function (e) {
e.preventDefault();
});
});
</script>
The variable 'this' that you use is ambiguous and might be the cause for the problem.
The simplest solution would be to initiate each form separately - in a for loop over the results of $('.documents') or if you are expecting only two forms just give each of them an id doc1 and doc2 and build the fileupload for each.