1,105,578 Community Members

Can't change items within Bootstrap Popover

Member Avatar
HelloJarvis
Light Poster
35 posts since Sep 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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 "&nbsp;";

        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.

Member Avatar
AleMonteiro
Master Poster
758 posts since Aug 2010
Reputation Points: 115 [?]
Q&As Helped to Solve: 143 [?]
Skill Endorsements: 29 [?]
 
0
 

Try using live:

 $(".replaced").live("click", function() {

    alert("Yeah!");

 });

Using 'click' will only attach handlers to existing objects. Using 'live' it'll attach the handlers to any existing object and also for objects created latter.

Member Avatar
HelloJarvis
Light Poster
35 posts since Sep 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

This works, thanks!

Question Answered as of 1 Year Ago by AleMonteiro
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: