使用 ajax 加载 youtube 框架的 ajax 加载，其中 youtube id 是文本输入答案

【问题标题】：ajax load of youtube frame using ajax where youtube id is text input使用 ajax 加载 youtube 框架的 ajax 加载，其中 youtube id 是文本输入
【发布时间】：2012-12-10 00:20:33
【问题描述】：

我在 wordpress 主题中为我的自定义帖子类型创建了元框。我的元字段包含文本类型。此文本类型的输入值是 youtube 视频 ID。 Youtube 视频预览仅在发布该帖子后更新。如何更新视频 url 并在不发布该帖子的情况下立即看到预览。

add_action('save_post', 'my_metabox_save');
add_action( 'add_meta_boxes', 'my_metabox' );

function my_metabox () {

add_meta_box('my_metabox_id', "my metabox", 'my_metabox_cb', 'custome-post', 'normal', 'high');

}


##### MY metabox callback ########
function my_metabox_cb () {

wp_nonce_field( plugin_basename(__FILE__), 'myplugin_noncename' );


?>

//////////////////////////////////////////////////////////////////////////

<div class="my-video-id>
<h2>Enter Youtube Video ID</h2>

<input type="text" style="width: 100%;" name="my_youtube_id" value="<?php echo get_post_meta($_GET['post'], 'my_youtube_id', true); ?>" />

<?php if (get_post_meta($_GET['post'], 'my_youtube_id', true) != "") : ?>

<h2>youtube video box</h2>

<object width="600" height="400"><param name="movie" value="http://www.youtube.com/v/a6GCy_lKYo8?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/<?php echo get_post_meta($_GET['post'], 'my_youtube_id', true); ?>?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="300"></embed></object>

</div>

////////////////////////////////////////////////////////////////////////////////////////////////

}

function my_metabox_save ($post_id) {

 if ( !wp_verify_nonce( $_POST['myplugin_noncename'], plugin_basename(__FILE__) )) {
    return $post_id;
  }

  if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
    return $post_id;

  if ( 'page' == $_POST['post_type'] ) {
    if ( !current_user_can( 'edit_page', $post_id ) )
      return $post_id;
  } else {
    if ( !current_user_can( 'edit_post', $post_id ) )
      return $post_id;
  }

 update_post_meta($post_id, 'my_youtube_id', $_POST['my_youtube_id'],true);

【问题讨论】：

其实我是 AJAX 和 Jquery 的新手。我已经实现了包含嵌入式 YouTube 的页面。其中 src 属性是我的 youtube url。如何使用 ajax 立即更改此 url，其中 url 值输入给我的文本类型。帮助我，然后你会得到你的巧克力。提前致谢。
谢谢！为您的建议！实际上我想发布我尝试过的代码，但我现在无法粘贴我的代码。最好我会发布我的链接。
这是我的链接：pastebin.com/WEsCc512 尝试在我的 wordpress Metabox 管理面板中实现它。 Youtube 视频仅在发布帖子后才加载，我如何使用 Ajax 加载它。
查看Q&A 以获取使用 Ajax 的示例。尝试将其与您的代码合并并相应地更新您的问题：“我试过这个，但这部分不起作用”，例如。 :::: PS：最好将代码添加到问题本身。您可以随时联系edit it。
很高兴在这个网站上向你学习一些基本的东西。希望这能帮助我找到更好的解决方案。

标签： ajax wordpress jquery youtube

【解决方案1】：

我第一次读错了问题。要解决它，是一个 jQuery 的问题：从输入框中获取值并修改嵌入视频 div 的 HTML。一个例子：

add_action( 'add_meta_boxes', 'my_metabox' );

function my_metabox () {
    add_meta_box(
        'my_metabox_id', 
        "my metabox", 
        'my_metabox_cb', 
        'custome-post', 
        'normal', 
        'high'
    );
}

function my_metabox_cb () {
    ?>
        <div class="my-video-id">
            <h2>Enter Youtube Video ID</h2>
            <input type="text" style="width: 100%;" id="yt-id" value="" />
            <div id="yt-metabox"></div>
            <button id="yt-refresh">Refresh</button>
        </div>

        <script type="text/javascript">
        jQuery(document).ready(function($) {   
            $("#yt-refresh").click(function (e) {
                e.preventDefault();
                var yt_id = $('#yt-id').val();
                $('#yt-metabox').html('<object width="600" height="400"><param name="movie" value="http://www.youtube.com/v/a6GCy_lKYo8?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/' + yt_id + '?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="300"></embed></object>');
            });
        });
        </script>
    <?php
}

【讨论】：

非常感谢@brasofilo！我只是在考虑您的有用建议。