replace characters in html string which is loaded from external in for loop

Question

What I try to achieve. On a change event html is changing. Dependent on the value of a select, pieces of html need to loaded as much time as the value. Within those pieces of html I need to replace some variables with the var i of my for-loop and some other vars. (for back-end shizzle). The final html need to be append at a div.

The problem is that when I try to access the variables in the $.get() or $.load() function, it always take te latest variable. When I access the variables in the append function like this, everything goes as it should go

$('.reizigers-verzekeringen').append('<p>'+title+'</p>);

example of what is loaded and need replacement be replace (between **):

<div class="panel panel-default">
<div class="panel-heading">
    <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseinsurance*i*" class=""> Verzekeringen *TITLE* <i class="fa fa-plus pull-right"></i></a></h4>
</div>
</div>

The full code...

$(".aantal-reizigers").change(function(){

    $(".reizigers-data").empty();
    $(".reizigers-verzekeringen").empty();
    var aantalReizigers = $(".aantal-reizigers").val();;
    var title="";
    var openclosedata="";
    var opencloseverzekeringen="";
    for (var i = 1; i <= aantalReizigers; i++) {

        if(i == 1){
            title = "hoofdreiziger";
            openclosedata='<div id="collapse'+i+'" class="panel-collapse in" style="height: auto;">';
            opencloseverzekeringen='<div id="collapseinsurance'+i+'" class="panel-collapse in" style="height: auto;">';
        }
        else{
            title = "reiziger "+i;
            openclosedata='<div id="collapse'+i+'" class="panel-collapse collapse">';
            opencloseverzekeringen='<div id="collapseinsurance'+i+'" class="panel-collapse collapse">';
        }

        $.get("booking/verzekeringen.html", function(html){
            html.replace("*TITLE*", title);<!--title is always the latest--> 
        })
        $(".reizigers-verzekeringen").append(
            '<p>'+title+'</p>'<!--this is going fine-->         
        );
    };
});

Can you post your html in the "booking/verzekeringen.html" - depending on how much thee is I would not do the get but simply add the HTML in the loop. See if you can do a JS Fiddle with what you have so far. — TResponse
– TResponse, Commented Jan 22, 2015 at 0:42
I'll try, but its a lot of html and if I was putting it inside the loop directly there was whole the time 'unexpected token illegal' — user3346696
– user3346696, Commented Jan 22, 2015 at 6:40
The JSFiddle has no code. merely a invite to a collaboration session. — TResponse
– TResponse, Commented Jan 22, 2015 at 7:54
Excuses; first time I make a jsFiddle by my own. So the title displayed by now are the one that should be in the HTML that's loaded external on the place of TITLE ... jsfiddle.net/q0jy260L — user3346696
– user3346696, Commented Jan 22, 2015 at 8:48

TResponse · Accepted Answer · 2015-01-22 09:17:30Z

1

Here is a way to do it:

Place your html into a variable.

e.g:

var htmlTemplate = "your html"

Then inside your loop, rather that calling the get simply use the html. Here is your updated JSFiddle to demonstrate the concept I mean. then you can simply go and update the title and what else you need.

http://jsfiddle.net/loanburger/q0jy260L/1/

answered Jan 22, 2015 at 9:17

TResponse

4,1537 gold badges48 silver badges66 bronze badges

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

3 Comments

TResponse Over a year ago

You can put the html variable in a function then call it in the loop and pass in the title and other values you want to set. Then simply build up the string with,the values and return it.

user3346696 Over a year ago

But the issue is that the .replace isn't working... any idea?

user3346696 Over a year ago

It's working! htmlTemplate = htmlTemplate.replace("TITLE", title);

Collectives™ on Stack Overflow

replace characters in html string which is loaded from external in for loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related