I'm basically pulling info from itunes rss feeds to show the top songs based on which country is selected from the select element.
I was trying to replace the value from the option selected and insert it into the rss url to get that countrys top songs.The data pulls up fine however im
notable to choose any other options. japan is the only one that shows unless i change which option is first. How do i get the options to change the data shown?
// selects value for chosen country
var country;
//its selecting the value however its not refreshing.
country = $("#country :selected").text();
$.get('https://itunes.apple.com/' + country + '/rss/topsongs/limit=3/xml', function(data) {
var songArray = $(data).find('entry');
songArray.each(function() {
var title = $(this).find("title").text(); //grab song title
var artist = $(this).find("im\\:artist, artist").text(); //grab artist name
var album = $(this).find("im\\:name,name").text(); //grab album name
var image = $(this).find("im\\:image,image").eq(2).text(); //grab image link
var audioLink = $(this).find("link").eq(1).attr("href"); //grab music file
var audioDiv = $("source").attr("src", "audioLink"); //adds audio to source div
audioLink = '"' + audioLink + '"'
// youtube api to provide link to video based on the top songs populated
// Set the search term
var searchTerm = title;
var link;
var url = "https://www.googleapis.com/youtube/v3/search?q=" + searchTerm + "&part=snippet&maxResults=1&key=AIzaSyBvccDrp39n-InLrjDvv4PH_vfNbN0J_iE";
$.getJSON(url, function(data) {
var id = data.items[0].id.videoId;
link = "https://www.youtube.com/watch?v=" + id;
$("#song").append(
" <br><br>Song :" + title + "<br> Artist :" + artist + " <br>album: " + album + "<br>" + "<img src=" + image + "> " + "" + link + " <br>" + audioLink
);
});
}, "xml");
});
<select name="country" id="country">
<!-- <option>select song</option> -->
<option value="japan">jp</option>
<option value="spain">es</option>
<option value="france">fr</option>
</select>
<input type="button" id="button" value="get songs">
You need to get value or text of selected option
var country;
//its selecting the value however its not refreshing.
country= $("#country option:selected").text();
Or if you want value you can do this
country= $("#country").val();
You can use on change event
<select name="country" id="country">
<!-- <option>select song</option> -->
<option value="japan">jp</option>
<option value="spain">es</option>
<option value="france">fr</option>
</select>
$('#country').on('change', function() {
alert( this.value );
$.get('https://itunes.apple.com/' + this.value + '/rss/topsongs/limit=3/xml'
})
You will need to watch for the change event
$( "#country" ).change(function() {
country= $("#country").val();
$.get(....
});
Related
I have this html select tag:
<select name="title_'+ field +'" class="form-control form_select_tag">
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
</select>
Now, I want to get the value from this select tag and set the value to a variable called tag. for that I am using the below code:
var label = $(this).find('.form_input_label').val();
var name = $(this).find('.form_input_name').val();
if ( data_type === 'title' ) {
var placeholder = $(this).find('.form_input_placeholder').val();
var tag = 'h3';
$('.form_select_tag').change(function() {
tag = $(this).val();
});
html += '<' + tag + '>' + label + '</' + tag + '>';
}
now, in this line: html += '<' + tag + '>' + label + '</' + tag + '>'; variable tag value is not set :(
How can I do this?
you can call $('.form_select_tag').val(); directly instead $(this).val();
and next problem is
$('.form_select_tag').change(function() {...});
Is set command not get if you want to do that you need set var tag as global
var tag will not be re-declare every functions call
That is what you need right?
createResult();
$('.form_select_tag , .form_input_label').on('change input', function() {
createResult();
});
function createResult() {
var html = '<br>Result:<br>'; //your code here
var data_type = 'title'; //your code here
var label = $('.form_input_label').val();
var name = $('.form_input_name').val();
if (data_type === 'title') {
var placeholder = $('.form_input_placeholder').val();
var tag = 'h3'
tag = $('.form_select_tag').val();
html += '<' + tag + '>' + label + '</' + tag + '>';
}
$('.label').html(html);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="title_'+ field +'" class="form-control form_select_tag">
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
</select>
<input type="text" class="form_input_label" value="label">
<label class="label">Male</label>
The current code, which will retrieve one selected option(there are 2 selected).
<select class="filter-selectpicker" multiple="multiple">
<option data-path="all?page=1&type=3,4,6" selected>Type 6</a>
<option data-path="all?page=1&type=3,4,7" selected>Type 7</a>
<option data-path="all?page=1&type=3,4,8">Type 8</a>
</select>
$('.filter-selectpicker').on('change', function(){
var location = $('.filter-selectpicker option:selected').data('path');
window.location.replace(location);
});
How can I access the specific <option> that the user clicked on and get the path attribute? Right now it will just find the first selected option.
My Goal is to redirect the user to a new URL when he clicks on <option>.
The selected is being added with PHP(checking the $_GET, if it's in the array -> echo selected to the <option>).
I'm using bootstrap-select, [https://silviomoreto.github.io/bootstrap-select/][1]
Hope I am clear. Thanks in advance!
--------Update--------
Instead of using echo "Selected" what I did is is data-icon="' . $path["selected"] . '" (if it's in the $_GET it will return icon code, in my case: glyphicon-ok).
Now, the issue is that the icon will be placed on the left side of the text, the solution is to edit the bootstrap-select.js
First add a class(myNewClass in this case):
icon = typeof $this.data('icon') !== 'undefined' ? '<span class="' + that.options.iconBase + ' ' + $this.data('icon') + ' myNewClass"></span> ' : '',
Next, change the order the text output:
This: text = icon + '<span class="text">' + text + subtext + '</span>';
To: text = '<span class="text">' + text + subtext + '</span>'+ icon;
And don't forget the CSS of your new class:
.myNewClass {
padding-left: 10px;
}
with multiple selections, you will want to loop each option selected
$('.filter-selectpicker').on('change', function(){
$(this).find("option:selected").each(function(){
var location = $(this).attr('path');
window.location.replace(location);
});
});
so below is my snippet. What I want is to create a select dropdown option base from the data attribute (data-select-text and data-select-values) of the currently clicked button, so below is a working snippet except for getting the data-select-values which is the problem because i dont know how to loop it along with the data-select-text so that the result of each select option will have values and text base from the split values of the data-select-text and data-select-values attribute, any ideas, help, suggestions, recommendations?
NOTE: currently, I could only able to use the attribute data-select-text as a select options values and text.
$(document).ready(function(){
$(document).on("click", "button", function(){
if($(this).attr("data-input-type").toLowerCase() === "select"){
var classList = $(this).attr('data-select-text').split(/\s+/);
var field = '<select>';
$.each(classList, function(index, item) {
field += '<option value="' + item.replace(/%/g, ' ') + '">' + item.replace(/%/g, ' ') + '</option>';
});
field += '</select>';
}
$("body").append(field);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-input-type="select" data-select-text="select%1 select%2 select%3" data-select-values="1 2 3">Create a select dropdown option</button>
You could create an array for the values, the same as so did for the text.
Make sure that the order in both data-select-text and data-select-values is the same. Then you can use the index in your $.each loop:
$(document).ready(function(){
$(document).on("click", "button", function(){
var elem = $(this);
if( elem.attr("data-input-type").toLowerCase() === "select" ){
var classList = elem.data('select-text').split(/\s+/),
valueList = elem.data('select-values').split(/\s+/),
field = '<select>';
$.each(classList, function(index, item) {
field += '<option value="' + valueList[index].replace(/%/g, ' ') + '">' + item.replace(/%/g, ' ') + '</option>';
});
field += '</select>';
}
$("body").append(field);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-input-type="select" data-select-text="select%1 select%2 select%3" data-select-values="1 2 3">Create a select dropdown option</button>
The result will be:
<select>
<option value="1">select 1</option>
<option value="2">select 2</option>
<option value="3">select 3</option>
</select>
Here is one way to do it, if I understand correctly. This code does not take into account different text or value lengths. It expects that the text length of options created is always equal to the values length being used.
$(document).ready(function () {
$(document).on("click", "button", function () {
if ($(this).attr("data-input-type").toLowerCase() === "select") {
var classList = $(this).attr('data-select-text').split(/\s+/);
var valueList = $(this).attr('data-select-values').split(' ');
var field = '<select>';
$.each(classList, function (index, item) {
field += '<option value="' + valueList[index] + '">' + item.replace(/%/g, ' ') + '</option>';
});
field += '</select>';
}
$("body").append(field);
})
});
Fiddle: http://jsfiddle.net/32qt0vn8/
Situation: Using a Rails app, and $http.get in AngularJS to PULL the photos from Edmunds.com MEDIA API.
TASK TRYING TO COMPLETE: ng-repeat through the vehicle photos.
CONDITIONS: I am getting the response successfully and able to load one image, but how can I have it repeat through the photos array and do all the images.
Apologies for unclear explanation, and any help appreciated.
index.html:
<h1> Wheel Tire Family </h1>
<!-- CAR IMAGES -->
<div ng-init="carImages">
<img src="https://media.ed.edmunds-media.com/{{carImages}}">
</div>
catalog_controller.js:
$scope.photos = {};
$scope.carImages = {};
//GET the edmunds media api for the
//Make Model Year photos
$http.get("https://api.edmunds.com/api/media/v2/audi/a3/2015/photos?title=&category=exterior&provider=oem&width=1280&shottype=S&pagenum=1&pagesize=10&view=basic&api_key=api_key&fmt=json")
.success(function (data) {
var photos = data;
console.log(photos);
$scope.carImages = photos.photos[0].sources[0].link.href;
console.log($scope.carImages);
});
Maybe something like this?
angular
.success(function (data) {
$scope.carImages = data.photos;
});
html
<div ng-repeat="carImage in carImages">
<img ng-src="https://media.ed.edmunds-media.com/{{carImage.sources[0].link.href}}">
</div>
This should loop through the images and pick the first "source" link. It is also recommended that you use ng-src instead of src.
I have some helpful code for you in Jquery, may be this could help in working out with angular js.
To get all Vehicle Details (New, Used, Future) using Jquery , Use the below code.
<!--Form Details to display year/make/model in dropdown -->
<form method="POST" action="one123.php">
<select id="ajYears" name="ajYears">
</select>
<select id="ajMakes" name="makes" disabled="disabled">
<option>Select Make</option>
</select>
<select id="ajModels" name="models" disabled="disabled">
<option>Select Model</option>
</select>
<select id="ajStyles" name="styles" disabled="disabled">
<option>Select Trim</option>
</select>
<input type="submit" value="submit">
</form>
<!--Script to fetch details from API-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery.noConflict();
</script>
<!-- js code -->
<script>
var protoCall = "https://";
var host = "api.edmunds.com";
// Make sure to change the API KEY
var apiKey = "API KEY";
var fmt = "json";
var standardParams = "&fmt=" + fmt + "&api_key=" + apiKey + "&callback=?";
var $yearSelect = jQuery('#ajYears');
var $makeSelect = jQuery('#ajMakes');
var $modelSelect = jQuery('#ajModels');
var $styleSelect = jQuery('#ajStyles');
// lets bind some events on document.ready.
jQuery(function(){
$yearSelect.on('change', function() { getMakeModelsByYear()});
$makeSelect.on('change', function() { enableModelDropdown() });
$modelSelect.on('change', function() { getStyles() });
// lets build the year drop down.
ajEdmundsBuildYear();
});
// method to build the year drop down.
function ajEdmundsBuildYear()
{
var baseYear = 1990,
endYear = new Date().getFullYear();
$yearSelect.empty();
$yearSelect.append('<option value="-1">Select Year</option>');
for(var yyyy=baseYear; yyyy<=endYear; yyyy++)
{
$yearSelect.append('<option value="' + yyyy + '">' + yyyy +'</option>');
}
}
// get the makes and models for a year in one go...
function getMakeModelsByYear()
{
var year = $yearSelect.val(),
endPoint = "/api/vehicle/v2/makes",
view = "basic",
options = "year=" + year + "&view=" + view + standardParams,
postURL = protoCall + host + endPoint + "?" + options;
jQuery.getJSON(postURL,
function(data) {
// clear the make drop down... re add the first option... remove dsiabled attr.
$makeSelect.empty();
$makeSelect.append('<option value="-1">Select Make</option>');
$makeSelect.removeAttr('disabled');
$modelSelect.empty();
$modelSelect.append('<option value="-1">Select Model</option>');
// loop the makes... each make contains model... add the make in make drop down and models in model dd
jQuery.each(data.makes, function(i, val) {
make = data.makes[i];
$makeSelect.append('<option value="' + make.niceName + '">' + make.name + '</option>');
jQuery.each(make.models, function(x, val){
model = make.models[x];
$modelSelect.append('<option make="' + make.niceName +'" value="' + model.niceName + '">' + model.name + '</option>');
});
});
});
}
// since we already grabed the models...
// now just matter of showing only the matching models for a make.
function enableModelDropdown()
{
var make = $makeSelect.val();
$modelSelect.removeAttr('disabled');
$modelSelect.find('option').not('[value="-1"]').hide();
$modelSelect.find('option[make=' + make + ']').show();
}
// grab the styles... pretty much same as
// getMakeModelsByYear()
function getStyles()
{
var year = $yearSelect.val(),
make = $makeSelect.val(),
model = $modelSelect.val(),
endPoint = "/api/vehicle/v2/" + make + "/" + model + "/" + year + "/styles",
view = "basic",
options = "view=" + view + standardParams,
postURL = protoCall + host + endPoint + "?" + options;
jQuery.getJSON(postURL,
function(data) {
$styleSelect.empty();
$styleSelect.removeAttr('disabled');
$styleSelect.append('<option value="-1">Select Style</option>');
jQuery.each(data.styles, function(i, val) {
style = data.styles[i];
$styleSelect.append("<option value='" + style.id + "'>" + style.name + "</option>");
});
});
}
Say I have a ListBox populated with a name value pair SelectList(myUsers, "Key", "Value"):
#Html.ListBox("ListReviewers", (SelectList)ViewBag.ListOFReviewers, new { style = "width:120px;" })
I want to double click an option in this ListBox, and place it in a SelectionList like below:
<div class="selectedEmployees">
<select class="selectionList" multiple="multiple" name="AssignedReviewer" style="width:120px;">
<!--x.UserID, x.FirstName + " " + x.LastName) -->
<option value=""></option>
</select>
</div>
Once this collection is placed in the above, I want to store all the values in another SelectionList Collection for later use.
Here is the start of my jQuery code:
<script type="text/javascript">
$('#ListReviewers').dblclick(function (i, selected) {
//double click on this value of listbox of type SelectList(myUsers, "Key", "Value")
//store this value and text
var value = $(this).val;
//var empName = $(this).data[0];
var empName = $(selected).text();
alert(empName);
//append an option element <option value=""></option>
$('.selectionList').append('<option id="' + value + '">' + empName + '</option>');
});
I can get the value of the dblclicked collection object, but not the text of the collection object. Is there a better way to do this?
Try attaching your event to the option within the select itself. You can then use this to access it's properties.
$('#ListReviewers option').dblclick(function () {
var value = $(this).val();
var empName = $(this).text();
$('.selectionList').append('<option id="' + value + '">' + empName + '</option>');
});
Alternatively, you can use clone() and append() to move the option from one select to the other. This will save you having to worry about duplicate options being appended.
$('#ListReviewers option').dblclick(function () {
var $newOptions = $(this).clone(false);
$(this).remove();
$('.selectionList').append($newOption);
});