I want to use Ajax for my chat application instead of refreshing an Iframe every second for new messages. Someone told me to use webservices with ajax. What should I do with my code to use Ajax?
Here is the code which shows Iframe which is called every second and Iframe src has an aspx page which displays chat messages
<script type="text/javascript">
function refreshConversatio() {
document.getElementById('iframeDisplayMessage').src = 'frmMessageDisplay.aspx';
}
</script>
<body>
<div id="divMessageDisplayPage" style="height: 724px; ">
<asp:PlaceHolder ID="ContentPlaceHolderDisplayMessage" runat="server">
<iframe id="iframeDisplayMessage" name="iframeDisplayMessage" width="76%" style="background-color:White;" height="95%" frameborder="0" src="frmMessageDisplay.aspx"
onload="document.getElementById('iframeDisplayMessage').contentWindow.scrollTo(0,document.getElementById('iframeDisplayMessage').contentWindow.document.body.scrollHeight)">
</iframe>
</asp:PlaceHolder>
</div>
<script type="text/javascript">
setInterval(function () { refreshConversatio(); }, 1000)
</script>
</body>
This is the Aspx page which is called in Iframe and it has literal which displays messages
<div id="divConversation" style="width: 100%;">
<asp:Literal ID="RecepientConversation" runat="server"/>
</div>
Take a look at leveraging SignalR to accomplish the task. Patrick Fletcher has a pretty nice set of tutorials with examples for building a basic chat app.
Tutorial Link:
http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/introduction-to-signalr
http://www.asp.net/signalr
Related
I am following the steps as detailed here: https://github.com/Microsoft/BotFramework-WebChat to implement Microsoft Bot Framework (in C# SDK). I have tested it on a standalone page and it is working fine. I require to use the DirectLine version as I have to pass values from webpage to the bot (for user initalization).
However, the page where I have to implement this is an ASP.NET WebForms (using ScriptManager and AJAXToolkit).
The issue arises when using the bot. By typing any content in the chat window and pressing enter, the whole page refreshes and the bot reinitailizes to start. This makes the bot unusable.
I am guessing that the chat control's "Send" button is somehow triggering a postback via ScriptManager causing the whole page to refresh. I had to include e.preventDefault() on the click event of the button that shows the chat window to take care of this situation. I am lost when it comes to within the Directline chat control.
Can someone help?
The issue arises when using the bot. By typing any content in the chat window and pressing enter, the whole page refreshes and the bot reinitailizes to start. This makes the bot unusable.
I have same issue when I embed my bot in webform page (.aspx), to solve this problem, I put the chat bot container <div id="mybot" /> inside UpdatePanel control and set ChildrenAsTriggers property to false, which works for me, you can try it.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div id="mybot" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<script>
BotChat.App({
directLine: { secret: 'directline_secret_here' },
user: { id: '1234', firstname: 'firstname_here', lastname: 'lastname_here' },
bot: { id: 'fehantestbot' },
resize: 'detect'
}, document.getElementById("mybot"))
</script>
Screenshot of my test:
I had this issue when trying to build this into a DNN module.
Prevented it by inserting e.preventDefault to onKeyPress function in the Shell.tsx file in the BotFramework-WebChat project, and rebuilding it.
BotFramework-WebChat\src\Shell.tsx:
//...
private onKeyPress(e: React.KeyboardEvent<HTMLInputElement>) {
if (e.key === 'Enter') {
e.preventDefault(); //new line: prevent page reload
this.sendMessage();
}
}
//...
Use this code to prevent page refresh while sending chat from direclineJS webchat:
$(document).keypress(function (e) {
if (e.keyCode === 13) {
e.preventDefault();
return false;
}
});
I'm trying to add several <img> tags to my html document from asp.net codebehind. I looked at Adding Html from Code Behind in Asp.net and it seems to be the solution, but I'm not sure how divcontrol.Controls.Add determines where exactly it's going to start adding html. For all I know, it's at the end of the html. I also found Write Html Markup from code behind in asp.net, but I'm not certain how to use it either.
So here's the html that I'm using. How can I add the img tag I have also included?:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gallery</title>
<script type='text/javascript' src='/jquery-11.0.min.js'></script>
<script type='text/javascript' src='theme-tiles.js'></script>
</head>
<body>
<form id="form1" runat="server">
<h2>Tiles - Justified</h2>
<div id="gallery" style="display:none;">
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#gallery").gallery({
tiles_type: "justified"
});
});
</script>
</form>
</body>
</html>
This is the <img> tag that I need to add between the <div id="gallery"> tag:
<img alt="img1"
src="images/thumbs/tile1.jpg"
data-image="images/big/tile1.jpg"
style="display:none"/>
</a>
This is the code I would use to add the html:
HtmlGenericControl divcontrol = new HtmlGenericControl();
divcontrol.Attributes["class"] = "sxro sx1co";
divcontrol.TagName = "div";
pnlUserSearch.Controls.Add(divcontrol);
Label question = new Label();
divcontrol.Controls.Add(question); // add to the new div, not to the panel
If you're creating client-side HTML (not server controls) then you can just create a Literal, like this:
<div id="gallery" style="display:none;">
<asp:Literal runat="server" ID="MyLiteral" />
</div>
Then, in your code-behind, set
MyLiteral.Text = "<whatever html you want>"
I'm answering your question literally (no pun intended.) There may be better/other ways to accomplish the end goal. Mixing "normal" client HTML with webforms can get a little messy. Webforms wants you to do everything its way.
It might make more sense if your container div (gallery) is a server control instead. If you're looking to add multiple images then perhaps what you need is a Repeater.
To be really honest, if you're not too far down the development path it might be best to take a look at ASP.NET MVC instead.
Another approach:
Just add your image itself as a server control directly in the markup.
<div id="gallery" style="display:none;">
<img runat="server" ID="MyImage" Visible="False"/>
</div>
In your code-behind if you want to display it,
MyImage.Src = "/image url";
MyImage.Visible = true;
Hi I have here a simple representation of the page I want to do.
I want to get the hidden field values of page2.aspx and pass it to the label of page1.aspx using c#.
Can you guys help me tnx :)
HTML
this hidden value is in page 2 that is in iframe
<input type="hidden" id="hdnpage2" runat="server" />
Javascript
on a button click or page load in Page 1 try to call this JS
var iframe = document.getElementById('iframebody');//id of your iframe
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var hdnvale = innerDoc.getElementById('hdnpage2');
alert (hdnvale.value);
You can get values from iframe and assigned to parent page.
basically every page is render as html irrespective of languages and technology, so i am using jquery to get the iframe value and assign to parent controls.
Iframe.aspx
<div>
<asp:Label runat="server" ID="lblInfo">This is Iframe : </asp:Label>
<asp:HiddenField ID="hidfld1" runat="server" Value="this is test hidden value." />
</div>
Parent.aspx
<header>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#uploadIFrame').load(function () {
var $currIFrame = $('#uploadIFrame');
var $hidval = $currIFrame.contents().find("body #hidfld1").val();
alert($hidval);
$("#MainContent_txtInfo").val($hidval);
});
});
</script>
</header>
<body>
<div>
<asp:TextBox runat="server" Text="test" ID="MainContent_txtInfo"></asp:TextBox>
<iframe id="Iframe1" scrolling="no" frameborder="0" style="border-style: none; margin: 0px; width: 100%; height: 40px;" src="IFRAME.aspx"></iframe>
</div>
</body>
once you got the hidden field value in textbox or label then you can user your c# code to process the value in code behind.
I am using the below code for showing linkbutton in div and when it clicks it should go to that link.
This is not working for me correctly.I tried the below code.Just check and tell where I am wrong.
It is working good in this site when a user answer to any question and we hover on that user image we got his/her profile and there is also a link to see their profile. Exactly this concept is same what I am searching, So please help.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div.out { width:40%; height:120px; margin:0 15px;
background-color:#D6EDFC; float:left; }
div.in { width:60%; height:60%;
background-color:#FFCC00; margin:10px auto; }
p { line-height:1em; margin:0; padding:0; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form id="form1" runat="server">
<img src="Images/orderedList2.png" id="actionImage" />
<div class="out overout">
<span>move your mouse</span>
<div class="in">
<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
www.google.com
</div>
</div>
<div class="out enterleave">
<span>move your mouse</span>
<div class="in" >
<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
www.google.com
</div>
</div>
<script type="text/javascript">
$('#actionImage').mouseover(function (e) {
$("div.enterleave").show();
$('#actionImage').mouseout(function () {
$("div.enterleave").hide();
});
});
$("div.enterleave").mouseenter(function () {
$(this).show();
}).mouseleave(function () {
$(this).hide();
});
</script>
</form>
</body>
</html>
The Address is wrong you should put the protocol of the request to the address and not simply the address. So you need to change the href parameter in your tag like so:
www.google.com
www.google.com
To know more about protocols i advise the following
http://computernetworkingnotes.com/network-technologies/protocol-tcp-ip-udp-ftp-tftp-smtp.html
Commons Protocols
Port Number - Service
80 - HTTP
21 - FTP
110 - POP3
25 - SMTP
23 - Telnet
I'm not sure about the JS you have going but a basic error in your code is that your links need to have "http://"
Google
www.google.com
replace with
www.google.com
because external link should be start with http or Https
I'm trying to integrate my error handling with facebox to show my errors in a cleaner way. The problem that is occurring is that when I try to call jQuery.facebox, it is telling me that it is not a function. But I am able to use facebox's rel on links throughout my application.
Head:
<script language="javascript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript" />
<script language="javascript" src="/Resources/js/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="/Resources/js/jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="/Resources/css/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/Resources/js/facebox.js" type="text/javascript" />
Then from my codebehind on the masterpage Im calling facebox like this:
ScriptManager.RegisterStartupScript(Page, typeof(string), "ErrorMessage", "jQuery.facebox({ div: '#error' });", true);
And the error div is down towards the end of the masterpage:
<div id="error" style="display:none;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="background-color:#5F92CB; color:#fff; padding:6px; font-weight:bold;" align="left">Error Occurred while processing request</td>
</tr>
<tr>
<td style="padding:4px;" class="boldText"><asp:Label ID="lblErrorMessage" runat="server" /></td>
</tr>
</table>
</div>
Any help would be greatly appreciated. thanks
If you really need to use multiple versions of jquery on the same page, which is doable but not always preferable (may give headaches), you will have to use jQuery's noconflict mode. Check for more info and implementation details the following urls: link 1, link 2
It's important to know which plugins use which version of jQuery. This is because you will have to load them in the right order. You will need to load the older version plugins before the new jQuery version.
That said it's beter to run scripts when the DOM is loaded, just like Brian said, use the following snippet to accomplish that:
$(document).ready(function() { jQuery.facebox({ div: '#error' }); })
Try wrapping it in document.ready as in:
ScriptManager.RegisterStartupScript(Page, typeof(string), "ErrorMessage", "$(document).ready(function() { jQuery.facebox({ div: '#error' }); });", true);
The reason it's failing is because it's running before the facebox plugin is ready most likely.