Loading a separate file's code from a div into itself

I have modified my code which is now working but still needs to be improved:

<!doctype html>
<html class="home" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Loader</title>

</head>

<body>

<h1>This is the default page</h1>
<div id="container">
        <img src="images/page-01.png" alt="step-01" usemap="#map-01"/>           
        <map id="map-01" name="map-01"  href="pages/next.html"  >
        <area shape="rect" coords="54,440,440,473" alt="diagram" title="diagram" href="pages/next.html"  target="_self"  />
   </map>
</div>

<script src="js/vendor/jquery-2.1.0.min.js"></script>
<script>

    $(document).ready(function(){
$('map').click(function(e){
 e.preventDefault();
 $("#container").load($(this).attr('href')+ " #step-02");
  });

  });
</script>

  </body>
</html>

Example code for the pages/next.html file:

<div  id="step-02" style="background:red;">
<img src="images/page-02.png" width="465" height="838" alt="Filter" usemap="#map-02"/>
INSIDE STEP 2

                    <map id="map-02" name="map-02" href="pages/page-03.html">
                        <area  shape="rect" coords="22,107,439,171" alt="diagram" title="diagram" target="_self" href="http://www.image-maps.com/"     />
                    </map>


                    </div>

<div  id="step-03" style="background:blue;">
<img src="images/page-03.png" etc...

The script functions but it is not efficient. Every time a new div containing the map is loaded i.e. step-03 inside container it needs to call the following so:

   $("#container").load($(this).attr('href')+ " #step-02");

Needs to be something along the lines of

   $("#container").load($(this).attr('href')+ " #step[suffixidentifier]++");

But I do not know enough about Jquery syntax to apply this. Could anyone help?

How To call the function?
$(document).ready(function() {
 $('map').click(function(){
  NextStep();
 });
});
  var step = 1;


//Later in your function
function NextStep(){
var myStep = String(step).length === 1 ? '0' + step : String(step);
$("#container").load($(this).attr('href')+ " #step-" + myStep);
step++;

}

Answers


You are missing a space :

$("#step-01").load($(this).attr("href") + " #step-02"); //Between " and #

Edit

You could go for a script like that :

//Declare a global var
var step = 1;


//Later in your function
function xxx(){
    var myStep = String(step).length === 1 ? '0' + step : String(step);
    $("#container").load($(this).attr('href')+ " #step-" + myStep);
    step++;
}

Edit 2

You'll probably need event delegation since you load map every click :

$(document).ready(function() {
    var step = 1;
    $('#container').on('click', 'map', function(e){
        e.preventDefault();
        var myStep = String(step).length === 1 ? '0' + step : String(step);
        $("#container").load($(this).attr('href')+ " #step-" + myStep);
        step++;
    });
});

Need Your Help

UrlRewrite to not redirect for certain files

java regex java-ee url-rewriting

I am using Tuckeys UrlRewrite filter for getting clean urls on my java application. I redirect all the requests to a certain resource to a spring request dispatcher. Here is my original rule

How to know if all the cells have the same value in some column

sql sql-server tsql condition equivalent

How to know if all the cells have the same value in some column (title changed)