CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
Július Ľuptovec
Július Ľuptovec

Reputation: 337

Hide certain result based on db with jquery and ajax

I have HTML list that looks like :

<ul>
  <li>something</li>
  <li>something1</li>
  <li>something2</li>
<ul>

<div class="randomwrapper">
   <img src="<?php echo $databaseresult[$i];?>">
   <img src="<?php echo $databaseresult[$i];?>">
   <img src="<?php echo $databaseresult[$i];?>"> // result looks like : ../assets/images/20584878157.jpg
</div>

then I have a table that looks like:

table:

is it possible to create jquery function with ajax that will send f.e.:"something1" to "process.php"(PHP file that I will create in order to process data) which will return the image name (22287895.jpg) and then the jquery function will hide any image that has the "imgname"(22287895.jpg) in it?

i'm able to create process.php but i have no skills with jquery and ajax. I don't even know if its possible.

Thank you for any possible help/references

Upvotes: 0

Views: 208

Answers (2)

Oli Crt
Oli Crt

Reputation: 1173

If I understood right you can do something like this:

function getImageName(name){
// do a request that will return the "imgname" from the "name"
}

function hideImage(src){
    let img = document.querySelector(`img[src=${src}]`);

    if(img !== null)
        img.style.display = 'none'; 
}

// then you can do
hideImage(getImage("something1"));

Upvotes: 2

Sunny Soni
Sunny Soni

Reputation: 182

No need of AJAX request, you have id in your DB and name (somethings) as well.

Make li's dynamic by fetching id, name from DB and then loop through results:

<ul class"somethings">
   <?php
   foreach ( $records as $rec ) {
        echo "<li data-recordid=\"{$rec['id']}\">{$rec['name']}</li>";
    }
    ?>
</ul>

data-recordid holds the data ID for each li.

On the image create a dynamic unique id by using id from DB like:

<img id="image-<?php echo $databaseresult['id'];?>" src="<?php echo $databaseresult['src'];?>">

I will also recommend to fetch all images from your DB

Rest is jQuery:

$(function(){ // checking for DOM to be ready
    $(".somethings li").click(function(){
        var recordid = $(this).data('recordid');
        $("#image-" + recordid).hide();
    });
});

Upvotes: 1

Related Questions