I am developing an application in asp.net using c#. In my page I have done ajax call to load the page with html. The html code is coming from the database. This ajax call is written in the document.ready() function. When I am first time loading the page its working fine. When I am going to another page, that is also working fine. But when I am trying to coming back from that page then the document.ready() is not working. For that reason the html code is also not getting populated. How can I solve this issue please help me out from here.
Document.ready() code is as follows:
$(document).ready(function () {
tempName = GetParameterValues("templateName");
//alert(tempName);
if (tempName != "" || tempName != null) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "DesignCenter_Static.aspx/loadTemplatePackage",
data: "{'template_name':'" + tempName.toString() + "'}",
dataType: "JSON",
success: function (data) {
var temp_data = data.d.toString();
var temp_arr = new Array();
temp_arr = temp_data.split("|");
$("#divTemplateLayout").html(temp_arr[0].toString());
$("#inputForm").html(temp_arr[1].toString());
$("#divButtonSet").html(temp_arr[2].toString());
$("#inputForm").find('[id^="txt"]').each(function () {
var cName, labelControlName, divControlName, resizeClassName, existingClassName, txtName;
txtName = $(this).attr("id");
cName = txtName.slice(3, txtName.length);
divControlName = "lbl" + cName;
$("#" + divControlName + "").resizable({
maxWidth: 300,
minHeight: 16,
minWidth: 50,
containment: "parent",
autoHide: true,
handles: "n, e, s, w, ne, se, sw, nw"
});
$("#" + divControlName + "").draggable({ cursor: 'move', containment: ".setLimit" });
});
},
error: function (result) {
alert("Error");
}
});
}
$("#ddlZoom").val("100%");
currentZoomLevel = $("#ddlZoom").val();
fillInitialDesignStudio();
});
Back Button Code of another page is as follows:
$(function () {
$("#btnBack").click(function () {
var resPage = GetParameterValues("responsePage");
var tempName = GetParameterValues("templateName");
window.location.href = resPage + "?returnPage=BC_Proof.aspx&templateName=" + tempName;
});
});
Master page code for adding jquery library:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/holder.js"></script>
<%--<script src="js/colpick.js" type="text/javascript"></script>--%>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/placeholders.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="js/spectrum.js"></script>
<script type="text/javascript" src="js/scolor.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.button.js"></script>
<script src="js/ui/jquery.ui.position.js"></script>
<script src="js/ui/jquery.ui.menu.js"></script>
<script src="js/ui/jquery.ui.autocomplete.js"></script>
<script src="js/ui/jquery.ui.tooltip.js"></script>
Thanks in advance
issue is templateName not getting properly , Check Ajax data,
data: "{'template_name':'" + tempName.toString() + "'}",
Your BackButton Code:
var tempName = GetParameterValues("templateName");
use GetParameterValues("template_name"); instead of GetParameterValues("templateName");
Related
I want to implement autocomplete in my c# bot which i developed using microsoft bot framework and added into my portal as iframe.
is it possible to implement query suggestion or query auto-completion in this bot?
i tried this solution also
Auto complete in Bot Framework
but i did not find it helpful for me.
can i use jquery auto-completion here ?
https://jqueryui.com/autocomplete/
please help me in this.
Thanks in advance.
can i use jquery auto-completion here ?
Based on my test, we can attach jQuery Autocomplete widgets to webchat input box. The following sample code is for your reference.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<style>
.wc-chatview-panel {
width: 350px;
height: 500px;
position: relative;
}
</style>
</head>
<body>
<div id="mybot" />
</body>
</html>
<script>
BotChat.App({
directLine: { secret: "{your_directline_secret}" },
user: { id: 'You' },
bot: { id: '{your_bot_id}' },
resize: 'detect'
}, document.getElementById("mybot"));
$(function () {
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL"];
$("input.wc-shellinput").autocomplete({
source: availableTags
});
})
</script>
Test result:
Note: I enter a, it show a list items for my selecting, and then I select an item, such as ActionScript, if I directly click send button, it will only send a to bot. To avoid it, we can manually enter a white-space (or other characters) and remove them before click send button.
I was facing this issue since 4 days.Finally I made it work.
You need to write jQuery for input.wc-shellinput element. I have implemented it with azure search.
<!DOCTYPE html>
<html>
<head>
<link href="../Styles/Skins/botchat.css" rel="stylesheet" />
<link href="../Styles/skins/customwebchat.css" rel="stylesheet">
<link href="styles/pages.css" rel="stylesheet" />
</head>
<body>`enter code here`
<div id="body-container">
<div class="bot-container">
<div id="bot" class="snow"></div>
</div>
</div>
<!-- <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>-->
<script src="js/botchat.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/CognitiveServices.js"></script>
<script>
const speechOptions = {
speechRecognizer: new CognitiveServices.SpeechRecognizer({ subscriptionKey: '' }),
speechSynthesizer: new CognitiveServices.SpeechSynthesizer({
gender: CognitiveServices.SynthesisGender.Female,
subscriptionKey: '',
voiceName: 'Microsoft Server Speech Text to Speech Voice (en-US, JessaRUS)'
})
};
BotChat.App({
directLine: { secret: '' },
user: { id: 'userid' },
bot: { id: 'botid' },
speechOptions: speechOptions,
resize: 'detect'
}, document.getElementById("bot"));
</script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-ui.js"></script>
<script src="/Scripts/jquery.autocompleteInline.js"></script>
<link href="/Content/jquery-ui.css" rel="stylesheet" />
<link href="/Content/tutorial.css" rel="stylesheet" />
<link href="/Content/jquery.autocompleteInline.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$("input.wc-shellinput").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
url: suggestUri,
dataType: "json",
headers: {
"api-key": searchServiceApiKey,
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,PUT,POST,DELETE"
},
data: JSON.stringify({
top: 5,
fuzzy: false,
suggesterName: "", //Suggester Name according to azure search index.
search: request.term
}),
success: function (data) {
if (data.value && data.value.length > 0) {
userinput = data.value;
console.log(userinput);
response(data.value.map(x => x["#search.text"]));
}
}
});
},
minLength: 3,
position: {
my: "left top",
at: "left bottom",
collision: "fit flip"
},
select: function (Event, ui) {
$(document).ready(function () {
var input = document.getElementsByClassName("wc-shellinput")[0];
var lastValue = input.value;
input.value = ui.item.value;
var event = new CustomEvent('input', { bubbles: true });
// hack React15
event.simulated = true;
// hack React16
var tracker = input._valueTracker;
if (tracker) {
tracker.setValue(lastValue);
}
input.dispatchEvent(event);
})
$('wc-textbox').val("");
Event.preventDefault();
$(".wc-send:first").click();
}
});
});
</script>
<script>
var searchServiceName = "";
var searchServiceApiKey = "";
var indexName = "";
var apiVersion = "";
var suggestUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/suggest?api-version=" + apiVersion;
var autocompleteUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/autocomplete?api-version=" + apiVersion;
var searchUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/search?api-version=" + apiVersion;
</script>
</body>
</html>
I have tried everything. I am trying to get autocomplete to work for an input textbox and I can't get it to work. I am implementing it into a DNN webpage here is the code I am using for this autocomplete...
I keep getting error every time.
I am welcome to do a teamviewer session.
Thank you.
ASP.NET code
<asp:Panel ID="pnlInfoSearch" runat="server">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
SearchText();
});
function SearchText() {
$(".autosuggest").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "View.ascx/GetPartNumber",
data: "{'PartNumber':'" + document.getElementById('txtPartNum').value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}
});
}
</script>
<div id="introcopy">
<h2>Product Info Center</h2>
<p>Download technical and quality documents, check inventory and order samples for your parts.</p>
</div>
<div class="demo">
<p>Enter a part number (or portion of a part number) to retrieve information about that product.</p>
<input type="text" id="txtPartNum" value="Enter part #..." style="height: 18px" class="autosuggest" />
</div>
<script type="text/javascript">
// <![CDATA[
var _sDefaultText = 'Enter part #...';
jQuery('#txtPartNum').keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
window.location.href = '<%= new Uri(String.Concat("http://", Page.Request.UserHostName, Page.Request.RawUrl)).AbsolutePath %>?partnum=' + jQuery(this).val();
}
}).focus(function () {
if (jQuery(this).val() === _sDefaultText) {
jQuery(this).val('');
}
}).blur(function () {
if (jQuery(this).val().length == 0) {
jQuery(this).val(_sDefaultText);
}
});
// ]]>
</script>
<br class="clear" />
</asp:Panel>
C# code....
[WebMethod]
public static List<string> GetPartNumber(string PartNumber)
{
List<string> result = new List<string>();
using (SqlConnection conn = new SqlConnection("HIDDEN"))
{
using (SqlCommand cmd = new SqlCommand("select PartNumber from Products.Products where PartNumber LIKE #SearchText+'%'", conn))
{
conn.Open();
cmd.Parameters.AddWithValue("#SearchText", PartNumber);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
result.Add(dr["PartNumber"].ToString());
}
return result;
}
}
}
If you think your issue is SQL related, then refactor the SQL related code and write some tests against that method with some know part numbers.
Looking at your code, the URL for your service method stands out. You specify You specified url: "View.ascx/GetPartNumber" but I would assume you either meant something else (maybe View.ashx or View.asmx). Are you able to hit your service method via your browser as a simple GET?
What do you get when you access this URI in your browser? /View.ascx/GetPartNumber?PartNumber=xyz
I want to show a message box when user enters wrong ıd or password. I write following function to the .aspx file:
<script type="text/javascript">
function warningMessage() {
$.msgBox({
title: "Hatalı Giriş",
content: "Kullanıcı numarası ya da şifre hatalı...",
type: "error",
buttons: [{ value: "Ok" }]
});
}
</script>
and I write the following code to the aspx.cs file:
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "warningMessage ", "warningMessage()", false);
but this code does not work. Can you help me?
While using this plugin it is necessary to include 3 files:
<script src="Scripts/jquery-2.0.0.js" type="text/javascript"></script>
<script src="Scripts/jquery.msgBox.js" type="text/javascript"></script>
<link href="Styles/msgBoxLight.css" rel="stylesheet" type="text/css">
I used this code on client-side:
<script type="text/javascript">
function warningMessage() {
$.msgBox({
title: "Hatalı Giriş",
content: "Kullanıcı numarası ya da şifre hatalı...",
type: "error",
buttons: [{ value: "Okay"}]
});
}
</script>
On server-side:
Page.ClientScript.RegisterStartupScript(this.GetType(), null, "warningMessage();", true);
IT WORKS WELL FOR ME
I am trying to open a modal window in my asp.net mvc 4 project on click of a link. Nothing happens with the code that I have written. What am I missing? I have referenced these links in my site master.
<link type="text/css" href="#Url.Content("~/Content/custom.css")" rel="Stylesheet" />
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.9.1.js")" ></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-1.10.3.custom.min.js")"></script>
Here is my code
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/SiteMaster.cshtml";
}
<div id="dialogMsg" title="I'm Title of dialog">
Hello I'm dialog body.
</div>
Open Dialog
<script type="text/javascript">
$(document).ready(function () {
$("#dialogMsg").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Do something": function () {
var bValid = true;
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
allFields.val("").removeClass("ui-state-error");
}
});
$('#thelink')
.click(function () {
$('dialogMsg').dialog('open');
});
});
</script>
You've missed the # on the selector that actually opens the dialog. See here:
$('#thelink')
.click(function () {
$('dialogMsg').dialog('open');
});
Change it to:
$('#thelink')
.click(function () {
$('#dialogMsg').dialog('open');
});
My Problem is I am try to call Public variable in Code Behind From JavaScript function
I try To Do This :
In Code Behind Section:
public string str ="TEST";
In JavaScript Section:
<script type="text/javascript" language="javascript">
function funDoSomething()
{
var strMessage = '<%= str%>';
alert( strMessage );
}
</script>
Any Suggestion?
<script type="text/javascript" language="javascript">
function funDoSomething()
{
var strMessage = <%= "'" + str + "'"%>;
alert( strMessage );
}
</script>
Ugly but should work.
I found the answer and it is Like this
In JavaScript Section:
<script type="text/javascript" language="javascript">
function funDoSomething()
{
var strMessage = "<%=str%>";
alert( strMessage );
}
</script>
This Work With Me :)