.replaceWith can't load another value using .click function

Question

I have two .on('click') functions (#addBooksId , #addCategoryId) When I try clicked one of the function in my Document Object Model it replacing the new value using .replaceWith but when I try to clicked another function in my Document Object Model it doesn't replacing new value. How can I do this without refreshing my browser? Instead of clicking one of the functions and refresh my browser again (repeat) What I want to do every time I clicked the function it's changing the value simultaneously. Here's my code below.

$(document).on("click","#addBooksId",function() {
        $.get('addBooks.html', function(data) 
            {     //The current page
            $('#form').replaceWith(data); // Receive with value
            alert('This is add books section');
            });
    });

    $(document).on("click","#addCategoryId",function() {
        $.get('addCategory.html', function(data) 
            {     //The current page
            $('#form').replaceWith(data); // Receive with value
            alert('This is add category section');
            });
    });

main.html

< script type = "text/javascript"
src = "https://code.jquery.com/jquery-1.12.3.min.js" >
  < /script>
 

$(document).on("click", "#addBooksId", function() {
      $.get('addBooks.html', function(data) { / / The current page
$('#form').replaceWith(data); // Receive with value
alert('This is add books section');
});
});

$(document).on("click", "#addCategoryId", function() {
  $.get('addCategory.html', function(data) { //The current page
    $('#form').replaceWith(data); // Receive with value
    alert('This is add category section');
  });
});

body {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  font-family: Arial;
  font-size: 15px;
}
#container {
  background-color: #707070;
}
#menu {
  width: 1250px;
  margin: 0 auto;
  text-align: left;
}
#menu ul {
  list-style-type: none;
  /*Remove bullets*/
  padding: 0;
  margin: 0;
  position: relative;
}
#menu ul li {
  display: inline-block;
}
#menu ul li:hover {
  text-decoration: none;
  color: black;
}
#menu ul li a,
visited {
  color: #CCC;
  /*Color of text*/
  display: block;
  /*Takes up the full width available*/
  padding: 15px;
  text-decoration: none;
}
#menu ul li a:hover {
  color: #CCC;
  text-decoration: none;
}
#menu ul li:hover ul {
  display: block;
}
#menu ul ul li {
  display: block;
}
#menu ul ul {
  display: none;
  position: absolute;
  background-color: #707070;
  min-width: 140px;
  /*Width when hover*/
}
#menu ul ul li a:hover
/*Color of text when hover*/

{
  color: #099;
}

<!doctype html>
<html>

<head>
  <title>Main</title>



</head>

<body>
  <div id="container">

    <div id="menu">
      <ul>

        <li>

          <a href="#">Manage Books</a>

          <ul>
            <div id="addBooksId">
              <li><a href="#">Add Books</a>
              </li>
            </div>

            <div id="addCategoryId">
              <li><a href="#">Add Category</a>
              </li>
            </div>

          </ul>

        </li>


      </ul>
    </div>
    <!--- end menu --->
  </div>
  <!--- end container --->
  <div id="form">

    <p>Hi</p>
  </div>
</body>

</html>

addBooks.html

.addBooks {
  clear: both;
  width: 800px;
  margin: 0 auto;
  margin-top: 10%;
}
.addBooks label {
  float: left;
  width: 150px;
  text-align: right;
}
.addBooks input {
  text-align: left;
  margin-left: 100px;
}

<!doctype html>
<html>

<head>
</head>

<body>

  <div id="container">

    <div class="addBooks">
      <h1>Add Books</h1>
      <hr>

      <form action="#">

        <fieldset>

          <div class="form-field">
            <label for="bookId">Book Id:</label>
            <input type="text" id="bookId" name="bookId">
          </div>

          <br />

          <div class="form-field">
            <label for="bookName">Book Name:</label>
            <input type="text" id="bookName" name="bookName">
          </div>

        </fieldset>

      </form>

    </div>
    <!--- end of addBooks --->

  </div>
  <!--- end of container --->


</body>

</html>

addCategory.html

