Clash Royale CLAN TAG#URR8PPP

How do I change the text of a modal with jQuery/AJAX?

While this question has been asked a few times before, none of the answers have seem to help me. Thus I am asking it again...

I am building the front end of a web site that has no back end (no server calls, etc.). I have a modal that displays content, with a next and a close button. My original design has it that when the next button is pressed, it closes the open modal and opens up a new one with different content. I think this looks unprofessional. I would like it where when a user presses the next button, it takes the content of the next modal and displays it on the open one, without having to keep opening and closing modals. However, I don't know exactly how do this. I'm assuming this is accomplishable with jQuery and AJAX. I will attach my code. Any Feedback is appreciated.

next

close

next

next

This is the open modal. When the user hits next I would like the content of <h4 class="modal-title> and the <div class="modal-body> to be replaced with the next modal.

next

<h4 class="modal-title>

<div class="modal-body>

<div class="modal fade protein-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <!-- PROTEIN MODAL START-->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"> Lean Protien </h4><!--CHANGE THIS WITH NEXT MODAL-->
</div>
<div class="modal-body"><!--CHANGE THIS WITH NEXT MODAL-->
<p>
At every meal, divide your plate into three equal sections. On one-third of the plate put some low-fat protein that is no larger or thicker than the palm of your hand (that’s because some hands are larger than others).
</p>
<p>
This doesn’t have to be animal protein, but it has to be protein-rich. For vegans this means either extra-firm tofu or soy imitation-meat products. For lacto-ovo vegetarians, it can also include dairy and egg protein-rich sources in addition to vegan sources of protein. For omnivores, the choice of proteins is even wider.
</p>
<div class="modal-image">
<img src="img/1-3plate1.png"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary zero-border" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success zero-border btn-next-slide-1" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div> <!-- PROTEIN MODAL END-->


The h4, and div should be replaced with the h4 and div of this modal

<div class="modal fade colorful-culinary-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <!-- COLORFUL-CULINARY MODAL START-->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Colorful Carbohydrates</h4>
</div>
<div class="modal-body">
<p>
Next, fill the other two-thirds of your plate with colorful carbohydrates, primarily non-starchy vegetables and small amounts of fruits to balance the protein as shown below.
</p>
<p>
Here are two very practical hints when it comes to carbohydrates. First, the more white (white bread, white pasta, white rice, and white potatoes) you put on your plate, the more inflammation you are going to create. Second, the more non-starchy vegetables you consume and the fewer grains and starches you eat (ideally none), the better the results. Scientifically, it’s called lowering the glycemic load of the meal.
</p>
<div class="modal-image">
<img src="img/2-3plate1-1.png"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary zero-border" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success zero-border btn-next-slide-2" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div> <!-- COLORFUL-CULINARY MODAL END-->


Currently, I'm just opening and closing modals, which gets redundant. It would be way more efficient to simply replace the text.

$(document).ready(function()

$('.colorful-culinary-button').click(function()

$('.colorful-culinary-modal').modal('show');
);

$('.protein-button').click(function()

$('.protein-modal').modal('show');
);

$('.fat-button').click(function()

$('.fat-modal').modal('show');
);

$('.btn-next-slide-1').click(function()

$('.colorful-culinary-modal').modal('show');
);

$('.btn-next-slide-2').click(function()

$('.fat-modal').modal('show');
);

$('.diet-builder-button').click(function()

$('.diet-builder-modal').modal('show');
);

);


2 Answers
2

You can do follow this example in order to make it (needs to be adapted to your code, but the idea should work).

HTML (modal):

<div id="container">
<p>this is the first text in the modal</p>
</div>
<input id="nextBtn" type="button" value="NEXT"/>


jQuery:

$(document).ready(function()
var objPos = 1;
var ajaxReturnObj = ["this is the first text in the modal","this is the second text in the modal","this is the third text in the modal"];
$('#nextBtn').click(function()
$('#container p').text(ajaxReturnObj[objPos]);
objPos++;
);
);


http://fiddle.jshell.net/tv4zwpn0/2/

If you have a static page and want to change the content whithout closing the modal dialog on the next button you need to have the content stored in your file, statically.

I propose the following solution:

var eleToDisplay = ["next1", "next2"];
var indexOfEles = 0;

$('#btn').click(function ()
$("#dialog").dialog(
title: "Change text on Next without closing ",
resize: "auto",
modal: true,
buttons:
"Next": function()
$(this).html($('#' + eleToDisplay[indexOfEles]).html());
indexOfEles = ((indexOfEles + 1) >= eleToDisplay.length) ? 0 : indexOfEles + 1;
,
Close: function()
$(this).dialog( "close" );

,
open: function()
$(this).html($('#' + eleToDisplay[indexOfEles]).html());
indexOfEles = ((indexOfEles + 1) >= eleToDisplay.length) ? 0 : indexOfEles + 1;
$(this).parent().find('.ui-button:last').focus();

);
);

body
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;


<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

<!-- Skeleton of default dialog -->
<div id="dialog" title="Basic dialog">
<p></p>
</div>

<!-- The first dialog content -->
<div id="next1" style="display:none">
<p>
At every meal, divide your plate into three equal sections. On one-third of the plate put some low-fat protein that is no larger or thicker than the palm of your hand (that’s because some hands are larger than others).
</p>
<p>
This doesn’t have to be animal protein, but it has to be protein-rich. For vegans this means either extra-firm tofu or soy imitation-meat products. For lacto-ovo vegetarians, it can also include dairy and egg protein-rich sources in addition to vegan sources of protein. For omnivores, the choice of proteins is even wider.
</p>
<div class="modal-image">
<img src="img/1-3plate1.png"/>
</div>
</div>

<!-- The second dialog content -->
<div id="next2" style="display:none">
<p>
Next, fill the other two-thirds of your plate with colorful carbohydrates, primarily non-starchy vegetables and small amounts of fruits to balance the protein as shown below.
</p>
<p>
Here are two very practical hints when it comes to carbohydrates. First, the more white (white bread, white pasta, white rice, and white potatoes) you put on your plate, the more inflammation you are going to create. Second, the more non-starchy vegetables you consume and the fewer grains and starches you eat (ideally none), the better the results. Scientifically, it’s called lowering the glycemic load of the meal.
</p>
<div class="modal-image">
<img src="img/2-3plate1-1.png"/>
</div>
</div>
<button id='btn'>Click me</button>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.