.replaceWith () does not work when you replace a div with another after the click of the button

advertisements

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?


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();