Click here to Skip to main content
15,886,806 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm building a business listing website, and fetching all data from a database. The problem was that if I wrote a function for all the boxes uniformly, only the first one with the specified id would work. So I got the code below to do the work.


<?php
    if(is_array($fetchData)){      
    $sn=1;
    foreach($fetchData as $data){
?>

<div class="content">

    
<div id= <?php echo $data['id']??''; ?> class="business" style="border: 1px solid rgb(0, 0, 0);height: 100px;width: 400px;padding: 2px;overflow: hidden;">
    <container class="boxholder1">

    <div class="box1">
        <div id="titleLine">
            <p><img class="brandlogo" src="image/logo.png" alt=""</p>
            <p class="brandname"><?php echo $data['businessname']??''; ?></p>
        </div>
            )            
    <div id="datas"><div id="list">
        <p>County:<?php echo $data['county']??''; ?></p>
        <p>CITY: <?php echo $data['city']??''; ?></p>
        <p>Phone: <?php echo $data['phone']??''; ?></p>
        <p>EMAIL: <?php echo $data['email']??''; ?></p>
    </div>
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
    <script>

        $("#<?php echo $data['id']??''; ?>").click(function(){
        if($("#<?php echo $data['id']??''; ?>").css('height') === "500px")
            $("#<?php echo $data['id']??''; ?>").css('height', '100px');
        else
            $("#<?php echo $data['id']??''; ?>").css('height', '500px');
        })
        $("#<?php echo $data['id']??''; ?>").click(function(){
        if($("#<?php echo $data['id']??''; ?>").css('width') === "800px")
            $("#<?php echo $data['id']??''; ?>").css('width', '400px');
        else
            $("#<?php echo $data['id']??''; ?>").css('width', '800px');
        })
        
    </script> 

    </div>
    <?php
    $sn++;}}else{ ?>
<?php
}?>



Surprisingly, it works perfectly for its purpose the boxes get displayed as I wanted, and the function works well too for each one of them. But now I want to filter the boxes by e.g location etc. and can't really get a solution for that.

I tried multiple ways for the filtering, but nothing really works, cause I can't reference all the boxes. That's why I need a simpler solution for displaying them or a working solution for the filtering, I'd preferably keep the same concept with the expandable boxes. Any idea is highly appreciated!


What I have tried:

I tried multiple ways for the filtering, but nothing really works, cause I can't reference all the boxes. That's why I need a simpler solution for displaying them or a working solution for the filtering, I'd preferably keep the same concept with the expandable boxes. Any idea is highly appreciated!
Posted
Updated 26-Feb-23 3:33am
Comments
Member 15627495 26-Feb-23 4:57am    
hi !

to keep a simple 'display' build, remember that html is 'string', with php, you can 'concatenate' strings together, look at following :

global $full_output = ""; // as 'global' you can use the var where you want in the page

foreach($container as $item){
 $full_output .= "~the pattern . $item['the_value']. "<html_tag>" . of melt values in html~";
 // all made strings of values and html will add in $full_output.
}

echo $full_output ; // anywhere in your code page.



another comment about css purposes :

when you'll be at 'responsive design requirements' to fit all screens, you'll have a problem.
to fix size, height, width of all your html tags, prefer the vw, rem, em , and %
'px' are 'hard' once you change of 'screen size' because of fixed size.
really use vw, rem , em, and % before having 'display defaults'.
Member 15627495 26-Feb-23 5:05am    
another thing for the jquery and css changing.
- define two classes in css. one for small display, one for big display.
- you have in jquery 'addClass' / 'removeClass' in jquery

the you switch from one to the other when needed, by a shortest call.
I note the two 'if' are same.. a function can be written for this need.
Member 15627495 26-Feb-23 5:23am    
to have well done css :

- keep in mind the HTML structure is like a 'tree' : parents tags contains childs tags.
- know all 'selectors' they are great solutions. "A B", "A + B" , "A, B" , 'A > B' ( for #ids or/and .class, and native html tag too )
- control the writing of your css file by starting at 'body' tag, then the Childs and so again.

Css are 'sequential applied' from 'top' of your css file, to the 'bottom'.
write them the same way, from 'top' of html structure, to the deeper last level of html element.

all 'html tags' are nest in 'one another tag'. use that hierarchy to write effiscient CSS lines.
István Balogh 26-Feb-23 8:30am    
Thank you for your comments and your effort!!

1 solution

You might be interested in this free database schema designer and script generator:
dbDiffo[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900