.addCategory {
  clear: both;
  width: 800px;
  margin: 0 auto;
  margin-top: 10%;
}
.addCategory label {
  float: left;
  width: 150px;
  text-align: right;
}
.addCategory input {
  text-align: left;
  margin-left: 100px;
}

<!doctype html>
<html>

<head></head>

<body>

  <div id="container">

    <div class="addCategory">
      <h1>Add Category</h1>
      <hr>

      <form action="#">

        <fieldset>

          <label for="categoryName">Category:</label>
          <input type="categoryName" id="categoryName" name="categoryName">

          <br />

        </fieldset>

      </form>

    </div>
    <!--- end of addCategory --->

  </div>
  <!--- end of container --->

</body>

</html>

score 1 · Answer 1 · answered May 03 '16 at 18:52

1

The jQuery replaceWith() function actually replaces the node that you found via your selector, which in your case is $("#form").

I guess what you want to do is replace the inner content of your node instead of the whole #form node, which can be done this way instead:

$("#form").empty().append(data);

answered May 03 '16 at 18:52

MunchyYDL

351
1
5

`.empty().append(x)` is the same as `.html(x)`. – Barmar May 03 '16 at 20:08
DOH! Why make it easy, when you can make it hard? :) I was too focused on explaining what should be done, to not see that it could be even easier. Thanks for your help. – MunchyYDL May 07 '16 at 20:17

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

Try replacing the click hanlder to this:

$(document).on("click","#foobar",function() {
    // code here
});

Read about when to use click or on click here

edited May 23 '17 at 11:59

Community

1
1

answered May 03 '16 at 18:44

taesu

4,482
4
23
41

do you even have the `#foobar` element that you are trying to bind click event on, after your first click? maybe it's duplicating the id? You're not telling us much, so it's difficult to help. We are not magicians. – taesu May 03 '16 at 19:20
Yes I bind my element on my click event. Please see my updated post. – Francisunoxx May 03 '16 at 19:27

SiddP · Accepted Answer · 2016-05-04T09:10:53.447

0

Why would you need to register click twice. See this example if this explains.

Note the following points though:

Check if the condtion satisfies and replaceWith is executed.
Check if old data and new data are same if there is any data at all.
Finally and most importantly check all the ids if they exist.

EDITED ANSWER

Replace below part in your code and it work perfectly:

$(document).on("click", "#addBooksId", function() {
      $.get("addBooks.html", function(data) { 
          $( "#form" ).empty();
          $('#form').append(data); // Receive with value
alert('This is add books section');
});
});

$(document).on("click", "#addCategoryId", function() {
  $.get('addCategory.html', function(data) { //The current page
      $( "#form" ).empty();
      $('#form').append(data); // Receive with value
    alert('This is add category section');
  });
});

The problem with above code is it once replaceWith is executed for first time for example you selected add box the form id is replaced with div id container for addBooks so when you select addCatagory there is no form id to replaceWith as it is already replaced with addBooks hence the data do not get binded.

So replace $('#form').replaceWith(data); with

$( "#form" ).empty();
$('#form').append(data);

or simply :

$('#form').empty().append(data);

or even more simple:

$('#form').html(data);

Note: The above code would only run on webserver and not browser directly.

edited May 04 '16 at 09:10

answered May 03 '16 at 19:34

SiddP

1,603
2
14
36

Typo error only already updated the element id that I bind. All the condition is satisfies but it didn't change every time I clicked the id. – Francisunoxx May 03 '16 at 19:40
Is your data different every time you perform click.Put an alert to data and check if the new and old data are different. – SiddP May 03 '16 at 19:46
Updated my post please check. – Francisunoxx May 04 '16 at 07:24
@MiaLegaspi Updated my answer please check. – SiddP May 04 '16 at 09:05
I see what my problem is. It's when I try to replaced another form it's overloading that's why it's not working. So I need to `empty` my form first and `append` it. Great explanation! – Francisunoxx May 04 '16 at 15:03
@MiaLegaspi Its not actually overloading it is unable to find `#form` as it no more exists. – SiddP May 04 '16 at 15:19

.replaceWith can't load another value using .click function

3 Answers3