1

I'm implementing an add wishlist function to my rails app. So far I can dialog the message and get it to fade after 5 seconds. The issue is, once faded out and the user clicks on another "add wishlist" no dialog. They have to refresh the page. Im still learning so I know what's going on. I need to close the dialog with js but how?

Coming from my last question:

HTML

<section data-id="notification"></section>

JavaScript

...

// Calling the notification();
// You need to reduce that data string!
notification("<div id='noti' class='alert alert-success'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><p>WishList Added!</p></div>");

...

function notification(data){
    $( "[data-id=notification]" ).append( data ).delay(5000).fadeOut(400); // I've tried adding .dialog('close')
    $('#noti').dialog('close'); // this gives an error.
  }

...

To conclude, when user adds to wishlist, an dialog will show. User can manually close the dialog or it will close itself after x seconds. If dialog closes it self and user clicks another add wishlist, alert re-appears etc. Some how I need to remove it from the dom.

Maybe it wont make sense to display a message every time the user adds/removes a wishlist but this will be useful for other parts of my app.

This question is 4 years ago. Has anything changed since? I need both: user close and js close.

Community
  • 1
  • 1
Sylar
  • 11,422
  • 25
  • 93
  • 166

1 Answers1

1

You should use alert('close') :

$( "[data-id=notification]" ).append( data ).delay(5000).fadeOut(400);
$('#noti').alert('close');

Or using setTimeout :

$( "[data-id=notification]" ).append( data );
setTimeout(function() { $('#noti').alert('close'); }, 5000);

Hope this helps.

Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
  • Hi. That works if I remove `.delay(5000).fadeOut(400);` as it leaves a `display:none` class. Any way around this? Would be neat to have a fade out. If not, no problem. – Sylar Jul 24 '16 at 10:23
  • You're welcome, please try to add a fiddle so i can check the fade out. – Zakaria Acharki Jul 24 '16 at 10:25
  • Add the `seTimeout()` to your jsfiddle and you'll see. – Sylar Jul 24 '16 at 10:33
  • You have to choose one of them not the both in same time.. use `setTimeout` or `delay` recheck my answer please... fiddle using `setTimeout`http://jsfiddle.net/z_acharki/qYqjS/47/ – Zakaria Acharki Jul 24 '16 at 10:35
  • Your first code will fade, then clicks but when I check the inspector I see a class of display none and when I click another add wishlist, no alert. If it's too much, I'll use the last code. – Sylar Jul 24 '16 at 10:39
  • 1
    well just use the `setTimeout` :) – Zakaria Acharki Jul 24 '16 at 10:42