The link to my another webpage is not working
Question
I was trying to use the Twitter API for PHP and created a part where user can get to know suggested persons whom to follow...
This is my source code for the file getSuggestionSlug.php :
<?php
include "methods.php";
oauthVerify();
if(isset($_GET["slug"]) && !empty($_GET["slug"]))
{
$return = (array) getSuggestionSlug($_GET["slug"]);
}
else
{
header("Location: getSuggestion.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Twitter Analytics</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootswatch.com/paper/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.showcase
{
}
.showcase a
{
text-decoration: none !important;
}
.showcase:hover
{
background-color: #ededed;
box-shadow: 0 0 20px #ddd;
border-radius: 5px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<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="index.php">Twitter Analyzer</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li><a href="sentimentAnalysis.php">Sentiment Analyzer<span class="sr-only">(current)</span></a></li>
<li><a href="keywordLitics.php">Keyword Analytics</a></li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">More <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="makeFriend.php">Make Friends</a> </li>
<li class="active"><a href="getSuggestion.php">Get suggestions whom to make Friends</a></li>
<li class="disabled"><a href="#">Coming Soon...</a></li>
<li><a href="logout.php">Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<?php
$i = 0;
foreach($return["users"] as $user)
{
if($i >= 12)
{
break;
}
echo "<div class='showcase col-md-3' id='{$user->screen_name}' data-name=\"{$user->name}\" style='margin-left: 100px; margin-top: 5%; height: 150px; text-align: center; vertical-align: middle; font-size: large; cursor: pointer; padding: 1%;' onmouseover='showControls( \"{$user->name}\", \"{$user->screen_name}\" );'>" . $user->name . "</div>";
$i = $i + 1;
}
?>
<script src="script.js"></script>
<script>
$(".showcase").on("mouseleave", function(){$(".showcase").attr("style", "margin-left: 100px; margin-top: 5%; height: 150px; text-align: center; vertical-align: middle; font-size: large; cursor: pointer; padding: 1%;"); $("button").remove();});
</script>
</body>
</html>
The live example can be found in my website here .
While my script.js cut down to the relevant part is something as follows:
var showControls = function(name, screen_name){
console.log(name + " " + screen_name);
$("#" + screen_name).attr("style", "margin-left: 100px; margin-top: 5%; height: 150px; font-size: large; cursor: pointer; padding: 1%;");
$("#" + screen_name).html(name + "<br /><br /><a href='userShow.php?screen_name=" + screen_name + "'><button class='btn btn-primary'>Get Details</button></a> <a href='makeFriend.php?screen_name=" + screen_name + "'><button class='btn btn-primary'>Make Friend</button></a>")
};
My problem is that the button which appears on hovering over the boxes does not open any link, which I specifically addressed using the <a> tag, and I also tried using window.location which also results the same.
Any ideas on why it is happening and how could I solve it??
1 answers
solution1
0 2015-10-19 20:17:51
It has to do with the the fact that function showControls is being called multiple times as you are mousing over the button. And every time you do, it destroys and recreates the button.
As an example try this. It only creates the controls the first time. In this case it works (once anyways).
var first = true;
var showControls = function(name, screen_name){
if(first) {
first = false;
console.log(name + " " + screen_name);
$("#" + screen_name).attr("style", "margin-left: 100px; margin-top: 5%; height: 150px; font-size: large; cursor: pointer; padding: 1%;");
$("#" + screen_name).html(name + "<br /><br /><a href='userShow.php?screen_name=" + screen_name + "'><button class='btn btn-primary'>Get Details</button></a> <a href='makeFriend.php?screen_name=" + screen_name + "'><button class='btn btn-primary'>Make Friend</button></a>")
}
};
Maybe a solution would be to keep a record of the controls that already exist and then only create them if they don't already.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.