But still, i have to f5 to see what is written

The reason I was suggesting to return a rendered view partial is that you do not have to parse JSON to add the element into list of chats. Were you able to diagnose why your were not getting HTML in the response from the controller? Did you correctly create the partial - containing only the snippet I gave (no @extends, no @section etc.). You also can check that the correct HTML was created in the controller by assigning to a temporary variable and die-dump the result.

@tykus that's what I was trying to help him work towards. The view simply wasn't returning anything, so started looking at the data being passed to the view. Data seems ok.

@tykus i changed codes into this from controller and typed something:

    public function chat(Request $request) {
        // validate will throw a ValidationException if it fails, so no checks required
        $this->validate($request, [
            'cett'=> 'required|max:120|min:6',
        ]);

        // Since you have an Eloquent model, I am using that rather than Query Builder
        $chat = ChatModel::create([
            'chat' => $request->cett,
            'userid' => \Auth::user()->id,
            'username' => \Auth::user()->name // do you really need to store the user's name as well as the ID?
        ]);

        return dd($chat);
    }

I saw this in the chat after i sent it.: http://prntscr.com/j1v7n9, http://prntscr.com/j1vbs6

and the chat.message :

<li class="list-group-item" style="word-wrap:break-word;">
    <b>{{$chat->username}}</b>: {{$chat->chat}} ---
</li>

Yes, that's where we left off.

Now replace:

return dd($chat);

with

return view('chats.message', compact('chat'));

Check the console (if you still have the console.log() in the javascript success event), or in the browser tools/network tab.

Another thing to try is to add

dataType: 'html'

to your $.ajax options.

So, it proves that a ChatModel instance was properly created.

Just for the sake of sanity, can you confirm that the view partial is available at: resources/views/chats//message.blade.php, so you would call it with view('chats.message', compact('chat'));?

The view should be be returned as a full response; instead you call render() method to get the HTML string.

return view('chats.message', compact('chat'))->render();

If you try this, and there is an error in the console, can you post here the error as it appears in DevTools > Network > Response, so we can help you solve any issue(s)?

@tykus, the view is at where you just said. I wrote that code and got this:

{"notifyType":"consoleItemLog","message":{"message":"","styles":"","hasFormatString":true,"fileUrl":"http:/site.com/home","lineNumber":150,"columnNumber":5}}

That is not what I was expecting to see, can you share your javascript AJAX call?

<script>
$(document).ready(function(){


$('#send').click(function () {

  var cett = $('#cett').val();
  var username = $('#username').val();
  var userid = $('#userid').val();
  var token = $("#token").attr('content');


$.ajax({
  type:"POST",
  url:"{{url('chat')}}",
  data:"cett=" + cett + "&userid=" + userid + "&username=" + username + "&_token=" + token,
  beforeSend: function(xhr){xhr.setRequestHeader('X-CSRF-TOKEN', $("#token").attr('content'));},
  success: function (response) {
    console.log(response);
    $('#chat > .list-group').append(response);
}

});
});
});

</script>

Man, you altered it again. You keep changing things and not telling us. I don't know how to help further if you keep changing things and I've spent quite a bit of time trying to help. This is pretty frustrating.

Sent the wrong one sorry, edited it.

That's still not the one I posted that we had working from yesterday clear back on page 2 of this very long thread. You're doing a LOT of unnecessary things that are complicating the issue.

Actually same as i sent yesterday, i told you that i changed 'chat' into 'cett' and added console.log(response); after you told me to.

@uhbc try adding

window.location.reload()

like this at end:

$('#chat > .list-group').append(response);  // After this line:
window.location.reload()

I had you change to this:

<form id="myform">
    {{ csrf_field() }}
    <input type="text" name="chat" placeholder="Type your message here.." maxlength="120" class="form-control" autocomplete="off"><br />
    <input type="submit" class="btn-info btn-muted" value="Send!">
</form>

<script>
$(document).ready(function() {
    let myform = $('#myform');

    myform.on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            type:"POST",
            url:"/chat",
            data: myform.serialize(),
            success: function (response) {
                $('#chat > .list-group').append(response);
            }
        });
    });
});
</script>

And that's what we were working with, which was all working except getting the final view rendered. It's also a lot cleaner and got rid of a lot of unnecessary things that you were doing.

@jlrdw ofc that one will work but, its a chat, like do you reload the page in facebook when you are speaking with your friend?

it is getting more and more interesting https://gph.is/1qMgMgU

@Cronix then i replied with: If i do this, the page will be reloaded and its not really cool for the chat. Also, it doesnt insert data to db.

and then you: I don't think you copied everything correctly. The form shouldn't submit except by ajax. the e.preventDefault() makes it not submit the real form. You also had numerous items with the ID of "chat". ID's need to be unique per page.

I thought we were going on the old one after you said it.

Still couldnt

If you are wanting chat, surly by now someone has perfected a package, have you searched github for something you are after. Even if you don't use, could get some ideas from.

I looked over this, I think your ajax is firing too quickly, double up the ajax, have one function that takes the chat - stores to database, then after that ajax, have another ajax function that retrieves it and displays it, javascript sometimes don't wait.

Somehow the javascript is running too soon. I don't know how to delay it in chat, but in other apps I use an alert, which will allow catch up.

You could try experimenting with various delays for short periods.

EDIT: I got it, just display it prior to storing it to database, you are storing it anyway, so it would prevent delays.

So basically grab the message data, don't call a store method yet, rather display it first, then store to database.

After submitting getting this in Response:

{"chat":"test123321123321","userid":131,"username":"asdasd","updated_at":"2018-04-08 02:04:28","created_at":"2018-04-08 02:04:28","id":664}

but still can't display it on the chat page.

@jlrdw done that but didn't work. In case, shouldn't it display the message for the other users, even it doesn't happen for me? But that's not displaying for other users too.

You already have the message stored in a variable, build a new row in the Dom And use that same valuable to put the message there. Then immediately after that have the code that stores it in the database.

shouldnt

success: function (response) {
                $('#chat > .list-group').append(response);
            }

do that?

Forget last answer I was thanking same machine only, I still think some Ajax is firing too fast. Perhaps try something as a test.

Have two Ajax calls, first one gets and stores the message, second one retrieves and displays message.

But as a experiment, put a built-in delay of 15 seconds or 10 seconds and see if that works.

If that works then you know the Ajax wiill need some kind of wait mechanism.

Put the test delay between the two Ajax calls.

Actually, the main purpose of this post was about the 'Get Method', I have no idea how to use that.

Jquery site has examples, it is similar to post.

Thanks https://yatilabs.com/blog/top-mobile-app-development-company-dubai-abu-dhabi/