Hide certain result based on db with jquery and ajax

Question

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:

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

could you clarify what you mean by "which will return the img name (22287895.jpg) and and then the jquery function will hide image that have the "imgname"(22287895.jpg) in it?" — Joe Warner
– Joe Warner, Commented Mar 12, 2018 at 13:46
What event will trigger the AJAX? i think if you want to hide an image on some event(s) then you can do it even without AJAX. — Sunny Soni
– Sunny Soni, Commented Mar 12, 2018 at 13:55
Simply put, yes it is possible... what have you tried so far. — Peter M
– Peter M, Commented Mar 12, 2018 at 13:57
You know to do queries and process the result ? You could have a button to do the request ( not an ajax ) and the request would be a little bit different. Don't query for something1 and fetch his image name, but query for name different from something1 so you will get all the images without something1. And you will display the result in a GET request. — Răducanu Ionuţ
– Răducanu Ionuţ, Commented Mar 12, 2018 at 14:28

SaschaM78 · Accepted Answer · 2018-03-13 10:57:42Z

2

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"));

edited Mar 13, 2018 at 10:57

SaschaM78

4,5074 gold badges36 silver badges46 bronze badges

answered Mar 12, 2018 at 13:58

Oli Crt

1,2031 gold badge12 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Július Ľuptovec Over a year ago

how i do that request ? :D

Oli Crt Over a year ago

@JúliusĽuptovec check this api.jquery.com/jquery.get . Then tell me if you still have trouble and I'll edit my answer with this part.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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();
    });
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 12, 2018 at 14:45

Sunny Soni

1722 silver badges11 bronze badges

1 Comment

Július Ľuptovec Over a year ago

for certain reasons it is not possible(in my case) to foreach results :/ i posted just a example. real problem is kinda more complicated

Collectives™ on Stack Overflow

Hide certain result based on db with jquery and ajax

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related