Create Dynamic links and onClick via php and array data

Question

Background: I have 10 html rows I am creating via a php loop each of the rows will have a "more info" link. I am parsing JSON data into the html as well. My question is for the more info links they need to trigger a javascript function and pass variables that are associated with each specific row.

Question: Does it make more sense to add the onClick for each more info link like so (EXAMPLE 1):

<a href="#" onclick="return myFunction('123', 'food');">More Info</a>

or can I write on javascript eventlistener that will fire for each more info link and some how I would pass my variables? (EXAMPLE 2)

<a href="#" id="link_1">Click me</a>

$("#link_1").on('click', function() {

});

Below is my PHP that creates the rows and the links.

      $json = json_decode($data, true);

        $cleanHTML = "";

        foreach($json['restaurants'] as $val){

        $id = $val['restaurant']['id'];
        $sectionType = "food";

        $cleanHTML .= "<div data-content>
                            <article>
                                <div class='grid-container'>
                                      <div class='MainTitle'>". $val['restaurant']['name'] ."</div>";


    //THIS IS WHERE I NEED TO CREATE THE MORE INFO LINK
                $cleanHTML .= "<div class='VenueDescription'>";

                                     if(SwpmMemberUtils::is_member_logged_in()) {
        //THIS IS EXAMPLE ONE ABOVE:
$cleanHTML .=  "<a href='#' onclick="return myFunction('". $id ."', '". $sectionType ."');">More Info</a>";

        //OR THIS IS A TRY AT EXAMPLE TWO ABOVE:
$cleanHTML .=  "<a href='#' id='". $id ."'>More Info</a>";

                                            } else {


                                         $cleanHTML .=  "Click Here to Become a Member!";


                                            }
                $cleanHTML .=" </div>
                                      </div>
                                  </article>
                      </div>";

for you ex2: You can use data properties. <a data-123="123" data-food="qweqwe" /> and get them in the javascript using $(this).data('123') ? — Rooshan Akthar
– Rooshan Akthar, Commented Oct 16, 2019 at 2:56
Thanks @RooshanAkthar that was the piece I was missing. Does either example have a downside or a reason not to use it in one of the above ways? — Denoteone
– Denoteone, Commented Oct 16, 2019 at 4:05
First example too much repetition. Imagine a situation you want to add one more argument you might have to change in few places. 2nd one has the entire freedom on adding any events in the future without changing the html. — Rooshan Akthar
– Rooshan Akthar, Commented Oct 16, 2019 at 4:10
@RooshanAkthar if you want to post that as an answer that is the info I was looking for. You make a good point. Example two was the way I wanted to to get it working. Example 1 seemed like it was taking the long way. Thanks! — Denoteone
– Denoteone, Commented Oct 16, 2019 at 4:12

Rooshan Akthar · Accepted Answer · 2019-10-16 04:50:31Z

1

Example two is the way to go as example one lacks future-proofing to an extent. Imagine a situation where you have to add more arguments or changes which needs to be addressed in several places.

For the arguments on example two you can use data attributes. <a data-123="123" data-food="qweqwe" /> and access them using appropriate data methods. For example in jQuery $(this).data('food')

answered Oct 16, 2019 at 4:50

Rooshan Akthar

3915 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Create Dynamic links and onClick via php and array data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related