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.
@mamdi122003 where the lastmessage() function to be called
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.
@guptast if possible provide some sample snippets
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>
@guptast please suggest me some websites on this topic
@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.