Показать div, если входное значение выполнено без перезагрузки страницы

Question

У меня есть поле ввода, где ожидаемое значение - это ссылка на youtube. Мне нужно сделать так, чтобы после ввода ссылки вовнутрь на ввод автоматически показывался div, который я создал (который показывает миниатюру, название и описание видео) без перезагрузки страницы.

Вот HTML код для ввода и где DIV должен быть размещен:

<div class="formRow"> 
    <div class="grid2"><label>Link</label></div> 
    <div class="grid10" style="position:relative"> 
    <input name="link" type="text" placeholder="Link to the video..." /> 
    </div> 
    <div class="clear"></div> 
</div> 

<!-- THE FOLLOWING PHP CODE CONTAINS THE DIV THAT NEEDS TO BE SHOWN --> 
<?php 
    $url = $_POST['link']; 
    parse_str(parse_url($url, PHP_URL_QUERY), $youtube_id); 

    define('YT_API_URL', 'http://gdata.youtube.com/feeds/api/videos?q='); 

    $video_id = $youtube_id['v']; 

    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL, YT_API_URL . $video_id); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 

    $feed = curl_exec($ch); 
    curl_close($ch); 

    $xml = simplexml_load_string($feed); 

    $entry = $xml->entry[0]; 

    if(!$entry) { exit('Error: No such video exists.'); } 
    $media = $entry->children('media', true); 
    $group = $media->group; 

    $title = $group->title; 
    $desc = $group->description; 
    $thumb = $group->thumbnail[0]; 
    list($thumb_url) = $thumb->attributes(); 
    $content_attributes = $group->content->attributes(); 
    $vid_duration = $content_attributes['duration']; 
    $duration_formatted = str_pad(floor($vid_duration/60), 1, '0', STR_PAD_LEFT) . ':' . str_pad($vid_duration%60, 1, '0', STR_PAD_LEFT); 

    $image = WideImage::load('' . $thumb_url . ''); 
    $resizedImage = $image->resize(320, 180, 'outside')->crop('center', 'middle', 320, 180); 
    $resizedImage->saveToFile("../../assets/video_images/" . $video_id . ".jpg"); 

    echo '<div class="preview-container"> 
    <div class="preview-image"> 
     <img src="../../assets/video_images/' . $video_id . '.jpg" width="185" height="104" /> 
     <div class="preview-timestamp">' . $duration_formatted . '</div> 
    </div> 
    <div class="preview-title"><a href="https://www.youtube.com/watch?v=' . $video_id . '">' . $title . '</a></div> 
    <div class="preview-desc">' . $desc . '</div> 
    <div class="clear"></div> 
    </div>'; 
?> 

Итак, еще раз, что мне нужно, чтобы это сделать после того, как ссылка на YouTube был введен в поле ввода, он должен автоматически отображать div, который повторяется в PHP-коде, не обновляя страницу (используя AJAX и т. д.).

Пожалуйста, помогите.

Answer 1

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script> 
$(document).ready(function(){ 
$('input[name=link]').blur(function(){ 
    $.ajax({ 
      type: "POST", 
      url: "get_video.php", 
      data: { link: $(this).val() }, 
      success:function(v) { 
         $('#video').html(v); 
        } 
     }); 
}); 
}); 
</script> 

<div class="formRow"> 
    <div class="grid2"><label>Link</label></div> 
    <div class="grid10" style="position:relative"> 
    <input name="link" type="text" placeholder="Link to the video..." /> 
    </div> 
    <div class="clear"></div> 
</div> 
<div id="video"></div> 

Попробуйте, пожалуйста ... я использовал функцию «размытия» поэтому вам нужно щелкнуть за пределами текстового поля после вставки youtube или нажмите кнопку «tab».

Answer 2

в зависимости от того, что вы хотите, чтобы вызвать вызов Ajax вы могли бы сделать

$('input[name=link]').on('blur', function(){ 
    $.ajax({ 
    url: "test.html", 
    context: document.body, 
    success: function(data){ 
     //your ajax content is in the data var 
    } 
    }); 
});