Hello,
I am trying to automatically scroll down the bar to see the new message when I submit the form. Or when the page finish loading.
How some reason, I am not sure if the scroll smooth work on this situation.
I tried to write some JavaScript on the page it is not working.
Any help will be welcome.
The screenshot is not very clear. Which bar?
Also, sharing a link to the page or page code would be a better way to fix this.
<div class="row chat-messages " id="ChatBoxTop">
<div class="col">
<div class="wrapms" dmx-repeat:messagewrapper="serverconnect4.data.query1">
<div class="chatwrapper" >
<div class="d-block">
<p>{{Message}}</p>
</div>
</div>
</div>
</div>
</div>
I am talking about the bar on the message box. I can still hide the bar with css but I am trying to automatically see the new message content when I click submit instead of scrolling down the bar to see it.
I hope you understand my explanation
So chatboxtop is the control which has scrolling, right?
Wapplerās smooth scroll cannot scroll inside a div as far as I knowā¦ you will have to use JS.
Yes, the chatboxtop is the control element.
Can I write JS using the Wappler to integrate in in the page or I will have to use the old fashion of putting JS in the page or write the page.
On success of form submission, you can use the static success event to write your JS:
onsuccess="....."
One sample code I found on SO:
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
You can either wrap this in a function and call that function, or just put this directly in the onsuccess event.
I am not sure what you mean by your point of writing JS.
onsuccess=āvar objDiv = document.getElementById(ā ChatBoxTop"); objDiv.scrollTop=objDiv.scrollHeight;"
I tried to use this option you stated. I am not sure if I have to write inside the function or what?
It is not working so far. what I had the onsuccess my entire page become blank.
You cannot have double quotes inside double quotes. Either āescapeā them or replace by single quotes.
If you donāt understand the basics of JS, I think it would be better if you read up on it before going further. It is used a lot while developing complex applications in Wappler.
If you are under the impression that you can do everything in Wappler visually, please be advised - you cannot.
I understand how JS work perfectly. I am using trying to see how it will fit with wappler submit element onsuccess. I already have a submit form and it is dynamic.
I even wrote it in the page to see how it will work.
function lastmessage() {var objDiv = document.getElementById( "ChatBoxTop"); objDiv.scrollTop=objDiv.scrollHeight;}
Wappler has two type of events: dynamic and static.
Dynamic are for wapplee things.
Static are for custom JS.
What I see in your screenshot is just the dynamic event. Set static event and put your function lastmessage() in that.
Since you have it in a function, do you see it working when calling manually from browser console?
It is working perfectly.
So, All I had to do is to write the function you gave me in the static event.
Awesome! Thank you again.
I also removed the double quotation you told me. It is also working nicely.
Thank you again.
Hi @Arnab_Som, welcome to the community!
It depends on your use case. If you want to call this function on the success of a form, then select success under Static Events -> Server Connect.
If you want to call this function on a click event of a button, then select click under Static Events -> Mouse.
Form Success Static Event Example. In this example onsuccess="lastmessage()" is calling the JS function when the form has been submitted successfully.
dmx-on:success is a Dynamic Event evaluated by Wappler, whereas onsuccess is a Static Event used to call any JS function.
You can check various dynamic and static events that are available to use if you go to the form properties or button properties under App Structure.
<form class="p-2" is="dmx-serverconnect-form" id="test_form" method="post" action="/api/test" dmx-generator="bootstrap5" dmx-form-type="horizontal" dmx-on:success="notifies1.success('The form has been successfully submitted!')" onsuccess="lastmessage()">
</form>
Button Click Static Event Example. In this example onsuccess="lastmessage()" is calling the JS function when the button is clicked.
<button class="btn btn-sm btn-outline-primary w-100" dmx-on:click="test_form.reset(true)" onclick="lastmessage()">
</button>
@Arnab_Som, if you want to learn Wappler, then you can start by following these how-to documents and videos. If you have any questions, you can ask these in the forum, and the Wappler community will guide / assist you in finding a solution.
@guptast Iām asking detailed clarification on this snippet and for that I am asking some suggested websites
function lastmessage() {var objDiv = document.getElementById( "ChatBoxTop"); objDiv.scrollTop=objDiv.scrollHeight;}
This community is for Wappler and everything related to it. If you want to learn javascript and anything related to general web development, thatās not the right place to do it.