jquery - Why are my tab contents not refreshing? -


i have page several tabs on it. when user enters value in text input , mashes button, want replace contents on particular tab. have code (some of details elided show pertinent parts/explain i'm doing).

it works great first time - tab loads fine; subsequent clicks of button (after changing text input value) has no effect, though. why not? must force tab "refresh"? equivalent, perhaps, "application.processmessages()" in desktop environment?

here's pertinent html:

<input type="text" name="inputtext" id="inputtext" placeholder="enter something" autofocus style="display: inline-block;" /> <input type="button" name="inputbutton" id="inputbutton" value="find" style="display: inline-block;" /> 

...and jquery:

<script>     $.support.cors = true;      $(document).ready(function () {         $("#duckbilledplatypustabs").tabs({         });          $("#inputbutton").click(function (e) {                 var searchterm = "";                 if ($("#inputtext").val() !== "") {                     searchterm = $("#inputtext").val();                 } else {                     searchterm = "jquery";                 }                 //alert(searchterm);                 $("duckbilledplatypustab-youtube").html("");                  var urlyoutube = "http://gdata.youtube.com/feeds/api/videos?vq=" + searchterm + "&max-results=5&orderby=published&alt=json";                  $.getjson(urlyoutube, function (data) {                     // loop through each feed entry                     $.each(data.feed.entry, function(i, item) {                         // url video                         var url = item.link[0].href;                         // title of video                         var title = item.title.$t;                         // first 10 characters of date video published or: yyyy-mm-dd                         var datepublished = item.published.$t.substring(0, 10);                         // author name                         var author = item.author[0].name.$t;                         // thumbnail image video                         var thumbnailurl = item.media$group.media$thumbnail[0].url;                         // construct display video                         var text =                             "<br><a href='" + url + "'>" + title + "</a><br>" +                                 "published: " + datepublished + " " + author + "<br><br>" +                                 "<img src='" + thumbnailurl + "'><br>";                         // append text string div display                         $("#duckbilledplatypustab-youtube").append(text);                     });                 });         });            }); </script> 

you missed # in $("duckbilledplatypustab-youtube").html("");. actually, code fails clear "youtube" tab, new videos appended @ end of container.
correcting $("#duckbilledplatypustab-youtube").html(""); should solve problem.

see, also, short demo.
(basically, did take code , add missing #.)


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -