Rectangle 27 3

Returning false using the onclick attribute

Refreshing? Are you using a button (in a form, thanks RobG) with type of "submit" or a link to add the DIVs? If so you can return false in the function you are calling to append the DIVs.

<button onclick="return foo()">The Button</button>
function foo(){
  /*all the work*/
  return false; //No matter what, return false so you don't get a page reload.
}

Edit: It looks like you're using a link. There are a few ways we could go about this:

You could change the href to "#" (called an anchor in HTML).

<a href="#">Foo</a>

This does not send you to a different page when you click it, but there are two caveats:

  • Always scrolls to the top of the page, or to whatever section you specified (e.g. #foo will scroll to the element with either an id or name of "foo". This can be annoying for users.
  • Breaks our page for non-javascript users. If you wanted that link to redirect to another page, non-Javascript users would consistently be stuck on that page.

Returning false in a Javascript function will prevent a link from going to its original destination. This also works for forms.

You could specify the action in the <a> tag's declaration to take, e.g.

<a href="foo.html" onclick="foo(); return false;">Foo</a> 
<!---The above "onclick" could also just be a function that always returns false-->

This method maintains any links we desired to keep for our non-javascript users, and won't move the position of the page. However, this method also has some flaws:

  • Our HTML and javascript are intertwined. This isn't the largest issue on the world, but it makes our code more of a hassle to update because, if we have more than one element we're attaching this event to, we have to then update it for every element. This could potentially mean editing a lot of lines in our HTML document. We can keep it a bit more DRY (Don't Repeat Yourself) if we separate our HTML and JavaScript.
  • Even if our JavaScript code is loaded in an external file and cached, we have to read this every time in the browser. Again, depending on the size of your HTML page, this may not be a large issue.
  • Event - Something that happens while a user is browsing a web page. This can be a click, the mouse moving, the window resizing, etc.
  • Event Handler - A function that responds to an event happening.

There are many ways to bind Events to HTML elements using Javascript, but I'll keep it brief for the sake of simplicity.

<a href="foo.html" id="foo">Foo</a>

Here, we changed the a tag by:

  • Adding an ID, making the element easily distinguishable from any other link (and any other element for that matter) we might be using on the page.

Let's add bind an event handler to our link with JavaScript:

function foo(){
 /* stuff we want to do to our div */
 return false; /* prevent page refresh */
}
function addEventToLink(){
  /* Set up a variable that we can use JavaScript to change attributes and event listeners*/
  var theLink = document.getElementById('foo'); 
  /* Set up our link to call the method 'foo', but ONLY when it is clicked on.
  * element.onclick changes the "onclick" attribute of the element */
  theLink.onclick = foo;  
}
addEventToLink(); //finally, call the method so our event listener is added to our link

Please note using element.onclick you may only set one event handler per element. This is based on the DOM Level 0 Events specification. If you want to add more than one event handler per element, view the breakdown of functions for both Internet Explorer and more standards-compliant browsers such as Firefox and Chrome at Wikipedia.

The only case where a button will cause a re-load by default is if it's a submit button in a form. In that case, it is much better to use a submit listener on the form and do the work there (including cancelling form submission if appropriate).

@RobG <button>Button</button> does reload the page... jsfiddle.net/J2NDL/1/show ... but that's only because it's a submit button by default. I see.

@imeVidas - yes, a button is by default a submit button, however it will only cause a page refresh if it's in a form and causes it to be submitted. And it can be given a type button so that it won't submit the form either.

It's a link that adds it

@enjikaka I'm not sure if Stack Overflow alerts on edits, but I hope my explanation helps.

javascript - Refresh without reload - Stack Overflow

javascript refresh reload
Rectangle 27 0

For dynamically added elements you need event delegation, use the other version on jQuery on(), you can delegate event to static parent of the dynamically added elements. In your case you can use #main_body

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, jQuery Docs

Your code works here as it is because you are adding the dynamically element before binding the event but using event delegation will free you from the sequence you use to add the dynamic elements.

javascript - refresh DOM after append element - Stack Overflow

javascript jquery
Rectangle 27 0

You code should work

@user3345547 Glad you found the solution :).Your code was correct as i pointed in my answer . :)

javascript - refresh DOM after append element - Stack Overflow

javascript jquery
Rectangle 27 0

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future

javascript - refresh DOM after append element - Stack Overflow

javascript jquery
Rectangle 27 0

You can only append when its not already present in the DOM using

You can achieve this using javascript only by

var element =  document.getElementsByClassName("main-header-title");
if (element.length ==0)
{
 $('div.popover').prepend($('<h3>').html('Accounts Already exists').addClass('main-header-title'));
         $('.main-header-title').append('<span class="close" id="cross-button">&times;</span>');
}

Or you can remove them after some time (say 1sec) when they are added to DOM

setTimeout(function(){
$("h3.main-header-title").remove();
// or $("h3.main-header-title").fadeOut(100); for animated removal
},1000);

And for better UX if you want to re-display the popover, do it this way.

if ($('h3.main-header-title').length==0) {
         $('div.popover').prepend($('<h3>').html('Accounts Already exists').addClass('main-header-title'));
         $('.main-header-title').append('<span class="close" id="cross-button">&times;</span>');
    }
else {
         $(h3.main-header-title).fadeOut(200);
         setTimeout(function(){$(h3.main-header-title).fadeIn(200);},500)
}

Read the updated answer, the other way is dont remove the popover automatically and when you want to show the popover again just remove the first popover and after 500ms re-display that for better UX.

If it solves your problem, please upvote and mark it as a correct for future help to someone.. :)

javascript - How to remove the prepend / append element from the DOM w...

javascript jquery css twitter-bootstrap