jQuery Forum

I'm trying to rebind a button that was previously unbound with the one() method, like this:

I need to delete all substrings ending with a $ symbol within a semi-colon delimited string. Sample string may look like this (spaces between semi-colon delimiters only for code clarity). Substrings are of variable lengths:

1. dgtrs534u$hi874hbf45 ; kk4746hghf ; 86dgdhdt65jdbsgdb254sf $277dhcbh74 ; re6hdgf554

Final string should look like this: hi874hbf45 ; kk4746hghf ; 277dhcbh74 ; re6hdgf554 (these values are always same length each)

I'll use code below. It's the "replace" method I can't figure out. If I split the string and use something like:
var split = splittedString.slice(-10).join(' ; ');  I get "join is not a function". Is there a way to simply delete substrings left of all $ (including $ ) down to preceding delimiters without splitting?

1. var string = $ ("#string" ).text();
2. var finalString = string.replace( substrings left of all $ (including $) down to preceding delimiters  ,"");
3. $("#string").text(finalString);

Thx for pointers. dan

Migrating from Youtube API v2 to v3 is a genuine pain in the ass! In v3 there is more code to write in order to filter what you need to get. The worst of the bunch is attempting to access all videos that exist in a Youtube channel. Youtube API v3 recycles the code term "Playlist" to mean Playlist content AND Channel content, that itself is needlessly confusing, unlike v2 where everything coded was clearcut and intelligent. Anyhow,

I couldn't find practical sample on how to get the data needed to access uploaded Youtube channel content. I am trying this based on very broad application but hitting a wall somehow.

First yor're supposed to get the "playlist" ID of the channel ID...

1. function GetPlaylistID() {
2. gapi.client.setApiKey('Your-API-Key');
3. gapi.client.load('youtube', 'v3', function(){
4. var SelMenuOption = $("#Select-menu option:selected").val();
5. var requestOptions = {
6. mine: false, // False for public access?, no authorization needed.
7. id: SelMenuOption,
8. part: 'contentDetails'
9. };
10. request.execute(function(response) {
11. var playlistId = response.result.channels[0].contentDetails.uploads;
    $('#SavedID').val(playlistId);
12. });
13. GetUploadedVideos();
14. });
15. }

..then you get the channel video uploads from the saved "playlist" ID mentioned above...

