CODEWITHSUNDEEP
phpjqueryajax
Luke Litherland
Luke Litherland

Reputation: 227

JQuery - AJAX - How to get Data and Assign to a Div

I have a table with 3 columns (NoteID, NoteName, Note)

I essentially need to get NoteID from my php file named connectionDetails which contains the Query in it.

I currently have:

<div class="main-container-notes">
    <div id="left-box">
        <?php 

        echo "<div style='width: 100%;'>";

        while( $noteName = sqlsrv_fetch_array( $resultNotes, SQLSRV_FETCH_ASSOC)) 
        {
            echo "<div class='hvr-bounce-to-right1 hover-cursor' style='width: 100%; border-right: 5px solid #00AA88; height: 50px;' id='output'>" . $noteName['NoteName'] . "</div>";
        }

        echo "</div>";
        ?>
    </div>
    <div id="right-box">



    </div>
</div>

Each of these also needs NoteID and i need AJAX because when i click on one of these Divs the <div id="right-box"> will display the text from the "Note" field of the table without refreshing the page.

please see my site to see what i mean

What is the best way to assign "NoteID" column respectively to each row that comes through.

Here is the connectionDetails.php script:

<?php
$myServer = "blank";
$connectionInfo = array('Database' => 'blank', 'UID' => 'blank', 'PWD' => 'blank');

//connection to the database
$conn = sqlsrv_connect($myServer, $connectionInfo)
  or die("Couldn't connect to SQL Server on $myServer");

//Test connection to server
// if ($conn)
// {
//     echo "connection successful";    # code...
// }

//Defining my queries
$getNotes = "SELECT NoteID, NoteName, Note FROM Notes";
$getTemplateNotes = "SELECT TemplateNoteID, TemplateNoteName, TemplateNote FROM TemplateNotes";
$getReplaceVariables = "SELECT ReplaceVariableID, ReplaceVariableName, ReplaceVariableNote FROM ReplaceVariables";
$showNoteInfo = "SELECT Note FROM Notes WHERE NoteID = '" . isset($_POST['noteid']) . "'";

$resultNotes = sqlsrv_query( $conn, $getNotes );
$resultTemplate = sqlsrv_query($conn, $getTemplateNotes);
$resultVariables = sqlsrv_query($conn, $getReplaceVariables);
$showNotes = sqlsrv_query($conn, $showNoteInfo);

if( $resultNotes === false)
{
    die( print_r( sqlsrv_errors(), true) );
}
if( $resultTemplate === false)
{
    die( print_r( sqlsrv_errors(), true) );
}

if( $resultVariables === false)
{
    die( print_r( sqlsrv_errors(), true) );
}

?>

Upvotes: 0

Views: 107

Answers (1)

Barmar
Barmar

Reputation: 780714

Put NoteID into a data-nodeid attribute of the DIV. Then when you click on it, you can use $(this).data("noteid") to get the ID, and send it in the AJAX call.

Also, you can't use `id='output' here, because you're creating duplicate IDs on each row. You should use a class instead of ID.

So the PHP looks like:

while( $noteName = sqlsrv_fetch_array( $resultNotes, SQLSRV_FETCH_ASSOC)) 
    {
        echo "<div class='hvr-bounce-to-right1 hover-cursor output' data-noteid='{$noteName['noteID']}' style='width: 100%; border-right: 5px solid #00AA88; height: 50px;'>" . $noteName['NoteName'] . "</div>";
    }

And the Javascript would be something like:

$(".output").click(function() {
    var noteid = $(this).data("noteid");
    $("#right-box").load("connectionDetails.php", { noteid: noteid });
});

This query in your script is wrong:

$showNoteInfo = "SELECT Note FROM Notes WHERE NoteID = '" . isset($_POST['noteid']) . "'";

isset() just returns TRUE or FALSE, not the value of the variable. You should wrap an if around the entire code:

if (isset($_POST['noteid']) {
    $showNoteInfo = "SELECT Note FROM Notes WHERE NoteID = '" . $_POST['noteid'] . "'";
    $showNotes = sqlsrv_query($conn, $showNoteInfo);
    if ($showNotes) {
        $row = sqlsrv_fetch_array($showNotes, SQLSRV_FETCH_ASSOC);
        echo $row['Note'];
    } else {
        die (sqlsrv_errors());
    }
}

You never echoed the result of the query in your server script.

Upvotes: 1

Related Questions