Zero23ku Zero23ku - 3 years ago 62
jQuery Question

How to "highlight" a div based on a query result?

I'm developing a little aplication for a game.
The application consist in showing where is a given monster. I have a database with monster, maps and maps where monsters belong.

Right now the application is almost working, if a user write "Poring" for example, a list in html will appear with map name and map id.

Anyway, I also have a grid with the whole world of the game, every square in the grid is a map, and each grid have an specific id.

So, lets say I'm looking for "Poring" in the application.

Right now it will show the following list:

map: Prontera Field 07 map_id: prt_fild07
map: Prontera Field 08 map_id: prt_fild08


but what I want is not to show that list, but highlight the divs (or add any kind of CSS) to the divs with id="prt_fild07" and id="prt_fild08".

I know I need to use AJAX but I'm not sure how, since I'm learning JQuery but anyway, right now I'm using AJAX to display the list.

Here's the JQuery code:

$('#ro-form').submit(function(e){
e.preventDefault(); //Prevent default submission

$.ajax({
url: 'files/php/process.php',
type: 'POST',
data: $(this).serialize(), //serielize form data
dataType: 'html'
})
.done(function(data){
$('#test').fadeOut('slow',function(){
$('#test').fadeIn('slow').html(data);
});
})
.fail(function(){
alert(':(');
});


});


and here is the php part

<?php

include 'connection.php';

if( $_POST ){
$mob_id_name = $_POST['mob_id_name'];
}

$sql = "select restartmap.map.map_name, restartmap.map.map_id
from restartmap.map, restartmap.map_monster, restartmap.monster
where restartmap.map.map_id = restartmap.map_monster.map_monster_map_id and
restartmap.monster.monster_id = restartmap.map_monster.map_monster_monster_id and
(restartmap.monster.monster_id = '$mob_id_name'
or restartmap.monster.monster_name like '$mob_id_name')";
$result = $conn->query($sql);

$conn->close();
?>


<div id="result-container">
<?php
if($result->num_rows > 0 ){
while($row = $result->fetch_assoc()){
print "map: " . $row["map_name"] . " map_id: " .$row["map_id"] . "<br>";
}
}else{
print "<p> nothing :( </p>";
}


?>
</div>


Basically what I'm doing is sending from index.php the information to process.php via AJAX and then printing the whole $result var in index.php but what I really want to do is to highlight the divs with the same id as map_id.

Answer Source

You could change your jQuery code to accept json as the dataType, like so, than in the PHP use parse_str to parse out the posted serialized data into an array that you can work with, than just build an array that will be returned to the parameter in the .done jquery ajax function. Am using $return in php below, than just json_encode this value so that it can be used.

Something like the following below should work nicely. But you didn't specify what you want inside of those divs, so I just put Put something in here text in place of whatever you need in there.

jQuery:

$('#ro-form').submit(function(e){
    e.preventDefault(); //Prevent default submission

    var $parentDiv = $('<div />').attr('id', 'result-container');

    $.ajax({
        url: 'files/php/process.php',
        type: 'POST',
        data: {
            formData: $(this).serialize()
        },
        dataType: 'json'
    })
    .done(function(data){

        if (data.hasOwnProperty('msgids'))
        {
            for(var x = 0, len = data['msgids'].length; x < len; x++)
            {
                var $div = $('<div />').attr('id', data['msgids'][x]).text('Put something in here');
                $div.appendTo($parentDiv);
            }
            $('body').append($parentDiv);
        }
    })
    .fail(function(){
        alert(':(');
    });


});

php:

<?php

    $return = array();

    include 'connection.php';

    if(!empty($_POST['formData']))
    {
        parse_str($_POST['formData'], $data);

        $mob_id_name = $data['mob_id_name'];

        $sql = "select  restartmap.map.map_name, restartmap.map.map_id
            from    restartmap.map, restartmap.map_monster, restartmap.monster
            where   restartmap.map.map_id = restartmap.map_monster.map_monster_map_id and
                    restartmap.monster.monster_id = restartmap.map_monster.map_monster_monster_id and
                    (restartmap.monster.monster_id = '$mob_id_name' 
                    or restartmap.monster.monster_name like '$mob_id_name')";
        $result = $conn->query($sql);

        $conn->close();

        if ($result->num_rows > 0)
        {
            while($row = $result->fetch_assoc()){
                $return['msgids'][] = $row['map_id'];
            }
        }

    }

    echo json_encode($return);
    die();

?>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download