select2 dropdown value stored locally - javascript

I have multiple select2 drop-downs. Their value are loaded from their respective json files. The form is slow to load.
I want to combine their json files into one file. How do I change my javascript to read from one json file?
Is it possible to save drop-down values locally, so when the form is loaded the second time, it reads from the memory not read json files again.
function mySelect2(file,field) {
$.getJSON(file, function(obj) {
$.each(obj, function(key, value) {
$(field).select2({
data: [
{
id: value,
text: key
}
]
});
});
});
}
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
mySelect2("../data/contactsourcesources.json",'#source_of_contact');
mySelect2("../data/levelofstudysources.json",'#degree');
//mySelect2("../data/institutionssources.json",'#uni');
//mySelect2("../data/countries.json",'#countryorigin');
mySelect2("../data/degreessources.json",'#course');
});
</script>
</head>
<body >
<section>
<label for="source_of_contact">
Contact Method:
<select class="source_of_contact" id="source_of_contact" name="source_of_contact">
</select>
</label>
<label for="degree" class="lbl-text">Degree Type:<span id="required">*</span>
<select class="degree" id="degree" name="degree">
</select>
</label>
</section>
</body>
</html>
Json file:
{"Caf\u00e9 Connect\n":"7e0a7146","Academic Advising Day\n":"academic_advising_day"}
I want to change the Json and JavaScript to
{"source_of_contact":{"Caf\u00e9 Connect\n":"7e0a7146","Academic Advising Day\n":"academic_advising_day"}}
function mySelect2(file,field) {
$.getJSON(file, function(obj) {
// obj.field, how do I get value of field? I want to be like this
// obj.source_of_contact
$.each(obj.field, function(key, value) {
$(field).select2({
data: [
{
id: value,
text: key
}
]
});
});
});}

Don't use CDN, download and use the local copy of the js . That will increase the time a bit,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
second in order to make it load the data faster don't call the all GetJSOn function at document ready, call each function one after another on change of the dropdown values.

Related

How can I either post or pass data from website to object element inside it?

I'm trying to pass data somehow from website to an object element which is contained inside it.
A brief example:
This is a test1.html example which is in https://domain.tld/folder1/test1.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$( document ).ready ( function () {
$("#templates").on("change", function () {
[.... here I want to pass data to object element ...]
$("#test").show();
});
}
);
</script>
</head>
<body>
<label>Open object </label>
<select id="templates name="templates">
<option value="1">Template1</option>
<option value="2">Template2</option>
<option value="3">Template3</option>
</select>
<div id="test" style="display: none;">
<object type="text/html" data="https://domain.tld/folder2/editor.php">
</object>
</div>
</body>
</html>
test div element is opened full screen when select element is changed. I want to pass selected value to "https://domain.tld/folder2/editor.php" html code, because I need to make some custom details to it according to selected value. Is it possible?
Hope you can understand me.
Thank you so much for your help.
John
yes it is, you can use AJAX :
var dataIn = { someKey : "someValue" };
$.ajax({
url : "https://domain.tld/folder2/editor.php",
data : dataIn,
success : function ( result ) {
// do something with the response
}
});
or $.get or $.post depending on what you need in your backend.

Parse content from a html page

Need to dynamically update contents in a div of main page, based on data fetched from other html page
setInterval( function() {
$.ajax({
type:'GET',
url:"url for status",
success : function(data){
console.log(data);
}
})
},3000);
The content of 'data' printed in developer tool console is:
<html>
<style>
</style>
<head>
</head>
<script>
var conns=[{num:1,
id:1,
Conn:[{type:'ppp',
Enable:1,
ConnectionStatus:'Disconnected',
Name:'CONNECTION_1',
Uptime:0,
ConnectionError:'TIME_OUT',
..............
}]
},
{num:2,
id:2,
Conn:[{type:'ppp',
Enable:1,
ConnectionStatus:'Disconnected',
Name:'CONNECTION_2',
Uptime:0,
ConnectionError:'TIME_OUT',
..............
}]
}]
</script>
</html>
Need to extract the ConnectionStatus, Name and ConnectionError from this content and display it in respective div in main page.
I would recommend using a different transfer type, however, you could use something like this:
function break_out_each_id(){//returns array of indexes where id starts
var i = 0;
id_objs = [];
while data.indexOf('id', i) > -1{
id_objs[i] = data.indexOf('id', i);
i++;
}
return id_objs
}
function find_values(){//pseudo code
use the array of indexes from first index to next index
in that string, do index of each value you are looking for (ConnectionStatus...)
then parse that line after the ':' to get the value.
Do this for each index in indexes array
}
Sorry for the pseudo code, but this post is getting really long. Like I said, it would be MUCH better to just send the response as JSON (even if it is a stringified version of it). In that case you could just do a simple JSON.parse() and you'd be done.

