so i'm not sure why i'm unable access $(this).attr(id) within focus event. setting within variable getting undefined when try see value stored. not entirely sure going wrong here. using library called 'horsey' enables integrate autocomplete application. see docs here: https://github.com/bevacqua/horsey/
here code in question:
$( "input" ).focus(function() { var curr_input_id = $(this).attr('id'); alert($(this).attr('id')); horsey(document.queryselector(curr_input_id), { suggestions: [<? echo $this->video_model->get_all_tag_names(); ?>] }); }); this full html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"><!-- above 3 meta tags *must* come first in head; other head content must come *after* these tags --> <title>dashboard - snipptr | uploaded videos</title><!-- bootstrap --> <link href="<?php echo base_url().'assets/css/bootstrap.min.css'; ?>" rel="stylesheet" type="text/css"> <link href="<?php echo base_url().'assets/css/bootstrap.fd.css'; ?>" rel="stylesheet" type="text/css"> <link href="<?php echo base_url().'assets/css/dropzone.min.css'; ?>" rel="stylesheet" type="text/css"> <link href="<?php echo base_url().'assets/css/bootstrap-tagsinput.css'; ?>" rel="stylesheet" type="text/css"> <link href="<?php echo base_url().'assets/css/horsey.min.css'; ?>" rel="stylesheet" type="text/css"> <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"> <link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"> <link href="<?php echo base_url().'assets/css/custom.css'; ?>" rel="stylesheet" type="text/css"> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="<?php echo base_url().'assets/img/logo.png'; ?>" alt="" /></a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="<?php echo base_url().'subscriber'; ?>">basic stats<span class="sr-only">(current)</span></a></li> <li class="active"><a href="<?php echo base_url().'subscriber/videos'; ?>">uploaded videos</a></li> <!-- <li><a href="<?php //echo base_url().'subscriber/suggested'; ?>">suggested snippets</a></li> --> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="<?php echo base_url().'subscriber/pending_snippets'; ?>">0 new snippets</a></li> <li class="open_button"><button data-toggle="modal" data-target="#squarespacemodal" class="btn btn-primary center-block">upload video(s)</button></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">account (50/50 credits - $250) <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">add credits</a></li> <li><a href="#">settings</a></li> <li><a href="#">billing</a></li> <li role="separator" class="divider"></li> <li><a href="<?php echo base_url().'auth/logout'; ?>">logout</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!-- page content --> <div class="container"> <!-- page header --> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">your uploaded videos (<? echo $video_number; ?>) <small>snippets pending: 0 - snippets approved: 0</small> </h1> </div> </div> <!-- /.row --> <!-- projects row --> <div class="row"> <?php foreach ($videos $video) { ?> <div class="col-md-4 portfolio-item"> <video id="really-cool-video" class="video-js vjs-default-skin" controls preload="auto" width="358" height="264" poster="really-cool-video-poster.jpg" data-setup='{}'> <source src="<?php echo s3_site_url("subscriber_videos/".$video->s3_file_name); ?>" type='<? echo $this->video_model->format_mime_type($video->mime_type); ?>'> <p class="vjs-no-js"> view video please enable javascript, , consider upgrading web browser <a href="http://videojs.com/html5-video-support/" target="_blank">supports html5 video</a> </p> </video> <h3> <a href="<?php echo s3_site_url("subscriber_videos/".$video->s3_file_name); ?>"><? echo $video->file_name; ?></a> </h3> <p>write general (140 word) description of video here. make text area.</p> <p><input class='tags_input_area' id='tags_<? echo $video->id; ?>' type="text" value="<? echo $this->video_model->get_tag_names($video->tags); ?>" data-role="tagsinput" placeholder="enter tags here."></p> <? if ($video->active == 0) { $checked = ''; } else { $checked = 'checked'; } ?> <input <? echo $checked; ?> data-toggle="toggle" data-on="active" data-off="inactive" data-onstyle="success" data-offstyle="danger" type="checkbox" id="active_switch_<? echo $video->id; ?>" class="active_switches"> <? /*if ($checked == 'checked') { echo ' finding snippeters...'; }*/ ?> <hr> <a href="<?php echo base_url().'subscriber/pending_snippets/'.$video->id; ?>">(new) pending snippets (<? echo $this->video_model->get_submitted_snippets($video->id, 1); ?>)</a> - <a href="<?php echo base_url().'subscriber/approved_snippets/'.$video->id; ?>">accepted snippets (<? echo $this->video_model->get_accepted_snippets($video->id, 1); ?>)</a> <hr> </div> <?php } ?> </div> <!-- /.row --> <hr> <!-- footer --> <footer> <div class="row"> <div class="col-lg-12"> <p>copyright © website 2014</p> </div> </div> <!-- /.row --> </footer> </div> <!-- /.container --> <!-- line modal --> <div class="modal fade" id="squarespacemodal" tabindex="-1" role="dialog" aria-labelledby="modallabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">close</span></button> <h3 class="modal-title" id="linemodallabel">upload video(s)</h3> </div> <div class="modal-body"> <!-- content goes here --> <form id="my-awesome-dropzone" action="<?php echo base_url().'subscriber/upload_video'; ?>" class="dropzone bfd-dropfield-inner"></form> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">close</button> </div> <div class="btn-group btn-delete hidden" role="group"> <button type="button" id="delimage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">delete</button> </div> <!-- <div class="btn-group" role="group"> <button type="button" id="saveimage" class="btn btn-default btn-hover-green" data-action="save" role="button">save</button> </div> --> </div> </div> </div> </div> </div> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"> </script><!-- include compiled plugins (below), or include individual files needed --> <script src="<?php echo base_url().'assets/js/bootstrap.min.js'; ?>" type="text/javascript"> </script> <script src="<?php echo base_url().'assets/js/dropzone.min.js'; ?>" type="text/javascript"> </script> <script src="<?php echo base_url().'assets/js/bootstrap-tagsinput.min.js'; ?>" type="text/javascript"> </script> <script src="<?php echo base_url().'assets/js/horsey.min.js'; ?>" type="text/javascript"> </script> <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script> <script src="//vjs.zencdn.net/4.12/video.js"></script> <script> $( document ).ready(function() { $('input[type="checkbox"]').change(function () { var id = $(this).attr('id'); video_id = id.replace('active_switch_',''); var check = $(this).prop('checked'); if (check) { t = 1; } else { t = 0; } $.get( "active_switch/" + video_id + "/" + t, function( data ) { console.log( data + "." ); }); }); u = '<? echo base_url(); ?>' + 'subscriber/'; $('input').on('itemadded', function(event) { tag_name = event.item; vid_id = $(this).attr('id'); real_vid_id = vid_id.replace('tags_',''); $.post( u + "add_tag", { tag_name: tag_name, video_id: real_vid_id }) .done(function( data ) { //alert( data ); }); }); $('input').on('itemremoved', function(event) { tag_name = event.item; //alert(tag_name); vid_id = $(this).attr('id'); real_vid_id = vid_id.replace('tags_',''); $.post( u + "delete_tag", { tag_name: tag_name, video_id: real_vid_id }) .done(function( data ) { //alert( data ); }); }); /* $('input .tags_input_area').tagsinput({ typeaheadjs: { source: function(query) { return $.get(u + 'get_all_tags'); } } }); */ $( "input" ).focus(function() { horsey(document.queryselector('input'), { suggestions: [<? echo $this->video_model->get_all_tag_names(); ?>] }); }); $(".portfolio-item h3 a").text(function(index, currenttext) { if (currenttext.length >= 27) { return currenttext.substr(0, 27) + '...'; } }); }); </script> </body> </html>
Comments
Post a Comment