Adding an img HTML tag combined with a call to C# function to an ASP.NET page inside JavaScript script

Question

Yeah, i know the title is a bit confusing but that's what it is...

Here is the piece of JavaScript code i have inside my ASP.NET Web app, the line that troubles me is the 7th line from the bottom, after chat.server.send.

<script type="text/javascript">
    $(function () {
        // Declare a proxy to reference the hub.
        var chat = $.connection.chatHub;
        // Create a function that the hub can call to broadcast messages.
        chat.client.broadcastMessage = function (name, message) {
            // Html encode display name and message.
            var encodedName = $('<div />').text(name).html();
            var encodedMsg = $('<div /> ').text(message).html();
            var tremp_id = $('<div /> ').text("<%=Request.QueryString["tid"]%>").html();

            var chatMessage = document.getElementById('<%= chatMessage.ClientID %>');
            chatMessage.value = 'value from javascript';

            // Add the message to the page.
            $('#discussion').append('<li><strong>' + encodedName
                + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
        };
        // Get the user name and store it to prepend to messages.
        $('#displayname').val('<%=returnName()%>');
        // Set initial focus to message input box.
        $('#message').focus();
        // Start the connection.
        $.connection.hub.start().done(function () {
            $('#sendmessage').click(function () {
                // Call the Send method on the hub.
                chat.server.send($('<div /> ').text('<img src="<%=getUserImage(Convert.ToInt32(Request.QueryString["uid"]))%>" height="50" width="50" border="1" bordercolor=black />').html() + $('#displayname').val(), $('#message').val() + $('<div /> ').text(" | Tremp: <%=Request.QueryString["tid"]%>").html());
                // Clear text box and reset focus for next comment.
                $('#message').val('').focus();
            });
        });
    });
</script>

As you can see I'm trying to add an image that gets the URL from a function within my C# code behind.

It gets some number from the URL and sends it to the function, that returns an image URL.

It seems alright except it shows the following instead:

What this code shows instead:

What am i doing wrong and how can i fix it? I'm sure it should be pretty simple.. but i can' find the right way..

Thanks.

.text() will escape the tags.

Jasen
– Jasen

2015-06-03 17:32:43 +00:00
Commented Jun 3, 2015 at 17:32 — Jasen
– Jasen, Commented Jun 3, 2015 at 17:32

Gabriel GM · Accepted Answer · 2015-06-03 17:59:34Z

3

You're using jquery Text function which escape the string (intended for text). What you're looking for it the jquery append function.

chat.server.send($('<div /> ').append(...

In fact, you have the same problem when you broadcast your message (chat.client.broadcastMessage). You're using text instead of append

var encodedMsg = $('<div /> ').append(message).html();

Also make sure that your message variable is not already encoded from the server.

edited Jun 3, 2015 at 17:59

answered Jun 3, 2015 at 17:34

Gabriel GM

6,6392 gold badges34 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

argamanza Over a year ago

I tried it, my code now is:

chat.server.send($('<div /> ').append('<img src="<%=getUserImage(Convert.ToInt32(Request.QueryString["uid"]))%>" height="50" width="50" border="1" bordercolor=black />').html() + ...

And still it writes it as text

Gabriel GM Over a year ago

Then the problem comes from your chat.server.send function. What does it do?

Collectives™ on Stack Overflow

Adding an img HTML tag combined with a call to C# function to an ASP.NET page inside JavaScript script

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related