How to pass a JavaScript object to another JavaScript script created from an AJAX call

I am working on a single page web app and I'm working with JavaScript objects for the first time. My index page has a menu button which populates in an element in the body using AJAX. That AJAX call returns a button and which requires it's own javascript. My issue is that I can't access the DataEntryObj object that I created in the original script from the JavaScript generated from the AJAX call. When I console log the object, it returns the text used to create the object rather than an object itself. What's going on?
index.php
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...menu
<button type="button" id="loadElement"></button>
...end of menu
<div id="response"></div>
<script>
//data Object
var DataEntryObj = function(){
this.dataArray = [[0,1,2,3,4]];
}
$(document).ready(function() {
$('#loadElement').click(function(){
var dataObject = new DataEntryObj();
console.log(DataEntryObj);
//this AJAX call works
$.post("php/entries/loadElement.php", {array : dataObject.dataArray}, function(data){
$('#response').html(data);
});
});
});
</script>
</body>
</html>
loadElement.php
...HTML
<button type="button" id="loadSubElement"></button>
<div id="subResponse"></div>
...end of HTML
<script>
$(document).ready(function() {
$('#loadSubElement').click(function(){
//this AJAX call doesn't work
$.post("php/entries/another.php", {array : DataEntryObj.dataArray}, function(data){
$('#subResponse').html(data);
});
});
});
</script>

How to load a local JSON file using JavaScript to update a select list inHTML?? (Expecting simple answers, I'm just a beginner)

This is what I want:
I want to add or remove countries from a 'countries.json' file, which stored in my local. This is just a test to understand json. Please help me.
<html>
<head>
<title></title>
</head>
<body>
<select name="countries" id="countries"></select>
</body>
<script src="dropdown.js"></script>
</html>
Got the answer:
This is how I loaded json using my js:
$(function() {
$('#countries').click(function(){
$.getJSON('dropdown.json', function(data) {
countries = data['countries']
$.each(countries, function(id, country) {
$('select').append('<option value="">' + country["countryName"]+'</option>')
})
});
})
})

Adding elements from a JSON file into the HTML through Javascript

I'm building a webpage where you'll be able to display random elements fetched from a JSON database. For example, we could have a "what should I cook" button where you're given a random dish every time you click it.
So far, I've managed to create a button that, when clicked, writes out one (1) field from the several ones I have in my JSON file.
I want to add more elements to the JSON.
Also I'm trying to accomplish one of two alternatives:
Get the fields from a random element in the JSON file. (this is preferred over the second alternative)
OR
Get the elements from the JSON file in a specific order. So you could get a field from the first element when you click the button the first time, then one field from the second element when you click it the second time and so on.
Right now nothing works if I add another element.
This is how my code looks like right now.
JSON:
{
"visible": "1",
"date": "2011-01-16 19:48:27",
"submitterid": "2541",
"rating": "3",
"dubious": "1",
"imdbid": "0268126",
"id": "1919",
"title": "Adaptation",
"year": "2002"
}
HTML:
<html>
<head>
<title>hi</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js.js"></script>
<script>
var bechdelApi = "js.js";
$(document).ready(function(){
$("button").click(function(){
$.getJSON(bechdelApi, function(data){
$.each(data, function(i, field){
if (i == "title") {
$("div").append(field + " ");
}
});
});
});
});
</script>
</head>
<body>
<button>give me a movie!</button>
<div></div>
</body>
If you use TaffyDB, you could do something like this:
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.2/taffy-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<button class="movie-button">give me a movie!</button>
<div class="movies-container"></div>
</body>
</html>
<script>
var movies = TAFFY();
$.getJSON("yourAPICall", function( data ) {
movies.insert(data);
});
$(".movie-button").click(function(){
//updating each element in the movies db with the 'order' field, which is initialized with a random value
movies().update(function(){
this.order = Math.floor(Math.random() * 100);
return this;
});
//ordering the movies collection by the field 'order' and fetching the first movie on the new ordering
var movie = movies().order("order").first();
//appending movie title to container div
$(".movies-container").html($("<div class='movie-container'></div>").append(movie.title));
});
</script>
EXAMPLE: http://jsfiddle.net/87u27swk/

Categories

Resources