.replaceWith() not working when replacing a div with another after button click

Question

I am trying to replace a div with another to create a multipage app. I have a div with id = start which holds my form. The form needs to be replaced by the div with id = list when the button is clicked. The form is getting reloaded and I am not getting any error in the console either.

HTML:

<div data-role="page" id="start">
  <div data-role = "main">
    <br><br>
    <div align="right">
      <img src="./img/help-icon.png" onClick="alert('Please get your security credentials')"/>
    </div>

    <div align = "center">
      <img src="./img/Logo login screen.png" height="200" width="170"/>
    </div>

    <br><br>

    <form id="loginForm" align = "center" method="get">
      <div id="user" align = "center">
        <input type="text" id="accessKey" Placeholder="Access Key (20 characters)" size="30" maxlength="128" tabindex="1" autocorrect="off" autocapitalize="off" data-validation="[NOTEMPTY]"/>
      </div>
      <br><br>
      <div id = "pass" align = "center">
        <input type="password" id = "secretKey" Placeholder = "Secret Key (40 characters)" size="30" maxlength="1024" tabindex="2" data-validation="[NOTEMPTY]"/>
      </div>
      <br><br>
      <center><button type = "submit" id="submitButton" class="ui-btn">Login</button></center>
    </form>
  </div>
</div>

<div data-role="page" id="list">
  <div data-role="main">
    <div id="bucket_list"></div>
    <div id = "status"></div>
  </div>
</div>

JS snippet:

AWS.config.update({accessKeyId: accKey, secretAccessKey: secKey});
var s3Client = new AWS.S3();
s3Client.listBuckets(function(err, data){
    $('#start').replaceWith($('#list'));
    if(err) alert("Error :: ", err);
    else{
        var listElement = document.createElement("ul");
        document.getElementById('bucket_list').appendChild(listElement);
        for(var index in data.Buckets){
            var bucket = data.Buckets[index];
            var listContent = document.createElement("li");
            listContent.innerHTML = "<p><a href=# onclick =" + bucketContents(bucket) + "; >" +  bucket.Name + "</a></p>";
            listElement.appendChild(listContent);
         }
       }
     });
     function bucketContents(bucket){
     s3Client.listObjects(params = {Bucket: bucket.Name}, function(err, data){
      if (err) {
           document.getElementById('status').innerHTML = 'Could not load objects from S3';
      } else {
        document.getElementById('status').innerHTML = 'Loaded ' + data.Contents.length + ' items from S3';
         var listStart = document.createElement("ul");
         document.getElementById('status').appendChild(listStart);
         for(var i=0; i<data.Contents.length;i++){
            var listItems = document.createElement("li");
            listItems.innerHTML = data.Contents[i].Key;
            listStart.appendChild(listItems);
          }
      }
    });
  }

Can anyone tell me where I am going wrong?

Does this help: http://stackoverflow.com/questions/5062916/replace-div-with-another-div ? — Rahul Tripathi, Jun 16 '15 at 09:06
Does `'#list'` exist in another file? Because it works for me http://jsfiddle.net/8m4u82tz/ — Shaunak D, Jun 16 '15 at 09:06
works for me, can you post the actual error, your running this on document ready i take it. — lukesUbuntu, Jun 16 '15 at 09:08
JQuery is included and list does not exist anywhere else. I have only 2 files - index.html and test.js which handle the div for me — Pallavi Prasad, Jun 16 '15 at 09:11

MegaMind · Answer 1 · 2015-06-16T09:19:55.593

1

Make sure you are adding jquery library properly. Mind that your code should be written AFTER you add the jquery library.

ALITER

What i get from your code is you want to make #start invisible and then make #list visible.

you can add display : none to CSS of #list and then at the event when you want to do that operation, you can do the following :

$('#start').hide();
$('#list').show();

edited Jun 16 '15 at 09:19

answered Jun 16 '15 at 09:08

MegaMind

653
6
31

I don't want the login page coming up again. The second div should be the starting page. Can I remove the entire div with the form? – Pallavi Prasad Jun 16 '15 at 09:10
yes, you can. doing it is as simple as detecting the the `event` and then making `div`s disappear – MegaMind Jun 16 '15 at 09:12
hide and show not working. Still seeing the login page. – Pallavi Prasad Jun 16 '15 at 09:16
Okay now you seriously need to checkout the way you are adding the `jquery` library – MegaMind Jun 16 '15 at 09:17

score 0 · Accepted Answer · answered Jun 16 '15 at 10:44

Thanks for all the help. I got my answer. I just need to place the replaceWith in the proper place. The working code is:

AWS.config.update({accessKeyId: accKey, secretAccessKey: secKey});

                var s3Client = new AWS.S3();

                s3Client.listBuckets(function(err, data){
                    if(err) alert("Error :: ", err);
                    else{
                        var listElement = document.createElement("ul");
                        document.getElementById('bucket_list').appendChild(listElement);
                        for(var index in data.Buckets){
                            var bucket = data.Buckets[index];
                            var listContent = document.createElement("li");
                            //listContent.innerHTML = "<p><a href=# onclick =" + bucketContents(bucket) + "; >" +  bucket.Name + "</a></p>";
                            listContent.innerHTML = "<p><a href='#'>" +  bucket.Name + "</a></p>";
                            listElement.appendChild(listContent);
                        }
                    }
                });

                $("#start").replaceWith($("#list").html());

.replaceWith() not working when replacing a div with another after button click

2 Answers2