簡體   English   中英

顯示onclick函數后從數據庫檢索的推文

[英]Display tweets retrieved from database after onclick function

我正在為我的應用程序使用JavaScript,PHP和HTML。 我有一個包含推文的SQL數據庫。 單擊關鍵字(連接到超級樹)后,我需要從數據庫查詢並顯示推文。 我已經研究並嘗試在index.php的myFunction()內部包含一個外部php文件(generatetweets.php)。 但是,它不起作用。 任何人都可以啟發我或為我提供任何參考指導? 先感謝您。

提取example2.js,其中child.name引用超級樹中的關鍵字

onComplete: function(){
        //Log.write("done");

        //Make the relations list shown in the right column.
        //ONCLICK FUNCTION FOR KEYWORDS TO LOAD RELATED TWEETS
        var node = ht.graph.getClosestNodeToOrigin("current");
        var html = "<div><b>Keyword: " + node.name + "</b></div>";
        html += "<ul>";
        node.eachAdjacency(function(adj){
            var child = adj.nodeTo;
            var childName=child.name;
            html += '<a onClick="myFunction('+'&#39;'+child.name+'&#39;'+')"><li>'+child.name + '</li></a>';

        });
        html += "</ul><br />";
        $jit.id('inner-details').innerHTML = html;
    }

generatetweets.php

<?php
// connect to the database
include "mysqli.connect.php";

// create your SQL statment to retrieve everything from
// the users table
$sql = "SELECT * FROM post WHERE content LIKE '%school%' ORDER BY date DESC";

// run the query
$result = $mysqli->query($sql);

// check for error
if ($mysqli->errno)
{
  error_log($mysqli->error);
  echo "<br />Something's wrong";
  exit();
}


?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
</head>
<body>
    <?php
        // Check if there are records in the first place
            if ($result->num_rows < 1)
                {
                    echo "<h3>No records found</h3>";
                }


            // Iterate through the records
            $counter = 0;
            // Use fetch_array to get rows returned one at a time
            while($row = $result->fetch_array(MYSQLI_ASSOC))
                {
    ?>  
                <table>
                    <tr id="tweetlist">
                        <td style="width:50px">
                            <!-- name goes here -->
                            <!--<img id="img<?=$counter?>" style="padding-right:5px" src="<?=$row["displaypicture"]?>"></img>-->

                        </td>
                        <td>
                            <!-- email textfield goes here -->
                            <span id="date<?=$counter?>" style="color:#CCFF33">[<?=$row["date"]?>] </span>
                            <span id="name<?=$counter?>">@<?=$row["username"]?>: </span>
                            <span id="emailTxt<?=$counter?>"><?=$row["content"]?> <span/>
                        </td>
                    </tr>
                </table>
                <br/>
                <?php
                    $counter++;
                }
                    $result->free();
                    $mysqli->close();
                ?>

</body>

提取index.php,以在div“演示”中顯示推文

<body onload="init();">

<!-- Header -->
<div id="header" class="container">

    <!-- Logo -->
    <h1 id="logo"><a href="index.php">Mood</a></h1>  <!-- logo from style-n1.css -->

    <div id="center-container">
        <div id="infovis"></div>    
    </div>

    <div id="right-container">
        <div id="inner-details"></div>
        <div id="log"></div>
        <div id="node_name"></div>  
        <div id="demo" style="padding-left: 50px">

            <script type="text/javascript">
                function myFunction() {

                    $("#demo").load("generatetweets.php");  

                }
            </script>
        </div>
    </div>
</div>

</body>

可從http://philogb.github.io/jit/static/v20/Jit/Examples/Hypertree/example2.html引用超樹

I obtained tweets using nodejs and append it to div. Here is my code. 
<!DOCTYPE html>
<html>
<head>  
</head>

<body>

    <form>
     #<input type="text" id="tag" class="hash"/>
     <button>submit</button>
 </form>
 <div id="tweets"></div>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script src="/socket.io/socket.io.js"> </script>
 <script>
 var socket = io.connect("link to nodejs");
 var link;
 var tag;
 var a;

 function debounce(func, wait, immediate){

    var timeout;
    return function(){

        clearTimeout(timeout);

        timeout = setTimeout(function() {
            timeout = null;
            if (!immediate) func.apply();
        }, wait);
        if (immediate && !timeout) func.apply();
    };
};

var func = debounce(function(){
    $('#tweet').html("");
    socket.emit('message', $('#tag').val());
    tag=$('#tag').val();
    link="http://twitter.com/hashtag/"+tag;
    a="<a href="+'link'+" target='_blank'> #"+tag+"</a>";
},1000);

$('.hash').keypress(func);

$('.hash').on('change',function(){
    $('#tweet').html("");
    socket.emit('message', $('#tag').val());
    tag=$('#tag').val();
    link="http://twitter.com/hashtag/"+tag;
    a="<a href="+'link'+" target='_blank'> #"+tag+"</a>";
});



socket.on('message', function(msg){
    console.log(msg.length);

    $('#tag').val('');
    var regex = /(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/ig ;
    var hashregex= /(#[a-z0-9][a-z0-9\-_]*)/ig;
    console.log(link);

    for(var i = 0; i < msg.length; i++){
        msg[i].tweettext=msg[i].tweettext.replace(hashregex,a);
        msg[i].tweettext=msg[i].tweettext.replace(regex, "<a href='$1' target='_blank'>$1</a>");

        $('#tweets').after('<div>UserName: ' + msg[i].username+ '</div>');
        $('#tweets').after('<div>Text: ' + msg[i].tweettext+ '</div>');   
        $('#tweets').after('<div>Time: ' + msg[i].timedate+ '</div>');
        $('#tweets').after('<br></br>');
    }
});

</script>

</body>
<html>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM