Show div if input value is met without reloading page

Question

I have an input field where the expected value is a youtube link. I need to make it so that once a youtube link is put into the input, it automatically shows a div I've created (which shows the video's thumbnail, title, and description) without reloading the page.

Here's the HTML code for the input and where the div needs to be placed:

<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>';
?>

So again, what I need this to do is, once the youtube link has been put into the input field, it should automatically show the div that's echoed in the PHP code without refreshing the page (using AJAX, etc).

Please help.

It sounds like you want to post the input and return HTML content using AJAX. For jQuery, please see http://api.jquery.com/jQuery.ajax/ for specs and examples. For pure javascript, try http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery. If you have trouble, please update your question with the code you've tried and what went wrong. — showdev, Aug 28 '13 at 21:00
bind the input with `propertychange` event where you can make an ajax call — user1, Aug 28 '13 at 21:01

score 1 · Accepted Answer · answered Aug 28 '13 at 21:15

<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>

Try this please...I have used "blur" function therefore you need to click outside textbox after pasting the youtube link or press "tab" button.

It works, but for some reason, the line "" messes up the layout/design of my webpage. What's wrong with that? — Erik Fischer, Aug 28 '13 at 21:33
please check for php errors or try to place this line in the header file if any. — Pranay Bhardwaj, Aug 29 '13 at 20:11

score 0 · Answer 2 · answered Aug 28 '13 at 21:02

0

depending on what you want to trigger the ajax call you could do

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

answered Aug 28 '13 at 21:02

Shan Robertson

2,742
3
25
43

I'm confused as to what goes in the 'success: function(data){ }' part of the code. – Erik Fischer Aug 28 '13 at 21:08
@ErikFischer the success means the ajax call was successful. You can use a few different callbacks for if it failed or something as well. So that data var will contain your youtube info, and in the success callback you can go like $('#myelm').html(data.thumbnail + data.title); – Shan Robertson Aug 28 '13 at 21:17

Show div if input value is met without reloading page

2 Answers2