Hi all,
I'm working on a little project that gives you synonyms for your sentence that uses Twitter Bootstrap. Everything is working all right, but I can't seem to change elements within the Popover! What's odd, however, is that when I used jQuery.length on the desired element, it told me the correct number. Here is my code (I know it's probably inefficient):
index.php:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/resources/includes/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/resources/includes/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/resources/includes/bootstrap/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="/resources/includes/bootstrap/js/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="/resources/includes/bootstrap/js/bootstrap-popover.js"></script>
<script type="text/javascript" src="/resources/includes/bootstrap/js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
var words = new Array();
$(document).ready(function () {
$(".helper").hide();
$("#submit").on ({
click:function () {
if ($(this).text() == "Generate!") {
$("#output").hide(1000);
$("#clear").hide(500);
$(this).addClass("disabled");
$(this).text("Working...");
$("#syn").hide(500, function() {
$.post("/portfolio/syn/syn.php", { sentence:$("#syn").val() }, function (data) {
$("#output").html(data);
$("#output").show(700, function () {
$(".submit").removeClass("disabled");
$(".submit").text("Reenter");
});
});
});
}
else {
$("#output").hide(1000, function() {
$(".submit").text("Generate!");
$("#clear").show(500);
$("#syn").show(500);
});
}
}
})
$("#clear").on ({
click:function() {
$("#syn").val("");
}
})
});
</script>
</head>
<body>
<div id="container-fluid">
<textarea id="syn" rows="7" class="input-xxlarge"></textarea>
<div id="output"></div>
<br />
<button class="btn btn-large" type="button" id="clear">Clear</button>
<button class="btn btn-large" type="button" data-target="#help" data-toggle="modal">Help</button>
<div class="modal hide fade in" id="help" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<h3 id="myModalLabel">Help</h3>
</div>
<div class="modal-body">
<p>This is the help.</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<button class="btn btn-large btn-primary submit" type="button" id="submit">Generate!</button>
<br />
<br />
</div>
</body>
</html>
syn.php:
<script type="text/javascript">
$(document).ready(function () {
var clicked = false;
$(".helper").hide();
$(".word").each(function () {
$(this).popover({content:$(".helper." + $(this).data("word")).html(), html:true, placement:"bottom"});
});
// this line isn't working!
$(".replaced").click(function() {
alert("Yeah!");
});
});
</script>
<?php
$sentence = sanitize($_POST["sentence"]);
$words = explode(" ", $sentence);
foreach ($words as $word)
{
$test = @json_decode(file_get_contents("http://words.bighugelabs.com/api/2/d30d1afd53590710f2a092db0022068f/$word/json"), true);
if ($test != FALSE)
echo "<button class=\"word btn btn-warning btn-large $word\" data-word=\"$word\" type=\"button\" data-original-title=\"Words Found\">$word</button>";
else echo "<button class=\"word btn btn-warning disabled btn-large $word\" type=\"button\">$word</button>";
echo " ";
if ($test != FALSE)
{
echo "<span class=\"helper $word\">";
echo "<span class=\"overflow\" style=\"overflow:hidden;width:30px;\">";
if (!empty($test["noun"]["syn"]))
{
foreach ($test["noun"]["syn"] as $key)
echo "<button class=\"replaced btn btn-primary $key\" type=\"button\"> $key <br /> </button> <br />";
}
if (!empty($test["verb"]["syn"]))
{
foreach ($test["verb"]["syn"] as $key)
echo "<button class=\"replaced btn btn-primary $key\" type=\"button\"> $key <br /> </button> <br />";
}
if (!empty($test["adjective"]["syn"]))
{
foreach ($test["adjective"]["syn"] as $key)
echo "<button class=\"replaced btn btn-primary $key\" type=\"button\"> $key <br /> </button> <br />";
}
echo "</span>";
echo "</span>";
}
}
function sanitize($sentence)
{
$sentence = strip_tags($sentence);
$sentence = htmlentities($sentence);
$sentence = preg_replace("!\s+!", " ", $sentence);
$sentence = trim($sentence);
return $sentence;
}
?>
I have commented the line that isn't working. Help will be HUGELY appreciated.
