Converting page load link to ajax

[schwim]

Hi there everyone!

I’ve got a link intended to dismiss a notification banner. Currently, the only way I know how to handle this is by reloading the page to both make the change in the database and to make the banner disappear. I know this can be done without reloading the page but I am having a problem figuring out how to do it. I tried to integrate this tutorial but on clicking dismiss, it loads the page and the banner persists.

Could someone tell me what I’m doing wrong?

Page in question: https://s-esx.com/fivemin/async.html

Banner in question is the text: You are not running the current artifacts version. Your version: 1008. Latest version: 1056.

The form button in the banner should make the banner gracefully disappear.

[m3g4p0p]

@schwim

Could someone tell me what I’m doing wrong?

Hi @schwim, when I click the button I get an

Uncaught ReferenceError: age is not defined
at submitdata (async.html:50)
at HTMLFormElement.onsubmit (async.html:213)

… which breaks your script and the form gets submitted normally. Where is age supposed to be coming from?

[schwim]

Oh that’s leftover from the tutorial, I accidentally failed to convert it.

I made the fix and now the script is working but instead of removing the notification div(which was my intention), it’s only revmoving the text and button from inside it. How would I modify it to remove the entire notification div? (I added a notification_dismissed ID to it).

I’ve updated the code to reflect latest changes up top.

Thanks for your time!

[m3g4p0p]

@schwim

How would I modify it to remove the entire notification div?

Just remove() it then instead of clearing its inner HTML. BTW, instead of collecting the form input values manually you can just serialize() the entire form, or create a FormData object like so:

$.ajax({
  data: $(this).serialize()
  /// ...
})

// Or:
$.ajax({
  data: new FormData(this)
  /// ...
})

[schwim]

@m3g4p0p

Just remove() it then instead of clearing its inner HTML. [/quote]

I’m failing to understand how to perform this. I tried:

remove('#notification_dismissed');

and

$(remove('#notification_dismissed'));

but both break the script. I’m not sure how to utilize the remove function.

[quote=“m3g4p0p, post:4, topic:323394”]BTW, instead of collecting the form input values manually you can just serialize() the entire form, or create a FormData object like so:

$.ajax({
  data: $(this).serialize()
  /// ...
})

// Or:
$.ajax({
  data: new FormData(this)
  /// ...
})

I’l read up on the links and see if l can figure out how to alter it to handle it this way. Thank you very much for the help and suggestions!

[schwim]

Haha, I managed to Google into it!

$( "#notification_dismissed" ).remove();

One more question and this might be better suited to the CSS category, just let me know if so and I’ll post there instead.

How would I modify it to have the div gracefully disappear instead of the abrupt removal and shifting of the page?

[m3g4p0p]

@schwim

How would I modify it to have the div gracefully disappear instead of the abrupt removal and shifting of the page?

You might have a look at the slideUp() and fadeOut() methods… although jQuery animations are terribly bad for performance.

So yes I’d rather do this with CSS, or a combination of CSS and JS. For example, you can use CSS for the actual animation and let the browser do the “heavy lifting”, and then only use JS to remove the element once the animation is finished:

.my-element {
  opacity: 1;
}

.my-element.fade-out {
  transition: opacity .2s ease;
  opacity: 0;
}

$('.my-element')
  .addClass('fade-out')
  .on('transitionend', function(event) {
    $(event.target).remove()
  })