Concerning the following site
Pretty simple, but none the less I seem to be falling at the first hurdle on this.
Using the following code currently to try and obtain a track name and artist from the currently active soundcloud player (of which there are 4 ,with the class SCiframe)
$(function () {
var $iframeElement = document.getElementsByClassName('SCiframe');
var $widgets = SC.Widget(iframeElement);
widgets.bind(SC.Widget.Events.READY, function () {
widgets.bind(SC.Widget.Events.PLAY, function () {
// get information about currently playing sound
widgets.getCurrentSound(function (currentSound) {
$('#trackInfo').append('Current Track: ' + currentSound.get('') + '');
});
});
});
});
for one, the console is registering 'iframeElement is not defined' as an inital error.
But all in all, I cant seem to get any useful data out of this to process.
Where am i going wrong here?
Kindest regards to the community.
You have the variable names incorrect, they have "$" at the begining,
$(function () {
var $iframeElement = document.getElementsByClassName('SCiframe');
var $widgets = SC.Widget($iframeElement);
$widgets.bind(SC.Widget.Events.READY, function () {
$widgets.bind(SC.Widget.Events.PLAY, function () {
// get information about currently playing sound
$widgets.getCurrentSound(function (currentSound) {
$('#trackInfo').append('Current Track: ' + currentSound.get('') + '');
});
});
});
});
EDIT:
getElementsByClassName returns an array of results. So if there is only one iframe with "SCiframe" classname, you should pass first index of $iframeElement as paramater in SC.Widget, try this,
$(function () {
var $iframeElement = document.getElementsByClassName('SCiframe');
var $widgets = SC.Widget($iframeElement[0]);
$widgets.bind(SC.Widget.Events.READY, function () {
$widgets.bind(SC.Widget.Events.PLAY, function () {
// get information about currently playing sound
$widgets.getCurrentSound(function (currentSound) {
$('#trackInfo').append('Current Track: ' + currentSound.get('') + '');
});
});
});
});
Related
$(document).ready(function () {
var youTubeUrl = $('.note-video-clip').attr('src');
$('#stop-video').click(function () {
$('.note-video-clip').each(function () {
$(this).attr('src', '');
$('.note-video-clip').attr('src', youTubeUrl);
});
});
});
Im using the above script to solve the issue, however its working only for the first page but not the second page on next function
by using the below code we were able to solve the issue
allNextChapter.click(function () {
var sectionkey = $(this).attr("data-section");
var chapterkey = $(this).attr("data-chapter");
var youTubeUrl = $('.note-video-clip').attr('src');
$("#stop-videoSection" + sectionkey + "Chapter" + chapterkey).find('.note-video-clip').attr('src', '');
$('.note-video-clip').attr('src', youTubeUrl);
});
I'm trying to get the text value of an element <span> but it doesn't return anything with .getText()
`
//spec
var statPage = require('something');
describe('Start', function () {
describe('Setup', function () {
it('test quality', function(){
new statPage().quality();
});
});
});
//page object
Sender.prototype.quality = function () {
browser.ignoreSynchronization = true;
this.verifyPageUrl();
this.verifyTabName();
};
Sender.prototype.verifyTabName = function () {
console.log("inside verifyTabName()");
var EC = protractor.ExpectedConditions;
var tab = element(by.css("span.active-tab-head"));
browser.wait(EC.textToBePresentInElement(tab, 'u4uvpzn4'), 5000).then(function(){
console.log('inside browser wait');
});
tab.getText().then(function(tabFullName) {
console.log('tab name is : ' + tabFullName);
});
};
Sender.prototype.verifyPageUrl = function () {
browser.getCurrentUrl().then(function(text){
console.log('this is the right page : ' + text);
});
};
`
The code you've presented, looks correct and, I suspect, there could be a timing issue. Let's use textToBePresentInElement Expected condition and wait for u4uvpzn4 text to be present inside an active tab:
var EC = protractor.ExpectedConditions;
var tab = element(by.css("span.active-tab-head"));
browser.wait(EC.textToBePresentInElement(tab, 'u4uvpzn4'), 5000);
tab.getText().then(function(tabFullName) {
console.log('tab name is : ' + tabFullName);
});
You can make your code more dynamic by trying:
var tabName = element(by.css('.tab-head.active-tab-head'));
The only other issue I could think of off-hand is that you may not have any tabs set to .active-tab-head, which would return an empty string.
Something weird was happening coz protractor was not even recognizing browser.pause() But, reinstalling protractor fixed the issues!
I'm pretty new to web development, and although I've wrapped my head around javascript im trying to modify some code i grabbed on github written in jquery for my own personal use. Basically right now the code is executed from an input form onsubmit however I'm planning on filling in the form data with php on my server before the code is sent to client to be executed so I would like to modify the code below to run on window.load instead. I've narrowed down what needs to be modified from a couple hundred lines of code to somewhere in the render: function(){ in code block below, but I am unsure on how to exactly do this and pass the input properly to the rest of the functions in the application
var InputView = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'create');
this.template = _.template($('#input_template').html());
},
render: function() {
this.$el.html(this.template({}));
this.$el.find('form').submit(_.bind(function(event) {
window.location = '#' + this.$el.find('input').val();
}, this));
this.$el.find('#create').click(this.create);
this.$el.find('#create').on('click', this.create, this);
return this;
},
basically I just need to know how to properly bind this.$el.find('input').val(); to a php echo
... sorry for the outsourcing but I don't really understand exactly what is going on in all this code, so any help with this would be greatly appreciated
here is the rest of the InputView function just in case it's relevant but i don't think it is
create: function(event) {
if(this.$el.find('#create').hasClass('disabled')) return;
var button = this.$el.find('#create');
button.addClass('disabled');
event.preventDefault();
var product = 'Torque';
var btapp = new Btapp;
btapp.connect({
queries: [['btapp', 'create'], ['btapp', 'browseforfiles']],
product: product,
poll_frequency: 500
});
var status = new Backbone.Model({
btapp: btapp,
product: btapp.get('product'),
status: 'uninitialized'
});
var status = new StatusView({model: status});
$('.toolbox').append(status.render().el);
var browse_ready = function() {
btapp.off('add:bt:browseforfiles', browse_ready);
btapp.trigger('input:waiting_for_file_selection');
btapp.browseforfiles(function(files) {
var files = _.values(files);
if(files.length === 0) {
btapp.trigger('input:no_files_selected');
setTimeout(function() {
btapp.disconnect();
status.destroy();
button.removeClass('disabled');
}, 3000);
return;
}
var create_callback = function(data) {
btapp.disconnect();
btapp.trigger('input:torrent_created');
setTimeout(_.bind(btapp.trigger, btapp, 'input:redirecting'), 1000);
setTimeout(function() {
status.destroy();
window.location = '#' + data;
}, 3000);
}
var torrent_name = create_torrent_filename(files);
console.log('btapp.create(' + torrent_name + ', ' + JSON.stringify(files) + ')');
btapp.create(torrent_name, files, create_callback);
btapp.trigger('input:creating_torrent');
});
};
btapp.on('add:bt:browseforfiles', browse_ready);
btapp.on('all', _.bind(console.log, console));
}
});
so I've basically solved my own long winded question all i was looking for was a change of this line
this.$el.find('form').submit(_.bind(function(event) {
to
this.$el.ready(_.bind(function(event) {
anyways proably etter no one answered as it's started me to actually learn some jquery syntax something I've been putting of for to long now :)
I am working with the Soundcloud API. A user searches a song or band name and my page returns an output of all the album art associated with each track. I have insert a "play" button for each track; however, the play link (var named "linky") only seems to take on the LAST called track on the page. So EVERY "play" link will only play the last track on the page. How do I make it so that each "play" link will link to its appropriate track?
SC.initialize({
client_id: 'xxxxeditedforprivacyxxxx'
});
function doSearch() {
var searchTerm = document.getElementById('search').value;
// Search soundcloud for artists
SC.get('/tracks', { q: searchTerm}, function(tracks) {
for(track in tracks) {
var img = document.createElement('img');
img.setAttribute("src", (tracks[track]["artwork_url"]));
var title = tracks[track].title.replace("'", "\\\'").replace("\"", "\\\"");
var song = document.createElement('div');
linky = tracks[track].permalink_url;
img.setAttribute("onclick", "showTrackInfo('" + title + "\\n" + "\\n" + tracks[track].label_name + "\\n\\n" + "(click to close)" + "')");
if (tracks[track]["artwork_url"] == null) {
console.log(""); }
else {
var Catalog = document.getElementById('catalog');
Catalog.appendChild(img);
$('div#catalog').append('<img src="http://i.imgur.com/rGdvfl7.png" id="play">');
console.log(linky);
$('img#play').click(function() {
$.get(
'http://soundcloud.com/oembed?' +
'url=' + linky +
'&format=json&maxheight=296'
)
.done(function (response) {
song.innerHTML = response.html;
document.getElementById("soundiframe").appendChild(song);
});
});
}
}
});
};
My console.log(linky); is showing the appropriate, different URLs for each track. But the play button only wants to play the last track that's pulled. Where am I going wrong? Any help appreciated!
It is because of the closure value linky. Since linky is a closure value it will have the last assigned value.
The same problem exists for the variable songs also, since it is used only within the ajax success callback you can move the creation of the element to the callback
You have mix raw dom manipulation which is not recommended if you are using jquery. I've tried to rewrite the code to use jQuery by removing raw dom manipulation.
Also you were creating some dom elements like img and Catelog which were never added to the dom so I've removed it
SC.initialize({
client_id: 'xxxxeditedforprivacyxxxx'
});
$(function(){
$('#catalog').on('click', '.play', function(){
$.get(
'http://soundcloud.com/oembed',{
format:'json',
maxheight:'296',
url:$(this).data('linky')
}
).done(function (response) {
$("#soundiframe").append('<div>' + response.html + '</div>');
});
})
})
function doSearch() {
var searchTerm = document.getElementById('search').value;
// Search soundcloud for artists
SC.get('/tracks', { q: searchTerm}, function(tracks) {
$.each(tracks, function(key, track){
if (track.artwork_url) {
$('#catalog').append('<img src="http://i.imgur.com/rGdvfl7.png" class="play" data-linky="' + track.permalink_url + '" />');
}
})
});
};
The following code works flawlessly if I uncomment the "alert"s. This is what I've figured out for doing a set of cascading dropdowns where the user selects Country, then State, then City.
With the alerts uncommented, it's like the values haven't gotten updated yet. I've tried a lot of stuff, but I've had no luck. I'm sure I'm doing something stupid. Any help is greatly appreciated.
Thanks!
$(document).ready(function () {
$("#Country").change(function () {
$("#City").html("");
var id = $("#Country").val();
getStates(id);
// alert("CountryId = " + id);
var stateId = $("#State").val();
// alert("stateId = " + stateId);
var stateId = $("#State").val();
alert("stateId = " + stateId);
$(document).ready(function() {
getCities(stateId);
});
});
$("#State").change(function(){
var id = $("#State").val();
id = (id==null)?1:id;
getCities(id);
});
});
If function getStates is asynchronous request to the server then you have to add success callback to it. If not it is weird.
btw. $(document).ready inside document ready doesn't make any sense.
Your code does not make much sense
Perhaps this is what you mean
$(document).ready(function () {
$("#Country").change(function () {
var id = $(this).val();
getStates(id);
});
$("#State").change(function () {
var id = $(this).val();
getCities(id);
});
});