How can I run a function on page load and then after click?

Question

hi this is my very first time using jquery on any project at all. I am needing a little help if someone can

on my page i have some code to load a json file this file contains menu details for the main menu such as

name / action / poster

this is my code

var Items = "";
var flixAPI = "https://example.com/api.php?action=MAIN";

$.getJSON(flixAPI, function (data) {

    $.each(data, function (i, item) {
        Items += "<div class='img'>";
        Items += "<a target='_blank' href='" + item.ACTION + "'>";
        Items += "<img src='"+ item.POSTER +"' alt='" + item.NAME + "'>";
        Items += "</a>";
        Items += "<div class='desc'>" + item.NAME.substr(0, 16) + "</div>";
        Items += "</div>";
    });

    $('#content').html(Items);

});

i can get this code working when i place it into the document ready.

my issue is after the main menu is populated and added to the page i then need to stop the page redirecting when a href link is clicked and get the value of the href link to then send another get json request to load the next page

i have tried loading the main menu on the document ready and then sticking one call into a .click binding to load the next set of items based on the href link clicked but when i try do this inside or outside the document ready the .click binded function wont work

Put the code in a named function that takes `flixAPI` as a parameter. Call it during document ready and from the click handler. — Barmar, Jan 23 '20 at 21:58
@barmar would you have a small example of this that i can take a satb at am more of a visual learner but as its my first time using jquery i have no idea what to even search for to find out this kind of thing — Dude2019, Jan 23 '20 at 22:00

Barmar · Accepted Answer · 2020-01-23T22:35:34.663

2

Put the code in a named function so you can call it from both places.

function getFlix(flixAPI) {
  var Items = "";

  $.getJSON(flixAPI, function(data) {
    $.each(data, function(i, item) {
      Items += "<div class='img'>";
      Items += "<a class='menu-link' target='_blank' href='" + item.ACTION + "'>";
      Items += "<img src='" + item.POSTER + "' alt='" + item.NAME + "'>";
      Items += "</a>";
      Items += "<div class='desc'>" + item.NAME.substr(0, 16) + "</div>";
      Items += "</div>";
    });
    $('#content').html(Items);
  });
}

$(document).ready(function() {
  getFlix("https://example.com/api.php?action=MAIN");
  $("#content").on("click", ".menu-link", function(e) {
    e.preventDefault();
    getFlix(this.href);
  });
});

This uses event delegation because the menu links are added dynamically. See Event binding on dynamically created elements?

edited Jan 23 '20 at 22:35

answered Jan 23 '20 at 22:01

Barmar

741,623
53
500
612

thanks you will give this a try and see how it gets on i can get the href of my main menu items no problem after it loads my issue has just been after the main menu loads and i click on an item my on click binding is never called i tried it inside the document.ready and outside of it and still didint fire i will try your code and see how it works – Dude2019 Jan 23 '20 at 22:04
I just realized that and updated the answer to show how to do it with dynamic links. – Barmar Jan 23 '20 at 22:05
This does not seem to be working :( let me see if i can create an example on jsfiddle – Dude2019 Jan 23 '20 at 22:34
I had a typo in `preventDefault`. Didn't you get an error messge saying the function doesn't exist? – Barmar Jan 23 '20 at 22:36
Nope i am editing file my self in ftp client that saves it directly to server and then testing the page in Opera browser after changing the code to correct spelling the action of stopping it navigating to a new tab is working so i know the code is good now my ownly issue i think is getting the href of the eliment in the page i clicked i have the currently to grab the href for the eliment var Action = $(this).find('a:first').attr('href'); – Dude2019 Jan 23 '20 at 22:39
`this.href` should be the href of the element you clicked on. – Barmar Jan 23 '20 at 22:40
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/206540/discussion-between-dude2019-and-barmar). – Dude2019 Jan 23 '20 at 22:44

score -1 · Answer 2 · answered Jan 23 '20 at 21:59

You would need to identify the menu items with either classes or id's.

Then you would have to define the onClick event for each one of those who you need to fetch the JSON for.

ON the onClick event, you need to use e.stoppropagation or e.preventdefault (check the usage online) and then use ajax to fetch the JSON and populate whatever you are populating.

How can I run a function on page load and then after click?

2 Answers2