Menu
I have created a web app. I have tried my level best to trace out why does the div named more gets hidden when the an item is searched(you can see my efforts from the comments and alerts) but I was unable to trace it. I will be thankful if anyone can guide me. Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="images/favicon.png" />
<script type="text/javascript">
var nexturl ="";
var lastid ="";
var param;
<!--Trace more-->
function myFunction() {
param = $('#search').val();
//alert("I am an alert box!");
if (param != "") {
$("#status").show();
//alert("Show ");
var u = 'https://graph.facebook.com/search/?callback=&limit=5&q='+param;
$("#data").empty(); //empty the data div
//alert("Wait for 5 sec?");
setTimeout(function(){
getResults(u)},
200);
//getResults(u);
//alert("When myFunction runs show more line 20");
$("#more").show();
}
$("#more").click(function () {
$("#status").show();
//alert("Show ");
$("#more").hide();
pageTracker._trackPageview('/?q=/more');
var u = nexturl;
getResults(u);
});
}
</script>
<title>Facebook Status Search - Search Facebook Status in Real Time</title>
<meta name="description" content="Facebook status search, search status facebook, facebook status real time, Fahad Uddin Facebook status search, Facebook update search">
<meta name="distribution" content="global">
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cuteTime.min.js"></script>
<script type="text/javascript" src="ofs.js"></script>
<script type="text/javascript" src="ga.js"></script>
<link rel="stylesheet" href="font/stylesheet.css" type="text/css" charset="utf-8" />
</head>
<body style="margin:0px;padding:0px;">
<div id="container">
<div id="header" style="height:39px; background-color:#3B5998; margin-bottom: 10px; ">
<div id="logo" style="display:inline;">
<h1 style="display:inline; font-family: 'klavika_boldbold_tf';color: #FFFFFF;padding-left:50px;padding-left: 50px;font-size:30px;" ><a style="color:#fff;" href="http://www.fbstatussearch.com">facebook status search</a></h1>
</div>
<div style="margin-bottom:10px;float:right;">
<form action="" method="get" id="searchform" onsubmit="return false;">
<input name="q" type="text" id="search" onClick="this.select();" size="32" maxlength="128" class="txt" style="padding: 0 5px;" >
<input type="button" id="hit" value="Search" onclick="myFunction();return false" class="btn">
</form>
</div>
</div>
<div id="data_container">
<div id="data">
<div id="status_container">
<div id="status"><img src="loader.gif" alt="loading facebook status search"/></div>
</div>
</div>
<div id="more" style="text-align:center;">More Posts <img src="DownTriangleIcon_8x8.png" alt="more status" /></div>
</div>
<div id="sidebar" style="float:right;">
<div style=" background-color: #fcf7da;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;margin-bottom:10px;" >
<h4>Share it with the World</h4>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fe772f550658645"></script>
<!-- AddThis Button END -->
</div>
<div style=" background-color: #FFEFC6;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;margin-bottom:10px;" >
<h4>How To Use</h4>
<p>Write down the tag to be searched in the top search area. For example,type in,<br>
<strong>Yahoo</strong><br>
and you will get the latest relevant Facebook updates of <strong>all the people around the world</strong> that have used the word <strong>"Yahoo"</strong>.</p>
</div>
<!-- <div style=" background-color: #FFE1C0;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;margin-bottom:10px;" >
<h4>Why Use it?</h4>
<p>Here is why you would <em>love it</em>.</p>
</div>
-->
<div style=" background-color: #EEEEEE;
border-radius: 5px 5px 5px 5px;
color: #735005;
padding: 8px;" >
<h4>Copyright</h4>
<p>Copyright 2013. All rights reserved. We are not linked with Facebook.<br>
Created by <a href="http://www.facebook.com/fahd92">Fahad Uddin</a>.
</p>
</div>
</div> <!--Sidebar Ends-->
<div id="adverise" width="336px;padding:0 auto; float:left;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8542523573222680";
/* FbStatusSearch1 */
google_ad_slot = "8229888765";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="footer">
<p style="font-size:12px;">Copyrights 2013.Created by <a href="http://www.facebook.com/fahd92">Fahad Uddin</a>. All Rights Reserved.</p>
</div> <!--Footer Ends-->
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-16080447-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<script type="text/javascript">
$(document).ready(function () {
$("#search").keyup(function(e){
$("#status").empty();
/*
var keyCode = e.keyCode || e.which;
if(keyCode == 13) {*/
myFunction();
//}
});
//alert("On Page load hide more Line 151 ");
$("#status").hide();
//$("#more").hide();
});
</script>
</body></html>
Here is the JS,
function getResults(u) {
//$("#status").show();
$("#data").empty(); // print that we are in
$.ajax({
dataType: "jsonp",
url: u,
success: function(res) { // take an object res
$("#data").empty();
$("#status").show(); // show status
//$("#more").show();
if (res.data.length) { // check length of res
// print if >0
nexturl = res.paging.next; // calculate next url
$.each(res.data, function(i,item){
if (item.id != lastid) {
lastid = item.id;
var html ="<div class=\"post\">";
html += "<div class=\"message\"><a href=\"http:\/\/www.facebook.com\/profile.php?id="+item.from.id+"\">"+item.from.name+"</a> ";
if (item.message) {
html += item.message+"<\/div>";
} else {
html += "<\/div>";
}
if (item.picture) {
html += "<div class=\"image\"><img src=\""+item.picture+"\"></div>";
} else {
html += "<div class=\"image\"><\/div>";
};
if (item.link) {
html += "<div class=\"link\"><a href=\""+item.link+"\">"+item.name+"</a></div>";
if (item.caption) {
html += "<div class=\"caption\">"+item.caption+"</div>";
};
if (item.description) {
html += "<div class=\"description\">"+item.description+"</div>";
};
};
html += "<div class=\"meta\">";
if (item.icon) {
html += "<span class=\"icon\"><img src=\""+item.icon+"\"></span> ";
};
var t = item.created_time;
var time = t.substring(0,19)+"\+00:00";
html += "<span class=\"time\">"+$.cuteTime({},time)+"<\/span> ";
html += " <\/div>";
html +="</div>";
$("#data").append(html) ;
}
});
$("#more").appendTo("#data");
$("#more").show();
$("#status").appendTo("#data");
} else {
$("#data").append("<h3 class=\"none\">No entries found. Please try another search.</h3>");
};
}
});
}
Your problem is:
$("#more").appendTo("#data");
At first more sitting in data_container, then you move it to the data by this line : $("#more").appendTo("#data"); then when he comes again to success it deletes more together with data by this line: $("#data").empty(); and when you want to do again $("#more").appendTo("#data"); is not found.
I think you should change to:
$("#more").appendTo("#data_container");
Or save more before you do $("#data").empty(); in variable and then append the variable to data.
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
