How to ignore javascript until button is click, then run

Question

I have been adding ticket sales to our home page but it has dramatically slowed down the site. We have about 1250 shows for this season and even though adding this to the home page sales has gone up but people are complaining about the speed.

Currently I'm using the javascript:showhide to hold the ticket purchase information in a hidden div that shows when you click buy tickets.

I would like to have it NOT run anything in the hidden div unless the buy tickets button is click. Then it would pull the ticketing information and populate the div.

We will have about 300 of the ticketing scripts on the page at one time like Show1-Oct, Show2-Oct, Show3-Oct, Show1-Nov, Show2-Nov, Show3-Nov and so on.

Any ideas or help is greatly appreciated.

<div class='topShow bg-Show-Main'>
  <a href='Show1.php'><img alt='Show1' title='Show1' src='images/show/Show1.jpg'>
    <p class='title'>Show1</p>
    <p>Opens October 30th</p>
  </a>
  <div class='btnContainer2'>
    <a class='btn1' style="text-align: left; width:49%; display: inline-block;" href='Show1.php'>More info</a>
    <a class='btn2 red' style="text-align: right; width:50%;  display: inline-block;" href="javascript:showhide('Show1-Oct')">Buy Tickets</a>
  </div>
  <div id="Show1-Oct" style="display:none;">
    <script type="text/javascript" src="http://website.com/booking/index.php?controller=FrontEnd&action=ActionLoad&theme=10&view=list&icons=T&cid=15&locale=1"></script>
  </div>
  <div class='clear'></div>
</div>
<div class='topShow bg-Show-Main'>
  <a href='Show2.php'><img alt='Show2' title='Show2' src='images/show/Show2.jpg'>
    <p class='title'>Show2</p>
    <p>Opens October 31st</p>
  </a>
  <div class='btnContainer2'>
    <a class='btn1' style="text-align: left; width:49%; display: inline-block;" href='Show2.php'>More info</a>
    <a class='btn2 red' style="text-align: right; width:50%;  display: inline-block;" href="javascript:showhide('Show2-Oct')">Buy Tickets</a>
  </div>
  <div id="Show2-Oct" style="display:none;">
    <script type="text/javascript" src="http://website.com/booking/index.php?controller=FrontEnd&action=ActionLoad&theme=10&view=list&icons=T&cid=16&locale=1"></script>
  </div>
  <div class='clear'></div>
</div>

So to make your site faster, you include a few thousand scripts? Sounds like a good plan.... And performance is not so bad because theres sth running, but because theirs sth loading. Split up your page in small chunks, and load just one chunk at a time. — Jonas Wilms
– Jonas Wilms, Commented Sep 13, 2017 at 15:34

Daniel Beck · Accepted Answer · 2017-09-13 16:19:30Z

1

Loading up a separate javascript file for each element on the page is a really bad idea.

A more sane design would be to have a single script that makes an ajax call for the necessary data for each listing when needed (when the user clicks that 'buy tickets' button) and injects it into the page. Something along these lines: (some extraneous HTML removed from your sample code, but you'll get the idea)

$('.btn2').on("click", function() {
  var myId = $(this).parent().next().attr("id"); // or store this as a data attribute on the button or somewhere else conveniently accessible
  console.log("Get data for ", myId);
  $.get("/whatever?id=" + myId, function(response) {
    // assuming that ajax call returns html, just inject it into the div:
    $('#" + myId').html(response);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='topShow bg-Show-Main'>
  <div class='btnContainer2'>
    <a href="#" class='btn2 red'>Buy Tickets</a>
  </div>
  <div id="Show1-Oct">
  </div>
  <div class='clear'></div>

  <div class='btnContainer2'>
    <a href="#" class='btn2 red'>Buy Tickets</a>
  </div>
  <div id="Show2-Oct">
  </div>
  <div class='clear'></div>

</div>

answered Sep 13, 2017 at 16:19

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

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

6 Comments

user1692716 Over a year ago

Sorry but Java is my weak point but I understand where your going with this and I think it will work for my speed problem but I can not seem to get it to work other then here. Even making a new php page and just a simple copy and past to the new page I can't get it to duplicate what it's doing here.

Daniel Beck Over a year ago

This was meant more as a strategy recommendation than a copy-and-paste working solution -- without more detail about what exactly you're doing I can't suggest anything more detailed than this, sorry. (FWIW though: Javascript, not Java. Completely different languages.)

user1692716 Over a year ago

On the home page actiientertainment.com under "OPENING NIGHTS" and also under "SHOWS PLAYING IN:" we have our shows with a More Info and Buy Tickets button but now that I started adding the purchase tickets info into a hidden div of the buy now button the site loads VERY slow. On this page, actiientertainment.com/Season-Tickets.php We also have a lot of shows but I have not added the purchase hidden div to the buy tickets button and it loads okay.

user1692716 Over a year ago

I still need to lot of the shows to the home page but dont want to add any more till I can get this load problem under control. So my thought is to not load any of the purchase ticket information (Disable the script to the booking system) unless the Buy Tickets button is clicked. Once clicked the hidden div becomes visible and the script to get the purchase information is called.

user1692716 Over a year ago

Not sure if there is way to just call the cid=42 or other number pending on the show as the only thing that changes in the script is the cid number so I was also thinking abut adding an id="the cid Number" into the button. I hope this makes sense.

|

Collectives™ on Stack Overflow

How to ignore javascript until button is click, then run

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related