CODEWITHSUNDEEP
jqueryhtmleventsinsertclick
zasman
zasman

Reputation: 486

Inserting HTML elements on click jquery

currently I am making a rails app. What I want to happen is that when a user clicks an element with a certain id, in an empty div below it, I want it to display a table that I made on another view page (just for the purpose of keeping seperated). Currently I've got it to insert text on a click- but I want it to insert a table which I have on another view. Here's what my HTML looks like: 3x per week, gym/equipment available. 

    <p class="page-scroll btn btn-default" id ="threeNoEquip"> 3x per week, no equipment available.
    </p>

    <p class="page-scroll btn btn-default" id="fiveEquip"> 5x per week, gym/equipment available
    </p>

    <p class="page-scroll btn btn-default" id ="fiveNoEquip"> 5x per week, no equipment available.
    </p>

    <center><div id="generator">    </div></center>

Here's the HTML table I have on another view of the app:

    <table class="table" id="three-gym">
  <tr class="my-row">
    <th>Day of the Week</th>
    <th>Exercise</th>
    <th>Rep Range and Rest Periods</th>
  </tr>
  <tr class="my-row">
    <td>Monday- Back/Shoulders</td>
    <td>Deadlift <br> Standing Overhead Press <br> Chin Ups </td>
    <td>  (1x8, 2x5, 2x3, 2x2, 1x1, with 2-3 minute rest periods [or more] in between)<br> (3-5x3-6 reps) <br> (3x3-6 reps, lower reps if weighted) </td>
  </tr>
  <tr class="my-row">
    <td>Tuesday- Off/Cardio</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr class="my-row">
    <td>Wednesday- Push Day</td>
    <td>Bench Press <br> Dips <br> Dumbbell Pullover </td>
    <td>  (5x5-8)<br> (4x8-12) <br> (3x12) </td> 
  </tr>
  <tr class="my-row">
    <td>Thursday- Off/Cardio</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr class="my-row">
    <td>Friday- Legs</td>
    <td>Back Squat, Front Squat, or Leg Press <br> Lunges <br> Calf Raises </td>
    <td>(5x5-8) <br> (3x12-16) <br> (5x20-30) </td>
  </tr>

Here's my current Jquery code. Right now, it generates text in the empty "generator" div on click. How do I make it so it generates the above table?

    $(document).on('ready page:load', function() {
      console.log("Jquery is working for workout generator.");
      $( "#threeNoEquip" ).click(function () {
        $("#generator").text("This is what you do");
      })
    });

Upvotes: 0

Views: 45

Answers (1)

Shyju
Shyju

Reputation: 218722

If your second page is accessible via an http request, you can use jQuery load method to add the content of that page.

 $(function(){

    $( "#threeNoEquip").click(function () {
      var urlToLoad = "yourSecondPage.html";
      $("#generator").load(urlToLoad)
    });

 });

Assuming yourSecondPage.html is the file which has your html markup for the table and it is located in the same level as the current page. If it is in a different level adjust the urlToLoad variable value to include the correct path.method.

Upvotes: 1

Related Questions