2016-07-24 108 views
1

我正在爲我的Rails應用程序實現一個添加願望清單功能。到目前爲止,我可以對話消息,並讓它在5秒後消失。問題是,一旦淡出,用戶點擊另一個「添加願望清單」沒有對話框。他們必須刷新頁面。我仍然在學習,所以我知道發生了什麼事。我需要用js關閉對話框,但是怎麼做?5秒後用jquery關閉對話框

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. 
    } 

... 

最後,當用戶添加願望單,一個對話框將顯示。用戶可以手動關閉對話框,或在x秒後自行關閉。如果對話框關閉它自己和用戶點擊另一個添加願望清單,警報重新出現等。我需要從dom中刪除它。

也許它不會在每次用戶添加/刪除心願單時顯示消息,但這對我的應用的其他部分很有用。

This question是4年前。自從有什麼改變?我需要兩個:用戶關閉和js關閉。

+0

好像你有一個turbotlinks的問題,你使用turbolinks 5? – mrvncaragay

+0

@ Marv-C編號沒有安裝。 – Sylar

+0

@ZakariaAcharki是的。我正在考慮模擬'.click()'。可能? – Sylar

回答

1

你應該使用alert('close')

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

或者使用setTimeout

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

希望這有助於。

+0

嗨。如果我刪除'.delay(5000).fadeOut(400);',那麼它就會起作用,因爲它會離開一個'display:none'類。任何方式在這個?將整齊淡化。如果沒有,沒問題。 – Sylar

+0

不客氣,請嘗試添加小提琴,以便我可以檢查淡出。 –

+0

它應該也可以@Sylar,看一下http://jsfiddle.net/z_acharki/qYqjS/46/ –