Support

Account

Home Forums Backend Issues (wp-admin) Jquery oEmbed value event

Solving

Jquery oEmbed value event

  • Hi there,

    I have some custom jquery script on the admin area which on some event puts a url to and oEmbed field with the .val('some-url'); function.

    The thing is that way the video thumbnail won’t update like it does when you type or past a url in there.

    So i tried adding .trigger('change'); or trigger('keyup'); but it doesn’t seem to help.

    Any ideas how to make it work like it would when you type or past?

  • I tested this with just a single oembed field on the page, and no other fields so my targeting is very generic and you will likely need to make it more specific.

    
    $(document).on('click', function(e) {
      // runs on any click on the page
      // just for testing
      $(document).find('.input-search').val('https://www.youtube.com/watch?v=kfwvpyrAW60');
      $(document).find('.input-search').trigger('change');
    }
    

    This is the only way I could get this to work.

  • Thanks John,

    It doesn’t seem to work for me. do you see a video thumbnail when you click?

  • I see the value added to the search field and then AF loads the video into the preview.

  • Oh, now i got it. the problem seem to be with my rows that are added by jquery.

    If i use your code with a row already exists it works, but on my code i add rows with jquery this way (to pull videos from youtube channel into those rows…):

    $(document).on('mouseup','.get_yt_videos_from_channel',function(e){
    	var ycLink = $('[data-name="yt_channel_url"] input').val();
    	var channelID = ycLink.split("/")[4];
    
    	// If has youtube channel
    	if(channelID){
    		$.get(
    		  "https://www.googleapis.com/youtube/v3/search",{
    			part : 'snippet', 
    			channelId : 'UCtGv4fb0btvvi9pGOt0UrEA',
    			type : 'video',
    			key: 'AIzaSyB_VnQhWmlxX0Z9kH_s3bejItXt04lYb6w'},
    			function(data) {
    			  $.each( data.items, function( i, item ) {
    				  $('[data-key="field_602ea4a8fe1ab"] a[data-event="add-row"]').last().trigger('click');
    				  var addedRow = $('[data-key="field_602ea4a8fe1ab"] .acf-clone').prev();
    				  addedRow.find('[data-name="yt_title"] input').val(item.snippet.title);
    				  addedRow.find('[data-name="yt_url"] input').val('https://www.youtube.com/watch?v='+item.id.videoId);
    
    			  })
    			}
    		);
    		$(document).find('input').trigger('change');
    	}
    
    	// If doesn't have youtube channel - alert Error
    	else {
    		alert('You don't have a youtube channel url defined');
    	}

    And when added like that the preview won’t load even i then type it manually into to the ‘.input-search’.

    Any idea why?

  • I don’t know why you are having an issue adding videos and why it does not work. Have you tried adding the rows without attempting to update the values and then see if the omebed field works the way it’s supposed to.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.