How to add img to every message created on enter using Jquery?

Question

I can't figure this out. It's probably something small which I can't process at the moment. I am a beginner in this, sorry.

Now I am working on this chat, every time I press enter a class is being created with username and message.

On the left side of username, I want to put this img profile which the user can chose, or just use the default.png.

I want the picture to remain on the left side of his name before deleting.

Here is some of the code:

<script>
    $("#message").keypress(function(e) {

     var test = $("#Uname").val()
     var valmsg = $('#message').val();
     var poza = $('<img src="http://dev.alurosu.com/bobo/chat/data/img/admin/default.png">');

    if(e.which == 13 && valmsg.trim() == "" ){
            e.preventDefault();
            alert('Please type a message to send');
        } else if (e.which == 13) {
            $("#chat").append("<div class='mesaj' >" + test + ':' + valmsg + "</div>");
           $("#chat").append(poza);
            $('#message').val('');
            e.preventDefault();
        }
    });
</script>

And here is Jsfiddle but I couldn't upload the complete code.

And here is a screenshot exemple

Hope you can explain to me somehow. Thank You.

yeah i have the link close to the username where you can upload your img , but i dont know how to use it, i only need to use jquery on this somehow — azazu testing, Mar 04 '16 at 14:20

score 1 · Answer 1 · answered Mar 04 '16 at 14:34

1

else if (e.which == 13) {
        var imgpath = '<img  src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-group-512.png" width="30px" height="30px" style="float:right">';
            $("#chat").append("<div class='mesaj' >" + test + ':' + valmsg + imgpath +"</div>");
            $('#message').val('');
        }

use this code ..

answered Mar 04 '16 at 14:34

Yeah its working like i want it,Thank you , but i want the imgpath to be the one that the username chose. – azazu testing Mar 04 '16 at 14:39
your username is store in db ? if in db then also store image name when you have to click username then also pass the image name and set if you have doubt please ask me more .. – Mar 04 '16 at 14:41
username img is stored inside cookie – azazu testing Mar 04 '16 at 14:51
you used php cookie or javascript cookie – Mar 07 '16 at 05:41

score 0 · Answer 2 · answered Mar 04 '16 at 14:23

0

I assume you want the image to be followed by the Username,so you should be using Prepend.

$('div.mesaj').prepend(yourimage);

Do make sure the image path is correct.

answered Mar 04 '16 at 14:23

Rosebud

138
1
11

yeah i want that , but not only the default.png img , if the user has diferent img i want that to be there also.Thank you tho i will try and see. Tried it , somehow it shows the picture , but it duplicates in the same class after every message sent . – azazu testing Mar 04 '16 at 14:25
@azazutesting Do follow this link for the default Image [link](http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images/92819#92819) – Rosebud Mar 04 '16 at 15:29

Rayudu · Answer 3 · 2016-03-04T19:09:23.207

$(document).ready(function () {

        $("#Uname").click(function () {
            $("#popUp").show();
        });

        $(".pophide").click(function () {
            $("#popUp").hide();

        });
        // display previous stored username, if set
        var prevUname = localStorage.getItem("user");
        if (prevUname !== null) {
            $("#Uname").val(localStorage.getItem("user"));
        }

        $("#save").click(function () {
            var valoare = $("#userSet").val();
            if (typeof (Storage) !== "undefined") {
                // Store
                localStorage.setItem("user", valoare);


                // Retrieve
                $("#Uname").val(localStorage.getItem("user"));

            } else {
                $("#Uname").val("Sorry, your browser does not support Web Storage...");
            }

        });

        $("#message").keypress(function (e) {

            var test = $("#Uname").val();
            var image = "<img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSlk3gZnCZExtx8vMg5ykXThHnVmk4SjFZpwYysmCiuBXxQFXQhmg' />";
            var valmsg = $('#message').val();
            if (e.which == 13 && valmsg.trim() == "") {
                e.preventDefault();
                alert('Please type a message to send');
            } else if (e.which == 13) {
                $("#chat").append("<div class='mesaj' >" + test + ':' + valmsg + image + "</div>");
                $('#message').val('');
            }
        });


        $("#chat").on("click", ".mesaj", function () {
            console.log("Merge click clasa");
            $("#yes").click(function () {
                $(".mesaj").remove();
                $("#delPop").hide();

            });

            $("#delPop").show();
            $("#no").on("click", function () {
                $("#delPop").hide();
            });

        });

    });

Add CSS

  #chat img {
        float: right;
        height: 30px;

    }

localstorage is what keeps username default if new on page , it has nothing to do with the img — azazu testing, Mar 04 '16 at 14:59

How to add img to every message created on enter using Jquery?

3 Answers3

Add CSS