I've created a jQuery UI Accordion image loader that dynamically adds or removes panels. Inside each panel is an image input form control and at the end of the document is a function that is supposed to change the img src in the panel to the newly selected image. Unfortunately, I am getting: cannot read 'files' of undefined. I understand why its doing this, I just need a way to dynamically add the panels AND be able to update the img src for the panel that loaded the image.
My code, so far, is:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- css links -->
<link href="/Content/bootstrap-theme.css" rel="stylesheet" />
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Scripts/jquery-ui-1.12.0/jquery-ui.css" rel="stylesheet" />
<!-- /css links -->
<!-- js files -->
<script src="/Scripts/jquery-3.1.0.js"></script>
<script src="/Scripts/jquery-ui-1.12.0/jquery-ui.js"></script>
<!-- /js files -->
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<script lang="en" type="text/javascript">
$(function () {
$("#PrimaryImageAccordion").accordion({
collapsible: true
});
});
</script>
<br /><br />
<button type='button' onclick='btnAddPrimaryImage_Click();' class='btn btn-default'> Add </button>
<div id="PrimaryImageAccordion">
<h4 class="PrimaryImageTitle">Primary Image</h4>
<div>
<div class="row form-group">
<label for="ImageSelector" class="control-label col-md-2">Project Image</label>
<div class="col-md-10">
<input type="file" id="ImageSelector" onchange="ImageSelector_Change(this);" /><br />
<img id="Image" src="#" style="width: 100px; visibility: hidden;" />
</div>
</div>
</div>
</div>
<script lang="en" type="text/javascript">
function btnAddPrimaryImage_Click() {
var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
template += "<div class='AccordionPanel'><div class='row form-group'>\n";
template += "<label for='ImageSelector' class='control-label col-md-2'>Project Image</label>\n";
template += "<div class='col-md-10'>\n";
template += "<input type='file' id='Image1Selector' /><br />\n";
template += "<img id='Image' src='#' style='width: 100px; visibility: hidden;' />\n";
template += "</div></div></div>\n";
$("#PrimaryImageAccordion").append(template);
$("#PrimaryImageAccordion").accordion("refresh");
}
function removePanel(a) {
$(a).parent().next().remove();
$(a).parent().remove();
$("#PrimaryImageAccordion").accordion("refresh");
return false;
}
function ImageSelector_Change(object, input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
object.attr("src", e.target.result);
object.css("visibility", "visible");
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
Update 1
Changed my main selector/loader function as follows:
function ImageSelector_Change(input) {
var object = $(input).parent().find('img#Image');
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
object.attr("src", e.target.result);
object.css("visibility", "visible");
}
reader.readAsDataURL(input.files[0]);
}
}
only problem is that it loads the first image only, not the additional images
The IDs must be unique.
So in the function btnAddPrimaryImage_Click I corrected how the new elements are added to the accordion using an incremental variable.
The function ImageSelector_Change needs to get two parameters:
this: in order to get image
image id where to put the loaded image.
Moreover, because you are using bootstrap I suggest you to avoid jQuery 3.x for compatibility issues.
The snippet:
$(function () {
$("#PrimaryImageAccordion").accordion({
collapsible: true
});
});
var idCounter = 0;
function btnAddPrimaryImage_Click() {
idCounter++;
var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
template += "<div class='AccordionPanel'><div class='row form-group'>\n";
template += "<label for='ImageSelector'" + idCounter + " class='control-label col-md-2'>Project Image</label>\n";
template += "<div class='col-md-10'>\n";
template += "<input type='file' id='ImageSelector" + idCounter + "' onchange='ImageSelector_Change(this,\"Image" + idCounter + "\");' /><br />\n";
template += "<img id='Image" + idCounter + "' src='#' style='width: 100px; visibility: hidden;' />\n";
template += "</div></div></div>\n";
$("#PrimaryImageAccordion").append(template);
$("#PrimaryImageAccordion").accordion("refresh");
}
function removePanel(a) {
$(a).parent().next().remove();
$(a).parent().remove();
$("#PrimaryImageAccordion").accordion("refresh");
return false;
}
function ImageSelector_Change(object, input) {
if (object.files && object.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById(input).src = e.target.result;
document.getElementById(input).style.visibility = "visible";
}
reader.readAsDataURL(object.files[0]);
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<br /><br />
<button type='button' onclick='btnAddPrimaryImage_Click();' class='btn btn-default'> Add </button>
<div id="PrimaryImageAccordion">
<h4 class="PrimaryImageTitle">Primary Image</h4>
<div>
<div class="row form-group">
<label for="ImageSelector" class="control-label col-md-2">Project Image</label>
<div class="col-md-10">
<input type="file" id="ImageSelector" onchange="ImageSelector_Change(this, 'Image');" /><br />
<img id="Image" src="#" style="width: 100px; visibility: hidden;" />
</div>
</div>
</div>
</div>
My finished code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- css links -->
<link href="/Content/bootstrap-theme.css" rel="stylesheet" />
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Scripts/jquery-ui-1.12.0/jquery-ui.css" rel="stylesheet" />
<!-- /css links -->
<!-- js files -->
<script src="/Scripts/jquery-3.1.0.js"></script>
<script src="/Scripts/jquery-ui-1.12.0/jquery-ui.js"></script>
<!-- /js files -->
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<script lang="en" type="text/javascript">
$(function () {
$("#PrimaryImageAccordion").accordion({
collapsible: true
});
});
</script>
<br /><br />
<button type='button' onclick='btnAddPrimaryImage_Click();' class='btn btn-default'> Add </button>
<div id="PrimaryImageAccordion">
<h4 class="PrimaryImageTitle">Primary Image</h4>
<div>
<div class="row form-group">
<label for="ImageSelector" class="control-label col-md-2">Project Image</label>
<div class="col-md-10">
<input type="file" id="ImageSelector" onchange="ImageSelector_Change(this);" /><br />
<img id="Image" src="#" style="width: 100px; visibility: hidden;" />
</div>
</div>
</div>
</div>
<script lang="en" type="text/javascript">
function btnAddPrimaryImage_Click() {
var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
template += "<div class='AccordionPanel'><div class='row form-group'>\n";
template += "<label for='ImageSelector' class='control-label col-md-2'>Project Image</label>\n";
template += "<div class='col-md-10'>\n";
template += "<input type='file' id='ImageSelector' onchange='ImageSelector_Change(this);' /><br />\n";
template += "<img id='Image' src='#' style='width: 100px; visibility: hidden;' />\n";
template += "</div></div></div>\n";
$("#PrimaryImageAccordion").append(template);
$("#PrimaryImageAccordion").accordion("refresh");
}
function removePanel(a) {
$(a).parent().next().remove();
$(a).parent().remove();
$("#PrimaryImageAccordion").accordion("refresh");
return false;
}
function ImageSelector_Change(input) {
var object = $(input).parent().find('img#Image');
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
object.attr("src", e.target.result);
object.css("visibility", "visible");
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
Found out the hard way that when you add code to the first object (the accordion panel) you also have to add the same code to the template in order to make the image loader work :p.
I think you have to change this function parameters as single like this.
Because your onchange event fires this function with single parameter.
So it will receive the object but your trying to access the input which has the undefined value
Here take one global variable increment because as many times your clicking the button those many times DOM image element having the samaID
var vrImgeID=0;
function btnAddPrimaryImage_Click() {
var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
template += "<div class='AccordionPanel'><div class='row form-group'>\n";
template += "<label for='ImageSelector' class='control-label col-md-2'>Project Image</label>\n";
template += "<div class='col-md-10'>\n";
template += "<input type='file' id='Image1Selector' /><br />\n";
template += "<img id='Image"+vrImgeID+"' src='#' style='width: 100px; visibility: hidden;' />\n";
template += "</div></div></div>\n";
$("#PrimaryImageAccordion").append(template);
vrImgeID++;
$("#PrimaryImageAccordion").accordion("refresh");
}
function ImageSelector_Change(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
input.attr("src", e.target.result);
input.css("visibility", "visible");
}
reader.readAsDataURL(input.files[0]);
}
}
Related
I want to show an image and a title when I click the button. I created a form to do it. It's only working to show "Title". Image is not showing. Here is the my code, please help me.
function showImage()
{
document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value;
document.getElementById('showImage').innerHTML=document.getElementById('imagP').value;
}
<!-- Input Area-->
<input type="text" id="imgTitle"/>
<input type="file" id="imagP"/>
<button onclick="showImage()" >Show Image</button>
<!-- Show Image & Title-->
<p id="showTitle"></p>
<img src="" id="showImage">
<!-- JavaScript Code-->
You need to use FileReader to read the uploaded file.
function showImage() {
document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value;
var preview = document.querySelector('#showImage');
var file = document.querySelector('#imagP').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
<input type="text" id="imgTitle"/>
<input type="file" id="imagP"/>
<button onclick="showImage()" >Show Image</button>
<!-- Show Image & Title-->
<p id="showTitle"></p>
<img src="" id="showImage">
here is we use fileChange function on each time you change file.
and add style of display none to img tag where we want to show image, so we can show/hide image on Show Image button click.
let file = null;
function showImage() {
document.getElementById('showTitle').innerHTML = document.getElementById('imgTitle').value;
const showImage = document?.getElementById('showImage');
showImage.style?.display = 'block';
showImage.src = window?.URL?.createObjectURL(file);
}
const fileChange = (fileObj) => {
document.getElementById('showTitle').innerHTML = '';
const showImage = document.getElementById('showImage');
showImage.style.display = 'none';
file = fileObj.target.files[0]
}
<!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.0">
<title>Document</title>
<style>
#editable {
width: 400px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<input type="text" id="imgTitle" />
<input type="file" id="imagP" onchange="fileChange(event)" />
<button onclick="showImage()">Show Image</button>
<!-- Show Image & Title-->
<p id="showTitle"></p>
<img src="" id="showImage" style="display:none">
</body>
</html>
Simplest way to achieve it as below
function showImage()
{
document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value;
if(document.getElementById('imagP').files[0] != null) {
document.getElementById('showImage').src=URL.createObjectURL(document.getElementById('imagP').files[0]);
} else {
alert("please select the image")
}
}
<input type="text" id="imgTitle"/>
<input type="file" id="imagP"/>
<button onclick="showImage()" >Show Image</button>
<!-- Show Image & Title-->
<p id="showTitle"></p>
<img src="" id="showImage">
the toggle function work in descrip and example as shown, but the problem is it does not work when I add a new definition via the input from the user. please help!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.descrip').click(function(){
$(this).next('.def').slideToggle("slow");
});
});
function addDef () {
//window.alert (1);
var def= document.getElementById("defInput").value;
//window.alert (def);
document.getElementById("addf").innerHTML += "<div class= 'descrip'> descrip </div>";
document.getElementById("addf").innerHTML += "<div class= 'def'> "+def+" </div>";
$(document).ready(function(){});
}
</script>
</head>
<body>
<div class = "descrip"> descrip</div>
<div class = "def"> example </div>
enter def for apple: <input type= "text" id = "defInput"> </input> <br> <br>
<button onclick="addDef()">ADD</button>
<div id = "addf"> </div>
</body>
</html>
Use event delegation
$(this).on("click", ".descrip", function() {
$(this).next('.def').slideToggle("slow");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(this).on("click", ".descrip", function() {
$(this).next('.def').slideToggle("slow");
});
});
function addDef() {
//window.alert (1);
var def = document.getElementById("defInput").value;
//window.alert (def);
document.getElementById("addf").innerHTML += "<div class= 'descrip'> descrip </div>";
document.getElementById("addf").innerHTML += "<div class= 'def'> " + def + " </div>";
}
</script>
</head>
<body>
<div class="descrip">descrip</div>
<div class="def">example</div>
enter def for apple:
<input type="text" id="defInput">
<br>
<br>
<button onclick="addDef()">ADD</button>
<div id="addf"></div>
</body>
</html>
I've search for simple image cropping and i found one, i study all the part and now i want to add some features, this features is selecting an image and display it immediately i got it, but i have a little confusing problem, the problem is after selecting image it doesnt display the original size of image.
INDEX.PHP
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<title>Jcrop Dynamic Avatar JS/PHP Demo</title>
<link rel="shortcut icon" href="http://teamtreehouse.com/assets/favicon.ico">
<link rel="icon" href="http://teamtreehouse.com/assets/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Wellfleet">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
<script type="text/javascript" src="js/cropsetup.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<!--This is what i add---->
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.sep').attr('src', e.target.result);
$('.jcrop-preview').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<!--END---->
</head>
<body>
<div id="wrapper">
<div class="jc-demo-box">
<header>
<h1><span>Create your profile</span></h1>
</header>
<div id="ew" style="width: 500px; height:500px; background: rgb(102,102,102);">
<img src="" id="target" class="sep" alt="crop image"/> //THIS IS THE IMAGE I WANT TO SHOW THE ORIGINAL SIZE AFTER SELECTING FROM FILES
</div>
<div id="button_upload"><span>Select Image</span>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="readURL(this);">
</div>
<div id="mo">
<div id="preview-pane">
<div class="preview-container">
<div id="ew2"> <img src="" class="jcrop-preview" alt="Preview" /> </div>
</div>
</div>
</div>
<!-- #end #preview-pane -->
<div id="form-container">
<form id="cropimg" name="cropimg" method="post" action="crop.php" target="_blank">
<input type="hidden" id="x" name="x">
<input type="hidden" id="y" name="y">
<input type="hidden" id="w" name="w">
<input type="hidden" id="h" name="h">
<input type="submit" id="submit" value="Crop Image!">
</form>
</div>
<!-- #end #form-container -->
</div>
<!-- #end .jc-demo-box -->
</div>
<!-- #end #wrapper -->
</body>
</html>
CROPSETUP.JS
$(function($){
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
bgOpacity: 0.5,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this; // Store the API in the jcrop_api variable
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = xsize / c.w;
var ry = ysize / c.h;
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
$pimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
}
});
**Also how can i save the image after submit? here is the code for submit but i'm failed for getting the image after croping.
CROP.PHP
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$targ_w = $targ_h = 180;
$jpeg_quality = 90;
if(!isset($_POST['x']) || !is_numeric($_POST['x'])) {
die('Please select a crop area.');
}
$src = //This where i want to put the image after scrop but i dont know how
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor($targ_w, $targ_h);
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-type: image/jpeg');
imagejpeg($dst_r,null,$jpeg_quality); // NULL will output the image directly
exit;
}
?>
Thanks!!!
On my homepage there is a listview, where every element has a link to the same page, but with different URL parameter:
Those links work fine and they redirect me to the page player.html; the problem is that here the event pageinit is not fired:
<div data-role="page" data-add-back-btn="true" id="playerPage">
<script>
var favStorageKey = "youtubeTheaterFav";
var videoID = $.url().param("video");
var movieID = $.url().param("movie");
$("#playerPage").on('pageinit',function(){
console.log("init");
}
</script>
But if I refresh the page the event is triggered. Is there any way to trigger it when the page is loaded at first?
EDIT: This is player.html:
<!DOCTYPE html>
<html>
<head>
<title>Youtube Theater</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src = "js/themoviedb.js"></script>
<script src = "js/youtube.js"></script>
<script src="js/purl.js"></script>
<script src="js/jquery.fitvids.js"></script>
<style>
div.movie-info{font-size: 16px;margin-top: 10px; margin-bottom: 5px}
.toogle-container .ui-slider-switch { width: 9em}
</style>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="playerPage">
<script>
var favStorageKey = "youtubeTheaterFav";
var videoID = $.url().param("video");
var movieID = $.url().param("movie");
$(document).on('pageinit',"#playerPage",function(){
console.log("init");
$("#embdPlayer").attr("src","http://www.youtube.com/embed/" + videoID + "?autoplay=1");
$.when(getMovieInfo(movieID)).then(function(movie){
$("#poster").attr("src",movie.poster);
$("#title").html(movie.title + " <small>(" + movie.released + ")</small>");
$("#plot").html(movie.plot);
$("#cast").html("<strong>Director: </strong>" + movie.director+"<br> <strong>Stars: </strong>" + movie.cast);
if(isFavorite()){
$("#favoriteSlider").val("on").slider("refresh");
}else{
$("#favoriteSlider").val("off").slider("refresh");
}
});
$("#playerContainer").fitVids();
});
function getFavorites(){
var savedFavorites = localStorage.getItem(favStorageKey);
return JSON.parse(savedFavorites);
}
function isFavorite(){
if(localStorage.getItem(favStorageKey)){
var fav = getFavorites();
return fav[videoID]!=undefined;
}
return false;
}
function removeFromFavorites(){
var favMap = getFavorites();
delete favMap[videoID];
localStorage[favStorageKey] = JSON.stringify(favMap);
}
$("#favoriteSlider").change(function(){
if(isFavorite()){
removeFromFavorites();
}else{
saveToFavorites();
}
});
function saveToFavorites(){
var film = {
movie: movieID,
title: $("#title").text(),
poster: $("#poster").attr("src")
}
var favorites={};
if(localStorage.getItem(favStorageKey)){
favorites = getFavorites();
}
favorites[videoID] = film;
localStorage.setItem(favStorageKey,JSON.stringify(favorites));
}
</script>
<div data-role="panel" id="movieInfo" data-position="right" data-display="push" class="toogle-container">
<H3 id="title"></H3>
<img id="poster">
<div id="plot"></div>
<div id="cast"></div>
<select data-role="slider" id="favoriteSlider">
<option value="off">Unfavorite</option>
<option value="on">Favorite</option>
</select>
</div>
<div data-role="header" >
<H1>Youtube Theater</H1>
Movie Info
</div>
<div data-role="content">
<div id="playerContainer">
<iframe id = "embdPlayer" width="560" height="315" frameborder="0" ></iframe>
</div>
</div>
</div>
</body>
</html>
The pageinit event is the right one you looking for... Try navigating to player.html page with the following JavaScript code:
$.mobile.changePage( "player.html?video=34&movie=4354", { reloadPage : true });
This forces a reload of a page, even if it is already in the DOM of the page container.
Also you can try changing $("#playerPage").on('pageinit',function(){ to $(document).on('pageinit', '#playerPage',function(){.
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 Fahad Uddin.
</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 Fahad Uddin. 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\">"+item.from.name+" ";
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\">"+item.name+"</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.