close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

I want to display a message before an activity is deleted from the list.

Thread begun 6/27/2022 7:56 am by Jonas | Last modified 7/01/2022 12:37 pm by Ray Borduin | 281 views | 7 replies |

Jonas

I want to display a message before an activity is deleted from the list.

I have a list of different activities.
There are two buttons for each activity.
When the user presses one of these, the activity is deleted from the list (in fact, it is added to another database table instead).
Now I want this to be clarified with a message before the activity is deleted.
I want to use Bootstrap's alert component (https://getbootstrap.com/docs/4.0/components/alerts/).
But its not working. I have tried to create a javascript that will be activated when the buttons are pressed. But its not working. The activity is deleted, but no message before.

Here is the code:
<button name="doneBucketSV" type="submit" class="btn btn-sm btn-outline-success btn-block rounded-0" style="width: 49%; float: left; margin-top: 0;" id="doneBucketSV" onclick="doneBucketFunction">Avklarad</button>
<div id="doneBucketSvAlert" class="alert alert-dark collapse">
<a id="doneBucketSvAlertLinkClose" href="#" class="close">&times;</a>
Aktiviteten har överförts till din bucketlista, och har markerats som avklarad!
</div>

<script src="https://ajax.googleapsis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#doneBucketSV').click(function () {
$('#doneBucketSvAlert').show('fade');

setTimeout(function () {
$('#doneBucketSvAlert').hide('fade');
}, 2000);
});

$('#doneBucketSvAlertLinkClose').click(function () {
$('#doneBucketSvAlert').hide('fade');
});
});
</script>
<script>
function doneBucketFunction() {
document.getElementById("doneBucketSV").style.display='none';
}
</script>

Sign in to reply to this post

Ray BorduinWebAssist

Try changing your button to type="button" instead of type="submit"

A type submit button will automatically submit the form, so your message won't have a chance to show.

Sign in to reply to this post
Did this help? Tips are appreciated...

Jonas

Unfortunately, does this mean that the button cannot be used.

Sign in to reply to this post

Ray BorduinWebAssist

The button should pop up a window that asks them to confirm.

Inside of the confirm div add the same button with type="submit" to actually submit the form and perform the action.

Sign in to reply to this post
Did this help? Tips are appreciated...

Jonas

I want a message that appears when the user presses the button. This message should tell the user that the activity has been moved to another location. If the user does not press the close button for the message within three seconds - it closes automatically. The Bootstraps Alert function works this way. But it seems that the script is not activated. I do not know if it has to do with the button & activity disappearing directly from DOM, after pressing the button - or what? If so, can you change this so that the message first appears and then the activity disappears?

Sign in to reply to this post

Ray BorduinWebAssist

I see. In that case you should use a hidden iframe or ajax to submit the form and delete the record so you can display the message without the page reloading.

Sign in to reply to this post
Did this help? Tips are appreciated...

Jonas

Is this the only solution. It sounds complicated. The only thing I want - is that a notice should be displayed before the onclick = "addBucketFunction ()" function comes in?

Sign in to reply to this post

Ray BorduinWebAssist

I'm sure there are a lot of ways it could be done. I don't think there are any that would be much less complicated. You could maybe use a setTimeout() call to delay the form submit to give the message time to display.

Sign in to reply to this post
Did this help? Tips are appreciated...

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...