I am running into an interesting issue that I cannot figure out. I am dynamically loading some data into an html <select></select>.
What I am discovering is that as I refresh the page, sometimes the data loads, but more often than not, there is nothing there. Is the page loading too quickly or the file not getting processed every time the page reloads?
I have tried multiple browsers and the experience is the same.
Here is my html:
<select id="group-select-user-access" class="blue-text">
<option value="" disabled selected>Select a Google Group</option>
</select>
Here is my javascript:
<script type="text/javascript">
var group_list = "json/google_group_list.json";
$.getJSON(group_list, function(json) {
$.each(json, function(key) {
var email_stripped = json[key].substring(0, json[key].lastIndexOf("#"));
$('select[id=group-select-user-access]').append('<option value="' + email_stripped + '">' + json[key] + '</option>');
});
});
</script>
The .json file is simple and in this format:
["email1#test.com", "email2#test.com", "email3#test.com", ...]
I am relatively new when it comes to JS / jQuery so any help is appreciated.
What direction should I head next for troubleshooting?
Probably an issue with the DOM not being fully loaded when you try to modify it
Try either moving your script tag to the very end of your document, or wrap your js code with $(document).ready
$(document).ready(function() {
var group_list = "json/google_group_list.json";
$.getJSON(group_list, function(json) {
$.each(json, function(key) {
var email_stripped = json[key].substring(0, json[key].lastIndexOf("#"));
$('select[id=group-select-user-access]').append('<option value="' + email_stripped + '">' + json[key] + '</option>');
});
});
})
That way your code will wait until the entire document is loaded before trying to append things to it
Related
This is in reference to dynamically change options in a list by another list. Unfortunately, it all works except if the project name has a " or a #. Eg. Project name: '10" Centerline #3 Pipe'
I am a newbie to this and I have been cut/paste (learning) as I go along. If someone can help, it will be great. I am seen some things about escaping and encoding URI stuff but not sure where to put it in. The other problem is just understanding what happens past the onchange event.
I can get the list of project names from a previous list and it shows up in my HTML page. However, when I select the choices that have a ( " ) or a ( # ), the next populated list breaks.
Thanks in advance. I really, really appreciate the time if someone puts in a response.
Here is the javascript portion:
project_name_select.onchange = function(){
project_name = project_name_select.value;
fetch('/sr/new/project/' + project_name).then(function(response){
response.json().then(function(data) {
var areaHTML = '<option value="See List">Select Area</option>';
for (var state of data.project_area) {
areaHTML += '<option value="' + state.project_area + '">' + state.project_area + '</option>'
}
project_area_select.innerHTML = areaHTML;
});
});
}
Here is the flask portion:
#surveys.route("/sr/new/project/<get_project_name>")
def project(get_project_name):
project_dict, dict_type = choice_project_dict(get_project_name)
project_areaArray = []
for proj in project_dict:
ownerObj = {}
ownerObj['id'] = proj['company_name']
ownerObj['owner_company'] = proj['company_name']
ownerArray.append(ownerObj)
return jsonify({'project_area': project_areaArray})
Hi guys i been trying to figure out for a long time but i suck at this, i found this code on google and i added it adn changed what i need but still doesnt work i really need this for my site: http://www.balkan-party.cf/
I found code here: http://www.samkitson.co.uk/using-json-to-access-last-fm-recently-played-tracks/
My last.fm username i need in js: alicajdin AND
Api key: 24f6b03517ad9984de417be5d10e150b
This is what i did:
$(document).ready(function() {
$.getJSON("http://ws.audioscrobbler.com/2.0/?method=user.getRecentTracks&user=alicajdin&api_key=24f6b03517ad9984de417be5d10e150b&limit=2&format=json&callback=?", function(data) {
var html = ''; // we declare the variable that we'll be using to store our information
var counter = 1; // we declare a counter variable to use with the if statement in order to limit the result to 1
$.each(data.recenttracks.track, function(i, item) {
if(counter == 1) {
html += 'Currently listening to: <span>' + item.name + ' - ' + item.artist['#text'] + '</span>';
} // close the if statement
counter++ // add 1 to the counter variable each time the each loop runs
}); // close each loop
$('.listening-to h5').append(html); // print the information to the document - here I look for the h5 tag inside the div with a class of 'listening-to' and use the jQuery append method to insert the information we've stored in the html variable inside the h5 tag.
}); // close JSON call
});
I created that file and i tried to add on head section, footer section but it wont show recent tracks.
And yea i have scroblr installed on google crome
below </script> add the following code:
<div class="listening-to"></div>
then remove "h5" on
"$('.listening-to h5').append(html);"
so your code like this:
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("http://ws.audioscrobbler.com/2.0/?method=user.getRecentTracks&user=YOUR_USERNAME&api_key=YOUR_API_KEY&limit=2&format=json&callback=?", function(data) {
var html = '';
var counter = 1;
$.each(data.recenttracks.track, function(i, item) {
if(counter == 1) {
html += 'Currently listening to: <span>' + item.name + ' - ' + item.artist['#text'] + '</span>';
}
counter++
});
$('.listening-to').append(html);
});
});
</script>
<div class="listening-to"></div>
Hope you can help. Sorry, my English is very Bad (Google Translate)
im sure this is a simple question but can't understand why this isn't working. I simply want to set the current time automatically to an input field. I am using Jquery at the moment to accomplish the task. I know jquery works because if I do alert (time); it shows me the time as expected.
Just to add, I set the jquery script in a text then referenced into a Content Editor Webpart under the list.
Below is the HTML of my input generated by Sharepoint. I decided to target the title as its the only consisting attribute in there.
<input type="text" class="ms-long" title="Current time" id="ctl00_m_g_dd7a368d_cc10_4464_a245_c7fc87ae6650_ff2_1_ctl00_ctl00_TextField" maxlength="255" name="ctl00$m$g_dd7a368d_cc10_4464_a245_c7fc87ae6650$ff2_1$ctl00$ctl00$TextField">
Below is the Jquery script I am trying to run. A the moment this script does nothing to my input text box.
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var time = (dNow.getMonth()+1) + '/' + dNow.getDate() + '/' + dNow.getFullYear() + ' ' + dNow.getHours() + ':' + dNow.getMinutes();
$("input[Title='Current time']").val(time);
});
</script>
Any help would appreciated on this.
I tested your code and it works fine if you define the dNow first: tested on Chrome and Opera
jQuery(document).ready(function($) {
var dNow = new Date();
var time = (dNow.getMonth()+1) + '/' + dNow.getDate() + '/' + dNow.getFullYear() + ' ' + dNow.getHours() + ':' + dNow.getMinutes();
alert(time);
$("input[title='Current time']").val(time);
});
If that's not working for you, you have some other problem in your JavaScript, debug and check for other errors
I'm a bit new to Javascript, but I've managed to get things to load to the page which is a start.
I'm trying to load 6 "shots" to a page with this script, but it currently loads them all:
<script type="text/javascript">
$(document).ready(function getDribbbleShots() {
$.jribbble.getShotsByPlayerId('abenjamin765', function (playerShots) {
var html = [];
$.each(playerShots.shots, function (i, shot) {
var str = (''+shot.description+'');
html.push('<div class="col-md-4"><div class="thumbnail"><a href="' +shot.image_url+ '" target="_blank">');
html.push('<img class="shot-image" src="' + shot.image_url + '" ');
html.push('alt="' + shot.title + '"></a>');
//html.push('<div class="caption"><h4>'+ shot.title +'</h4>');
//html.push('<div class="ellipsis">'+shot.description+'</div>');
html.push('<p class="imgTitle">' + shot.title + '</p></div></div></div>');
});
$('.dribbble-feed').html(html.join(''));
//$( ".ellipsis p" ).addClass( "ellipsis" );
}, {page: 1, per_page: 9});
});
</script>
I also I want to introduce a "load more" button that will load 3 shots at a time.
Any help would be greatly appreciated :)
Cheers
If you use playerShots.shots.slice(0, 2), the loop will go through just the first three "shots."
Documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
As far as loading more, you'll want to save the result from the API response to a variable accessible by your code that shows more "shots."
Below is the following code that works perfectly for dynamic loading of a select drop down. The code is called in the documents ready function to pre-load data into a page. The code works just fine. However, I got puzzled over the fact that it seems "undefined" in the DOM. ie.. .change event etc...when I attempt to select a value....
In the HTML, the is set simply:
<select id="optionsChaa" name="chaa_id" class="largewidth"></select>
The jquery code is as follows. It works. Feel free to use it in your codes
var optionsValues = '<select id="optionsChaa" name="chaa_id" class="largewidth">';
optionsValues += '<option value=""></option>';
$.each(result, function() {
optionsValues += '<option value="' + this.chaa_id.val + '">' + this.chaa_name + '</option>';
});
optionsValues += '</select>';
var options = $('#optionsChaa');
options.replaceWith(optionsValues);
$('#optionsChaa').change(function() {
// Alert returns undefined...
alert($(this).val() );
});
So why is it "undefined" after the DOM?
I think there's something wrong with the this.chaa_id.val part. In each, "this" refers to the "current" element (i.e. a member of the results array).
Could you show what's in your result variable?
I tried your code setting result as:
var result = [
{ 'chaa_id' : { 'val' : 1 }, 'chaa_name' : 'name1'},
{ 'chaa_id' : { 'val' : 2 }, 'chaa_name' : 'name2'}
]
And the alert() seems to work.