-3

I want to create a fully dynamic chat UI for my website, But it reloads the whole page if a person submits the button this will directly show the div

<div class="messeging" id="msg">
    <?php  print $message->getName() ." : " . $chat->message . ""; ?> 
</div>

Without reload msgs are save in some xml file path like example (../user/xml) HTML

<form action="action.php" method="post">
    <input type="text" id="input" value="php echo">
    <input type="submit" value="send" onclick="showDiv()">
</form>

<div class="messeging" id="msg">
    <?php  print $message->getName() ." : " . $chat->message . ""; ?>
</div>

i don't know javascript/ajax well how to solve this

Sumithran
  • 6,217
  • 4
  • 40
  • 54
Anjali
  • 329
  • 2
  • 15
  • Look into websockets, server-sent-events or polling, so many tuts out there if not all are "chat" examples. – Lawrence Cherone Jul 26 '18 at 03:39
  • Possible duplicate of [How to create html elements in a form, without reloading the page?](https://stackoverflow.com/questions/28496178/how-to-create-html-elements-in-a-form-without-reloading-the-page) – Sumithran Jul 26 '18 at 04:03

2 Answers2

0

Try jquery ajax, on submit button send last msg for save into db and fetch all record and show them into chat page. so each time you send msg it will fetch all msg. if you don't know about how ajax work then let me know.

Rahul kalal
  • 51
  • 6
0

Begin by looking at the event on forms called 'onSubmit'. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit

Once you understand that, you can 'event.preventDefault()' in your 'onSubmit' method handler. Or in English, keep a form's default behavior to submit to the action from occurring.

After preventing the default action, you will need to do something with the form, and the easiest in latest browsers is to use the fetch API. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

You should be able to submit the data in the form to some endpoint that returns the HTML you wish to inject.

Once the HTML has been successfully returned, simple document.createElement methods with append (https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) will need to be used.

Good luck learning the web!

geedew
  • 1,368
  • 12
  • 16