This bugs the hell out of me.
<div id="HLrec_preview" style="width: 218px;">
<img src="HLrec.jpg" style="width: 218px;">
<div style="font-weight: bold;" id="title">a</div>
<div id="link">a</div>
<div id="plaintext">a</div>
</div>
<script>
var HL_rec_image_link = $("#HLrec_preview img").attr("src");
alert(HL_rec_image_link);
</script>
Code works perfectly well in jsfiddle
http://jsfiddle.net/t72uQ/
But on my website, it doesn't work. Alert shows up blank.
There must be something external that affects the result, but I can't figure out what.
What could be causing this?
Thanks in advance
More Complete Code:
<input type="button" id="HLrec_input" value="HL Recommends" style="display:block; width:222px;"/>
<div id="HLrec_preview" style="width: 218px;">
<img src="" style="width: 218px;"/>
<div style="font-weight: bold;" id="title"></div>
<div id="link"></div>
<div id="plaintext"></div>
</div>
<script>
$(document).ready(function(e) {
var HLrec = "<?php
if(isset($_GET["ID"]))
echo $row["HL_REC"];
else
echo "0";
?>";
if(HLrec == "1")
{
<?php
$query = "SELECT IMAGE_LINK, TITLE, LINK, PLAINTEXT FROM HL_Rec WHERE ID=" . $_GET['ID'];
$result = mysql_query($query);
$row = mysql_fetch_assoc($result);
?>
$("#HLrec_preview img").attr('src', "<?php echo $row["IMAGE_LINK"]; ?>");
$("#HLrec_preview #title").text("<?php echo $row["TITLE"]; ?>");
$("#HLrec_preview #link").text("<?php echo $row["LINK"]; ?>");
$("#HLrec_preview #plaintext").text("<?php echo $row["PLAINTEXT"]; ?>");
}
$("#submit_input").click(function(e) {
//set HLrec data
var HL_rec = 0;
var HL_rec_title = "none";
var HL_rec_link = "none";
var HL_rec_image_link = $("#HLrec_preview img").attr("src");
var HL_rec_plaintxt = "none";
alert(HL_rec_image_link);
if(HL_rec_image_link.length > 0)
{
HL_rec = 1;
HL_rec_title = $("#HLrec_preview #title").text();
HL_rec_link = $("#HLrec_preview #link").text();
HL_rec_image_link = $("#HLrec_preview img").attr('src');
HL_rec_plaintxt = $("#HLrec_preview #plaintext").text();
}
else
HL_rec_image_link = "none";
});
});
</script>
More code!
This code changes the src from an iframe called in the page
//appends the article tags with content
var title = $("#title").val();
var url = $("#link").val();
var plaintxt = $("#plaintext").val();
//inject html
$("#HLrec_preview img", parent.document).attr('src', newfile);
$("#HLrec_preview #title", parent.document).text(title);
$("#HLrec_preview #link", parent.document).text(url);
$("#HLrec_preview #plaintext", parent.document).text(plaintxt);
WHOOPS.
Had another line of code that interfered.
Hate when that happens.
This is the bad code
//remove t variable from img src's to re enable caching
$("#content_reader_collumn img, #submit_form img").each(function(index, element) {
$(this).attr("src", $(this).attr("src").substring(0, $(this).attr("src").indexOf('?t=')));
});
just have to change the selector.
Thanks for the help guys
Problem can be here
$("#HLrec_preview img").attr('src', "<?php echo $row["IMAGE_LINK"]; ?>");
Ty this instead
$("#HLrec_preview img").attr('src', "<?php echo $row['IMAGE_LINK']; ?>");
Similarly,
$("#HLrec_preview #title").text("<?php echo $row['TITLE']; ?>");
$("#HLrec_preview #link").text("<?php echo $row['LINK']; ?>");
$("#HLrec_preview #plaintext").text("<?php echo $row['PLAINTEXT']; ?>");
Disclaimer: I didn't test it.
Related
I focus mostly on PHP. I have a cookie "themeColor"
am trying to make it so a user can select a color and change the background color of 3 divs at will. Currently, I am able to do this with the #menu style
if (isset($_COOKIE['themeColor'])) {
$color = urldecode($_COOKIE['themeColor']);
echo '<script>document.getElementById("menu").style.background="rgb(' . $color . ')"; </script>';
echo '<script>document.getElementById("main").style.background="rgb(' . $color . ')"; </script>';
echo '<script>document.getElementById("footer").style.background="rgb(' . $color . ')"; </script>';
}
the other 2 divs will not change color. I assume it is a syntax error but I have been looking at this for hours now and would appreciate some help
Ask for any data
edit// adding html markup for menu main and footer
"BEGIN FILE header.php" - starting at #menu -
<div id="menu">
<h1>Solor Hive</h1>
</div>
<?php
if (isset($_COOKIE['themeColor'])) {
$color = urldecode($_COOKIE['themeColor']);
echo '<script>document.getElementById("menu").style.background="rgb(' . $color . ')"; </script>';
echo '<script>document.getElementById("main").style.background="rgb(' . $color . ')"; </script>';
}
if (isset($_POST['logout'])) {
setcookie('theme', "", time() - 3600);
setcookie('user', "", time() - 3600);
header("Refresh:0; url=./index.php");
}
?>
<div class="main" id="main">
<div id="content">
"END OF FILE header.php"
"BEGINNING FILE footer.php"
</div>
</div>
<div id="footer" class="footer">
<? if(isset($_COOKIE['user'])) {
$user = $_COOKIE['user'];
echo '<div class="profile">';
echo 'My Profile';
echo 'User Search';
echo 'Chat';
echo 'My Pictures';
echo 'Games';
echo 'Tools';
echo 'Help</div>';
echo '<form method="POST" id="logout" action="#">';
echo '<input type="submit" name="logout" value="logout"/>';
}
?>
<h4>Made by Solorside</h4>
</form>
</div>
</body>
</html>
"colorpicker.php"
<? include("./header.php");
if (isset($_POST['color'])) {
$rgb = $_POST['color'];
setcookie('themeColor', $rgb, time() + (86400 / 12), "/");
}
?>
<canvas width="512" height="512" id="canvas_picker"></canvas>
<form method="POST" id="colorpicker" Action="#">
<div id="rgb">RGB: <input type="text" name="color" id="color"></input>
</div>
<input type="submit" id="submit" value="Change Theme Color">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">
var canvas = document.getElementById('canvas_picker').getContext('2d');
var img = new Image();
img.src = './data/image.png';
$(img).load(function(){
canvas.drawImage(img,0,0);
});
$('#canvas_picker').click(function(event){
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
var imgData = canvas.getImageData(x, y, 1, 1).data;
var R = imgData[0];
var G = imgData[1];
var B = imgData[2];
var rgb = R + ', ' + G + ', ' + B;
$('#rgb input').val(rgb);
});
</script>
<? include("./footer.php"); ?>
Move your Javascript/ JQuery just above </body> tag.
I would try without JS, because for me makes no sense to search on the DOM when I have the value stored already on a COOKIE, I would apply on the top of the body the next code:
<style>
<?php if(isset($_COOKIE['themeColor'])) { ?>
.bg-color {
background-color: <?php echo urldecode($_COOKIE['user']); ?>; /* COOKIE */
}
<?php } else { ?>
.bg-color {
background-color: #767577; /* default one */
}
<?php } ?>
</style>
So, I will apply the bg-color class on the desired div I want to change with the cookie, then when the cookie is set it will apply the background color.
Below is the javascript part and load more button which I am using to load more posts from database it works fine I want to show a 'no more posts' message when all posts have been loaded but do not know how to do that exactly. Hope you guys can help.
<script>
$(document).ready(function(){
$(document).on('click','.show_more',function(){
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'mload_more.php',
data:'id='+ID,
success:function(html){
$('#show_more_main'+ID).remove();
$('.posts').append(html);
}
});
});
});
</script>
<div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
<span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">
Show more
</span>
<span class="loding" style="display: none;">
<span class="loding_txt">Loading...</span>
</span>
</div>
Within mload_more.php file check the number of returned rows greater than zero. It would be as following code.
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
//display data
}
} else {
echo "No more posts to load";
}
Gayan just gave me a start and rest was not much difficult.
<?php
if ($query->rowCount() > 0) {
while($row = $result->fetch_assoc()) {
}
}
else {
echo $er = "No more posts to load";
}
?>
<script type="text/javascript">
var er = "<?php echo $er; ?>";
if(er!=''){
$("er").show();
$('.show_more').hide();
}
</script>
I am having a problem that my Onclick event is not triggering on a tag. The same onclick event is working properly when binded to a image.
I am making a follow and unfollow function in php and jquery .It is not working so I decided to test a alert after clicking the follow or unfollow button . Then also it is not working .
The code is this
<?php
if ($my_id != $id) {
$check_follow_not = mysqli_query($conn, "SELECT * FROM follower WHERE user_id='$my_id' AND following='$id'");
$check_follow_not_rows = mysqli_num_rows($check_follow_not);
if ($check_follow_not_rows == 0) {
$editfollowunfollow = "<span class='btn_f_uf'><a onclick=\"don();\">Follow</a></span>";
} else {
$editfollowunfollow = "<span class='btn_f_uf'><a onclick=\"don();\">UnFollow</a></span>";
}
} else {
$editfollowunfollow = "<span class='btn_f_uf'><a>Edit Profile</a></span>";
}
echo $editfollowunfollow;
?>
The php code is okay, the problem is with the jquery code
The don() function is this
function don(){
alert();
}
This function is working fine on a image in same file . But not working in the follow and unfollow button.
Thanks in advance . I appreciate all answer
EDIT
Css code of class btn_f_uf
.btn_f_uf{
border:0;
outline:0;
padding:10px;
background:#53a93f;
border-radius:5px;
color:white;
float:right;
margin-right:20px;
margin-top:25px;
display:inline-block;
}
EDIT 2
The profile page whole code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Profcee</title>
<link rel="stylesheet" href="style/style.css">
<script src="js/jquery-2.1.3.js"></script>
<script src="js/check.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-ui.min.js"></script>
</head>
<?php
session_start();
if(isset($_GET['id'])){
include "function/checklogin.php";
include "config/connect.php";
$my_profile_image = $_SESSION['profile_image'];
$my_email = $_SESSION['email'];
$my_id = $_SESSION['id'] ;
$my_name = ucfirst($_SESSION['name']);
$my_background_image = $_SESSION['background_image'];
$id = $_GET['id'];
$check = mysqli_query($conn,"SELECT * FROM users WHERE id='$id'");
$check_num = mysqli_num_rows($check);
if($check_num == 0){
header("location:home.php");
}else{
$fetch = mysqli_fetch_assoc($check);
$name = ucfirst($fetch['name']);
$email = $fetch['email'];
$profile_image = $fetch['profile'];
$background_image = $fetch['background'];
if($my_id != $id){
$check_follow_not = mysqli_query($conn,"SELECT * FROM follower WHERE user_id='$my_id' AND following='$id'");
$check_follow_not_rows = mysqli_num_rows($check_follow_not);
if($check_follow_not_rows == 0){
$editfollowunfollow = "<span class='btn_f_uf'><a class='btns'>Follow</a></span>";
} else{
$editfollowunfollow = "<span class='btn_f_uf'><a class='btns'>UnFollow</a></span>";
}
}else{
$editfollowunfollow = "<span class='btn_f_uf'><a>Edit Profile</a></span>";
}
?>
<?php
include "header.php"; ?>
<div id="profile_full">
<div id="background_image">
<img src="<?php echo $background_image;?>" width="100%" height="400px" onclick="don();">
</div>
<div id="profile_image">
<img src="<?php echo $profile_image?>" width="250px" height="250px">
</div>
<div id="profile_header">
<h1><?php echo $name;?></h1>
<div id="profile_follower">
<?php
$follower = mysqli_query($conn,"SELECT * FROM follower WHERE following='$id'");
$follower_count = mysqli_num_rows($follower);
?>
<h2><?php echo $follower_count;?> Follower</h2>
</div>
<div id="profile_following">
<?php
$following = mysqli_query($conn,"SELECT * FROM follower WHERE user_id='$id'");
$following_count = mysqli_num_rows($following);
?>
<h2><?php echo $following_count;?> following </h2>
</div>
<?php echo $editfollowunfollow;?>
</div>
</div>
<?php
include "footer.php";
?>
<?php
}
}else{
header("location:home.php");
}
?>
The check.js file
$(document).on("click",".btns", function(e){
e.preventDefault();
alert();
});
Like other said, give it class name btns and removeonclick inline javascript on that anchor tag :
.....
if($check_follow_not_rows == 0){
$editfollowunfollow = "<span class='btn_f_uf'><a class='btns'>Follow</a></span>";
} else{
$editfollowunfollow = "<span class='btn_f_uf'><a class='btns'>UnFollow</a></span>";
}
....
And in js code :
$(document).on("click",".btns", function(e){
e.preventDefault();
alert();
});
If you wanna stick with function don(), use this(but must be sure to remove onclick inline javascript) :
$(document).on("click",".btns", don );
In don function :
function don(){
alert();
return false;
}
I'm currently trying to use comments on my website. The comments will be used on posts I have.
The thing is, I'm currently using an iframe to show them.
I would like the code to be on the same page as my posts.
I'll show you what I mean by posting my code:
comment_frame.php:
<?php
if (isset($_POST['postComment' . $getid . ''])) {
$post_body = $_POST['post_body'];
$posted_to = "Chris";
$insertPost = mysql_query("INSERT INTO post_comments VALUES ('','$post_body','$user','$posted_to','0','$getid')");
echo "<p style='color: green'>Comment Posted!</p><br /><br />";
}
// Get relevent comments
$get_comments = mysql_query("SELECT * FROM post_comments WHERE post_id='$getid' ORDER BY id DESC");
$count = mysql_num_rows($get_comments);
if ($count != 0) {
while ($comment = mysql_fetch_assoc($get_comments)) {
$comment_body = $comment['post_body'];
$posted_to = $comment['posted_to'];
$posted_by = $comment['posted_by'];
$removed = $comment['post_removed'];
echo "<b><a href='$posted_by' target='_blank'>$posted_by</a> said: <br /></b>".$comment_body."<hr /><br />";
}
}
else
{
// Do nothing!
}
?>
home.php:
<?php
// If the user is logged in
$getposts = mysql_query("SELECT * FROM posts WHERE user_posted_to='$user' ORDER BY id DESC LIMIT 10") or die(mysql_error());
while ($row = mysql_fetch_assoc($getposts)) {
$id = $row['id'];
$body = $row['body'];
$date_added = $row['date_added'];
$added_by = $row['added_by'];
$user_posted_to = $row['user_posted_to'];
$get_user_info = mysql_query("SELECT * FROM users WHERE username='$added_by'");
$get_info = mysql_fetch_assoc($get_user_info);
$profilepic_info = $get_info['profile_pic'];
if ($profilepic_info == "") {
$profilepic_info = "./img/default_pic.png";
}
else
{
$profilepic_info = "./userdata/profile_pics/".$profilepic_info;
}
?>
<script language="javascript">
function toggle<?php echo $id; ?>() {
var ele = document.getElementById("toggleComment<?php echo $id; ?>");
var text = document.getElementById("displayText<?php echo $id; ?>");
if (ele.style.display == "block") {
ele.style.display = "none";
}
else
{
ele.style.display = "block";
}
}
</script>
<?php
echo "
<br />
<div class='newsFeedPost'>
<div class='newsFeedPostOptions'>
<a href='javascript:;' onClick='javascript:toggle$id()'>Show Comments</a>
<div style='float: left;'>
<a href='$added_by'><img src='$profilepic_info' height='60' /></a>
</div>
<div class='posted_by'><a href='$added_by'>$added_by</a> wrote:</div>
<br /><br />
<div style='max-width: 600px; height: auto;'>
$body<br /><br /><br /><p />
</div>
Like – Re-Shout! – Comment
<br /><iframe src='./comment_frame.php?id=$id' frameborder='0' style='max-height: 200px; width: 100%; min-height: 10px;'></iframe>
</div>
</div>
";
}
}
?>
As you can see it shows the comment_frame.php page by using an iframe. I would like all of that code to be in a single page. How would I do that?
put ur home.php code in else condition if user adding new comment the first condition will work otherwise second one
if (isset($_POST['postComment' . $getid . ''])) {
your code here
}else {
// home.php code herer
}
I have this script:
<?php
header("refresh: 5;");
include 'theme.php';
ceklogin();
css();
echo <<<HTML
<script type="text/javascript">
var textarea = document.getElementById(\"wget\");
textarea.scrollTop = textarea.scrollHeight;
</script>
HTML;
echo " Wget log :<br>";
echo "<textarea name=\"text-info\" rows=\"30\" id=\"wget\" cols=\"90\" readonly style=\"font-family: Arial;font-size: 7pt;\" >";
$datalines = file ("wget.log");
foreach ($datalines as $zz) {
echo $zz; }
echo "</textarea></div>";
foot();
echo '
</div>
</body>
</div>
</html>';
?>
the javascript part doesn't work, it won't scrool to bottom on the textarea every time it refreshes the page, any ideas?
Update: I modified my script to be like this but still doesn't work
<?php
header("refresh: 5;");
include 'theme.php';
ceklogin();
css();
echo '<script type="text/javascript">
var textarea = document.getElementById(\"wget\");
textarea.scrollTop = textarea.scrollHeight;
</script>';
echo " Wget log :<br>";
echo "<textarea name=\"text-info\" rows=\"30\" id=\"wget\" cols=\"90\" readonly style=\"font-family: Arial;font-size: 7pt;\" >";
$file = file_get_contents('/www/wget.log');
echo $file;
echo "</textarea></div>";
foot();
echo '
</div>
</body>
</div>
</html>';
?>
Try:
echo '<script type="text/javascript">
var textarea = document.getElementById(\"wget\");
textarea.scrollTop = textarea.scrollHeight;
</script>';
(Removed the <<<HTML and reformatted the HTML string.)
You could try moving your Javascript to the bottom of the body and putting this in a function:
(function() {
var textarea = document.getElementById(\"wget\");
textarea.scrollTop = textarea.scrollHeight;
})();