1. function GetUploadedVideos() {
2. gapi.client.setApiKey('Your-API-key');
3. gapi.client.load('youtube', 'v3', function(){
4. var savedID = $('#SavedID').val();
5. var request = gapi.client.youtube.playlistItems.list({
6. playlistId: savedID,
7. part: 'snippet'
8. });
9.    
10. request.execute(function(response) {
11.   // Go through result.playlistItems to view list of uploaded videos?
12.  
13. for(var i=0;i<response.items.length;i++) {
14. var rvideoID = response.playlistItems[i].id.videoId; // or snippet.videoId
15. var rchannelID = response.playlistItems[i].snippet.channelId;
16. var rchannelTitle = response.playlistItems[i].snippet.channelTitle
17. var rTitle = response.playlistItems[i].snippet.title;
18. var rDescription = response.playlistItemss[i].snippet.description;
19. var rthumbnail = response.playlistItems[i].snippet.thumbnails.medium.url;
20.  
    
21. var ytresults = 'HTML ..."
22. $('#printResult').append(ytresults);
    
23. });
24. )

These are the errors I get:

TypeError: response.result.channels is undefined (line 11 of GetPlaylistID)
TypeError: response.items is undefined (line 13 of GetUploadedVideos())

Any better solutions? Why so darn complicated??

dan

Hidden #main-input contains a string of comma-separated values. I need to find all same class divs that each contain same unique text and replace that text with the relevant comma-delimited substrings stored in #main-input, like so:

1- Find the first .container div that only contains the text "findme";
2- Replace "findme" with the first comma-delimited substring of hidden #main-input;
3- Find the second .container div that only contains the text "findme";
4- Replace "findme" with the second comma-delimited substring of hidden #main-input;
... continue to last .container div.

The code snippet below demonstrates how thing would work. Those .container divs are dynamically appended with their parent li to parentUL via ajax call which terminates like so:...

1. . . .
   
2. $.when.apply(null,defArray).done(function(){
3. $('#parentUL').append('<li><div class="container">findme</div></li>');
4. });
   

... which resulting sample html would look like this:

1. <#parentUL>
2. <li><div class="container">hiThere</div></li>
3. <li><div class="container">63AB</div></li> // First findme replaced by 63AB
   
4. <li><div class="container">Whatever</div></li>
5. <li><div class="container">Ha72</div></li> // Second findme replaced by Ha72
6. <li><div class="container">7kK3</div></li> // Third findme replaced by 7kK3
7. <li><div class="container">NevaMind</div></li>
8.  . . .</ul>
9. <input type="hidden" id="main-input" /> // C.S.V.= 63AB,Ha72,7kK3

Doesn't matter whether the code would interact during each append or after all append is done, I just don't know what efficient code would do the job in a jiffy. Any help is greatly appreciated. ~ dan

Using the Youtube API 2 for embedded iframe, and after dynamically building a list of videos from a playlist feed which is rid of private or deleted videos, I aim to retrieve the duration of each fetched video through jsonc, kinda like so:

1. // Code to first display playlist feed and remove private or deleted videos (if any) not included here.
   
2.  . . .
   
3. var vid = Array();
4. $(".list:visible").find('.videoID').each(function(data){
5. vid[data] = $(this).text();
6. var video = '//gdata.youtube.com/feeds/api/videos/' + vid + '?v=2&alt=jsonc';
7. $.getJSON(video, function(data,status,xhr) {
8. console.log(data.data.duration);
9. // Here would be code to append transformed duration (hours:mins:secs) of each video (thumbnail) into their span containers.
   
10. });
11. });

Is the above legit? I guess I have to do it this way since beforehand in some feeds there are private and deleted videos that must be deleted from the list, so I fetch all videos in the playlist feed, then immediately remove all videos components whose title equals Private video or Deleted Video, then iterate the code above throughout remaining video IDs. I do it this way because the code breaks if it encounters a private or deleted video element thats exists within the list (no data.data.duration to return?).

Problem is, the above code doesn't loop through all dynamically set .videoID. Console.log only prints the duration of first .videoID displayed. I also tried setTimeout in order to wait a few to make sure the playlist feed had completely displayed and that didn't help either.

Is there a better and more efficient way to do the above? Am kinda newbie to all this ajax jsonc thingy, any pointers leading to an efficient solution would be mighty helpful! ~ dan

I need each fixed childTEXTBOX to display the index number of their parent li once a button is clicked. I currently only get the first child count which displays in all child text boxes of li belonging to parentUL :

1. $("#Button").on('click', function() {
2. var index = $('.parentUL > li').index() +1;
3. $('.parentUL [id^=childTEXTBOX]').val('Group ' +index);
4. });
   

Any pointers will help. ~ dan

Dave resolved for me on an earlier posting (jQuery 1.10 | Match counter div class with element id to get length of element id children) a counter solution for one parent group which needed independant counting of div children lengths. I would need the same counting solution (if possible) for ten parent groups. Those ten parent groups will contain the same parent-children div classes and id, but only one group will be visible at any given time, so the hidden groups shouldn't affect the visible group div count, right?

It appears in my current modified setup, there is a counter conflict, meaning whatever children divs have been counted in the first visible parent group, whenever I hide that parent group and make visible another parent group, the counter keeps in memory what has previously been counted and displays the previous count in the new visible parent group at the same children counter divs location of the first parent group.

I tried counter empty(), html(''), even made certain that no id or no class be the same in all div children counters, but to no avail. It's like jQuery or the browser keeps in memory what has been counted first and displays that count in any other counter when a count is requested. I even tried emptying the DOM cache for the counter but no go. Below is sample code on what is going on:

1. <div id ="GROUP-A" class="AllGroups"> // First* visible parent group counted, but now hidden.
2. <div class="VCLA"> 3 </div> // Counter results are accurate.
3. <ol id="VCLA" class="list">
4. <li>SOME STUFF</li> // dynamically appended
5. <li>SOME STUFF</li> // dynamically appended
6. <li>SOME STUFF</li> // dynamically appended
7. </ol>
8. <div class="VCLB"> 2 </div> // Counter results are accurate.
9. <ol id="VCLB" class="list">
10. <li>SOME STUFF</li> // dynamically appended
11. <li>SOME STUFF</li> // dynamically appended
12. </ol>
13. </div>
14. <div id ="GROUP-B" class="AllGroups"> // Visible Parent group counted, with errors.
15. <div class="VCLA"> 3 </div> // ERROR: Counter results should be 6, not 3 as in previous.
16. <ol id="VCLA" class="list">
17. <li>SOME STUFF</li> // dynamically appended
18. <li>SOME STUFF</li> // dynamically appended
19. <li>SOME STUFF</li> // dynamically appended
20. <li>SOME STUFF</li> // dynamically appended
21. <li>SOME STUFF</li> // dynamically appended
22. <li>SOME STUFF</li> // dynamically appended
23. </ol>
24. <div class="VCLB"> 2 </div> // ERROR: Counter results should be 4, not 2 as in previous.
25. <ol id="VCLB" class="list">
26. <li>SOME STUFF</li> // dynamically appended
    
27. <li>SOME STUFF</li> // dynamically appended
    
28. <li>SOME STUFF</li> // dynamically appended
29. <li>SOME STUFF</li> // dynamically appended
30. </ol>
31. </div>

*First means the first group made visible after dom ready, not first as in index position of group.

Any working adaptation to the following code recently updated by Dave would be awesome:

1. $("div[class^=VCL]").each(function(){
2.       var theList = $("#" + $(this).attr("class"));
3.       $(this).html(theList.children().length);
4. });

Thx for helpers ~ dan

Can I use indexOf to match my counter div with a list id in order to display li length?
Do I have to match them in order to do so? The counter should count dynamically appended li. Is there a better way to do this? I use each method because there are twelve div counters that must only count their related ordered lists, so there are twelve ordered lists that have their own id and each related counter has a class that matches those id.

I use this so far, but nothing happens yet, could be incorrect too  ;-(

1. $("div[class^=VCL]").each(function(){
2. var lvcnt = $(this);
3. var lists = $('.list');
4. if (lvcnt.attr('class').indexOf(lists.attr('id')) !== -1) {
5. lvcnt.text(lists.children().length);
6. }
7. });

Any help to achieve a working result would make my day! ~ dan

UPDATE: Count works but display is only on first counter, whenever I add li to count on other counters, the sum count displays in first counter only ;-(

I need to append elements to a visible child div. There are other hidden children within the parent div that have different classes starting with same prefixes. Code doesn't seem to work:

1. $('.parent > [class^="ABC"]').append('some-elements'); // Obviously appends to all same prefix classes
2. $('.parent > [class^="ABC"]:visible').append('some-elements'); // Appends to parent only
3. $('.parent > div:visible').append('some-elements'); // Appends to parent only

Child divs have layout. Only one child div is visible at any given time. How to target the visible child div in order to append elements into it?

Here's the scenario: I have a string of comma-delimited Youtube video IDs handled by a function which displays results as clickable video image thumbnails. Problem is, if that string contains an ID that does not exist anymore (or is inaccessible), the function breaks instead of skipping (or importing) the missing video image thumbnail. Is there a jQuery/Javascript solution that, upon button click, a function imports thumbnails of all existing and deleted videos requested by the ID string ? I don't mind displaying the thumbnails of the deleted videos, where possible, in fact, that would be best as the thumbnail count would be the same as original request. I'm using Ajax/get/jsonp and I dunno if error handling can tackle this issue. This is the last major hurdle of my project which I must overcome before my hair gets all pulled out LOL! Help anybody?

Is it a current fact that using the Youtube iframe embedded player means having to reload the player when dynamically swapping video content? Should I understand that I can only use the swf object embed in order to dynamically change the video src with the javascript API? I use the Youtube iframe API for iPad users (for HTML5 video) and everytime I dynamically load a video by it's ID the whole player has to reload before loading the video. That's alot of wasted time between video loads. Is there a way to keep the dynamically set player from reloading when dynamically swapping videos through ajax jsonp function callback? Also, I can't seem to find a sample function thats uses queued videos for dynamic loading... . ;-(

Is there a way to combine both HTML5 native Drag & Drop and image file append (local) for FileReader / Canvas manipulation? Basically I want to either:

1. Drag (native drag & drop) an image thumbnail (PNG Base64) located in a source div and drop it in a destination div where upon the dropevent FileReader and Canvas do their stuff, or:
   
   
2. Append the same image thumbnail located in the same source div into the same destination div where upon an append or load event FileReader and Canvas do the same stuff.
   
   

But not so easy as I thought in my scenario, I have a variable which is basically the video ID of a Youtube link that I extract from a url once clicked, which, if matching a substring (video ID) of a comma-delimited string of video IDs found in a input text box, should trigger an event., like so:

1. var videoID =$("#videoIDholder").val(); // <-- the stored link video ID
   
2. var str = $("input[name=StringOfVideoIDs]").val().split(',');
3. if ($.inArray(videoID, str) !== -1) {
4. alert('match!');
5. } else {
6. alert('no match!');
7. };

Problem is, with the above code, the console (Firebug) reflects what's in videoID or str but alerts don't show if there's a genuine match or not, i.e., the above code triggers the match alert when the text box contains any video ID, and when the text box is empty the "no match!" alert gets triggered. I don't have to know the location of the matching comma-delimited ID located in the text box, just if there's a comma-delimited ID that is a duplicate (or not a duplicate) of the ID extracted from the video link. I don't mind using indexOf.

The closest I got was with this which works with one hard-coded ID:

1. var str = $("input[name=StringOfVideoIDs]").val();
2. var n=str.match(/GHFDr254gs7/g);
3. alert(n);

However, the above video ID in bold must be replaced by a variable, like this:

1. var videoID =$("#videoIDholder").val();
2. var str = $("input[name=StringOfVideoIDs]").val();
3. var n=str.match(/videoID/g);  // <--- Is this possible?
4. alert(n);

I read that in this scenario, you would have to use .match(new RegExp( ... , but this is new for me.

Matching a variable in a dynamic environment is what I need, any hints??

The following code works for user-click event on dynamically inserted class-based checkboxes:

1. $('.aenable, .benable').live('change', function() {
2. var chkbxchkd = $('.aenable:checkbox:checked, .benable:checkbox:checked').length; 
3. $('.counter').html('( ' + chkbxchkd + ' selected )');
4. });

The problem is when I click on a button that toggles on and off the checked states of the class-based dynamically inserted checkboxes, the counter doesn't reflect the actual number of checked checkboxes. Basically, I need a live counter that constantly detects (and counts) user-clicked and dynamically checked or unchecked dynamically inserted class-based checkboxes. Any hint? - dan

A file input element selects a base64 png from desktop and a decoded text string appears in an adjacent text input element for further jQuery processing. However, when I drag and drop the same base64 png onto the file input element, the decoded text string appears in the adjacent text input element but is not subsequently processed by jQuery. It's like everything stops after line 2 of code:

1. $('#file_input').on('change', function() {
2. handleFiles(this.files); // Base64 decoder which inserts text string in #result
3. var array = $("#result").val().split(",");
4. $.each(array,function(i){
5. ... function processing ...

The above code is enclosed in document.ready, I tried many variations of the above, even tried Find (text input element), but to no avail. Is there a way to simulate a change event for dynamically inserted text input values? Help?

My multimedia app allows appending in a div the ol listing of clickable thumbnails, titles and durations of youtube videos for future replay. I was wondering how to save the ol element (with all the contents of li child elements) for future retrieval on a click of a button? Would the following cookie function work? https://github.com/carhartl/jquery-cookie/blob/master/README.md . I've read that cookies are not the way to go for this type of data, is that accurate? Basically, in my app, a button would export the div contents to the client's computer (perhaps as a playlist?) and another button would import that playlist back into my app.

Maybe a jQuery form or plugin would be in order here, any pointers? Thx for guiding me. - dan

My app retrieves thumbnail, title and duration from searched videos or via preset links, but how do I go about in fetching the same info after import of a video provided in the related youtube videos that appear after a youtube video has ended? Basically, when a clicked related youtube video appears in Tubeplayer (which I use as player), how to get thumbnail, title, duration and vid ID of that video? Thx for pointers or sample code. - dan

Edited: Added ID in title and question.

Is there a way to get the li number and title (after clicking on the li) of an ordered list that is set dynamically via ajax or jason? I use this as example for displaying the li in the hard-coded ol:

1. $("#List ol").append('<li><p>' + '<img src="'+thumbnail+'"'/><br />' + '<span class="title">'+imageTitle+'</span></p></li>');

A function dynamically fetches (after selecting an option from a pulldown menu) the thumbnails (fixed amount of 25 thumbs) and displays them (with their titles) in the ol div. The ordered list starts with the numbered li followed by the thumbnail image and the title below it. I managed to trim, splice, and join the title part but that's based on a variable which fetches the Youtube video title, like so:

1. var videoTitle = data.feed.entry[x].title.$t;
2. var trimTitle = $.trim(videoTitle).substring(0, 70).split(" ").slice(0, 12).join(" ");

How can I get the selected li number (without the thumbnail) and corresponding title (trim-spliced like above) so they can display in a div? - dan

Stuck here with sorta dilemma, I use this code to allow display of images in div via mouseover of select menu option:

1. $("#selectMenu").on("mouseover change", function() {
2.     oScroll2.tinyscrollbar_update($(this).val());
3. return false;
4. });

Line 2 of code scrolls the appended images contained in horizontal ul li to an anchor (Tiny Scrollbar figures that out) set by value of select option.

There are currently 11 anchors for 11 images, but this will grow. Anchor 1 is option value="1" (for first image); anchor 2 is option value="612" (for second image); anchor 3 is option value="1224" (for third image), etc. Those values are the pixel traveling distances (right to left) between left margin of div container and left margin of selected image (for scrolling - images are 612px wide).

EDIT: My prob is the following: When I mouseover any option in the select menu, it is the previous item (image) in the list that appears, regardless of direction. When I click on the option, however, everything works as it should. the correct image appears. Looks like something silly I dunno of... . What gives? - dan

UPDATE - Ok, here's the scoop, I tried "hover", "mouseover", "mouseenter, "select", and all of them trigger option item once you lose focus of option item with mouse (move onto the next item). Has this always been an issue with select menus? "Thud" !! Guess I need a function that supercedes this? Note: ".change() - event is deferred until the element loses focus."- jQuery API. Yup, I do need a function!

I am trying to trigger a link that has same rel or name value of selected option value of a pulldown menu, is the following code capable of doing thist?

1.     var s = $("this option:selected").val();
2.     $("a.track[rel='s']").trigger("click");

Basically you select an item from the pulldown menu and a matching link gets clicked. Scratching my head on this one (still learning). If above code is flawed, can you suggest some code that achieves what I need?
Thanks in advance. - dan

UPDATE: I got this function but it's not triggering the matching link. I gather I may have to find each link before any of them can be targeted?
Maybe reversing the order of this jsFiddle would do?

1. $("option").change(function(event){ //when option is selected
2.     event.preventDefault();
3.     $("a.track").attr(name='$(this).val()').trigger("click");