I've followed the examples http://jqueryui.com/autocomplete/
but instead of a fixed array I wanted a dynamic array from a database
I've almost got it working but as I type it won't filter the results and even if I type a letter that doesnt exist in the array, it still shows the full list.
search.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/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.0/jquery-ui.js"></script>
<script>
$(function() {
$("#tags").autocomplete({
source: 'http://fullurl/autocomplete.asp'
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
autocomplete.asp
<%
sConn = "DRIVER={MySQL ODBC 5.1 Driver}; SERVER=SERVER; Port=3306; DATABASE=database; UID=username;PASSWORD=password; OPTION=3"
Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open sConn
sSQL = "SELECT * FROM makes ORDER BY makes ASC;"
Set rst = Server.CreateObject("ADODB.Recordset")
rst.CursorLocation = 3
rst.Open sSQL, Conn, 3, 1
output = "["
DO Until rst.EOF
output = output & chr(34) & rst("makes") & chr(34) & ","
rst.movenext
Loop
output = left(output,(len(output)-1))
output = output & "]"
Response.Write output
rst.close
Conn.Close
%>
This is the result of autocomplete.asp: ["ACER","DELL","HP","LENOVO","SONY"]
any ideas what I've done wrong or missed out
Changed Jquery to the follow and works fine now
<script>
$(function() {
$.getJSON("autocomplete.asp", function(data) {
$("#tags").autocomplete({
source: data
});
});
});
</script>
Related
I'm attempting to switch out the css file on the fly - based on which part of the web-system the user is in (i.e. if the user is on mydomain/students/page then the page loads with students.min.css, rather than site.min.css).
I've tried doing it within the _Host.cshtml:
#page "/"
#namespace FIS2withSyncfusion.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
//sniff the requst path and switch the stylesheet accordingly
string path = Request.Path;
string css = "site.min.css";
if (path.ToLowerInvariant().StartsWith("/students"))
{
css = "students.min.css";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Martin's Blazor Testing Site</title>
<base href="~/" />
<link rel="stylesheet" href="css/#(css)" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<script type="text/javascript">
function saveAsFile(filename, bytesBase64) {
if (navigator.msSaveBlob) {
//Download document in Edge browser
var data = window.atob(bytesBase64);
var bytes = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
bytes[i] = data.charCodeAt(i);
}
var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
navigator.msSaveBlob(blob, filename);
}
else {
var link = document.createElement('a');
link.download = filename;
link.href = "data:application/octet-stream;base64," + bytesBase64;
document.body.appendChild(link); // Needed for Firefox
link.click();
document.body.removeChild(link);
}
}
</script>
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<script src="_framework/blazor.server.js"></script>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
</body>
</html>
However, it doesn't seem to hit this codeblock after the first load of the site; meaning whichever page they first landed on denotes the stylesheet for the entire site.
Do I have to put this codeblock on every page or is there another way of doing this?
another way you could approach this is to create components that respond to different styling that you desire. From there you have two options:
Create dedicated css associate with the component. From the docs
Create a class toggle in the code block of the component, similar to how the NavMenu works.
After further experimentation, I've found that adding this block:
#{
//sniff the requst path and switch the stylesheet accordingly
string path = navManager.Uri;
Uri uri = new Uri(path);
List<string> parts = uri.Segments.ToList();
string module = parts[1].ToLowerInvariant().Trim('/');
string css = "site.min.css";
if (module == "students")
{
css = "students.min.css";
}
}
<head>
<link rel="stylesheet" href="css/#(css)" />
</head>
To the top of MainLayout.razor works perfectly - so long as you remove the equivalent block from _Host.cshtml
I'm working on my company's website. The task I have is to display the user's name and ID at the top of each page of the website, once the user logs in. However, the top section of each page is controlled by an Include file, Header.inc. I'm getting the examinee's name and ID through some VB/Javascript. The problem is that an aspx page inserts the Include file before it runs the VB/javascript (if you're not familiar with what I'm talking about, see here, towards the bottom of the page: http://www.w3schools.com/asp/asp_incfiles.asp). Basically, the code in the Include file references the variables for the name and ID before the script declares them. The only solution I currently know would be to get rid of the Include file and insert that html in each page, but I'd like to avoid that. Any ideas how I can get around this problem? I read that Include files are old school and I should use Master files instead, but I really don't know how to do that. I'm pretty new at aspx development and working on modifying an existing website I did not create. Please be as specific as possible in your answers.
Thanks in advance,
Dan
Here's the error I get on the webpage:
(FYI the webpage is index.aspx)
Server Error in '/' Application.
Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: BC30451: Name 'strName' is not declared.
Source Error:
Line 11: </br>
Line 12: </br>
Line 13: <a><%=strName%> </a>
Line 14: </br>
Line 15: <a>Examinee ID# <%=strNBCEID%> </a>
Here's the code for the Include file:
(the include file is Header.inc)
<!-- Start Header -->
<div class="container-header">
<div class="pageheader">
<a href="/home.aspx" > (text removed) Home</a> |
<a href="(link removed)" >(text removed)</a> |
<a href="/logout.aspx" >Logout</a> |
<a href="/contact.aspx" >Contact Us</a>
</br>
</br>
</br>
</br>
<a><%=strName%> </a>
</br>
<a>Examinee ID# <%=strNBCEID%> </a>
</div>
<div class="header">
<br />
<span id="menuiconspan">
<a onclick="showMenu()">
<img src="/images/menubutton.png" />
</a>
</span>
<span id="headermenulogospan-lg" >
<img src="/images/logow.png" height="73px" width="187.5" />
</span>
<span id="headermenulogospan-sm">
<img src="/images/logow.png" height="49px" width="125" />
</span>
</div>
</div>
<!-- End Header -->
Here's some of the code (the section I deemed relevant) of my aspx file:
(webpage name is index.aspx, just for reference)
<%# Page Language="VB" Inherits="MySecurity" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Dim strName As String
Dim strAddress As String
Dim strPhone As String
Dim strEmailProc as String
dim strNBCEID as String
Protected Sub Page_Load()
Dim dvUser As Data.DataView
SecurityCheck()
sqlUser.SelectParameters("ExamineeNo").DefaultValue = Session("ExamineeNo")
dvUser = sqlUser.Select(DataSourceSelectArguments.Empty)
strName = dvUser.Table.Rows(0)("FirstName").ToString & " " & dvUser.Table.Rows(0)("LastName").ToString & " " & dvUser.Table.Rows(0)("Suffix").ToString
If dvUser.Table.Rows(0)("CurrentCountry").ToString = "1" Then
strAddress = dvUser.Table.Rows(0)("CurrentStreet").ToString & "<br />" & dvUser.Table.Rows(0)("CurrentCity").ToString & ", " & dvUser.Table.Rows(0)("CurrentState").ToString & " " & dvUser.Table.Rows(0)("CurrentZip").ToString
Else
strAddress = dvUser.Table.Rows(0)("CurrentStreet").ToString & "<br />" & dvUser.Table.Rows(0)("CurrentCity").ToString & " " & ZipFormat(dvUser.Table.Rows(0)("CurrentCountry").ToString, dvUser.Table.Rows(0)("CurrentZip").ToString) & "<br/>" & GetTableValueString("lkpCountry", "CountryName", "[CountryID]=" & dvUser.Table.Rows(0)("CurrentCountry").ToString)
End If
If dvUser.Table.Rows(0)("CurrentPhone").ToString <> "" Then
strPhone = Left(dvUser.Table.Rows(0)("CurrentPhone").ToString, 3) & "-" & Mid(dvUser.Table.Rows(0)("CurrentPhone").ToString, 4, 3) & "-" & Right(dvUser.Table.Rows(0)("CurrentPhone").ToString, 4)
Else
strPhone = ""
End If
strEmailProc = dvUser.Table.Rows(0)("Email").ToString
strNBCEID = dvUser.Table.Rows(0)("NBCEID").ToString
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>(text removed)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../js/template.js"></script>
<link href="../css/template.css" rel="stylesheet" />
<script language="javascript" type="text/javascript">
function PageLoad() {
}
</script>
<script type="text/javascript" src="../js/jquery-1.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
</head>
<body onload="PageLoad()" onresize="resetMenu();">
<form id="form1" runat="server" requiressl="true">
<div>
<!-- #include virtual="~/include/sidenav.inc" -->
<!-- #include virtual="~/include/header.inc" -->
<div class="container">
<!-- #include virtual="~/include/leftcolumn.inc" -->
Thanks again
I have been fighting this issue for quite some time now, and have been (still) unable to print my div with its styling.
Currently, my script is:
$('#printMeButton').click(function () {
//alert("a");
var data = document.getElementById('thisPrintableTable').outerHTML;
var mywindow = window.open('', data);
mywindow.document.write('<html><head><title>Print Me!!!</title>');
// mywindow.document.write('<link rel="stylesheet" type="text/css" href="Site.css" media="screen">');
mywindow.document.write('</head><body>');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
return true;
});
which is nested within a $(document).ready function.
When I include the desired stylesheet (currently commented out), Nothing appears in the print preview.
I also have some script that has an effect on the appearance of the table, and, as such, I believe this may hold the key of having these included into the popup window.
How can i include this into the new popup?
Could someone please suggest a way of printing this as it stands?
Edit History
removed space at end of </head><body>
Changed var data to have outerHTML instead of innerHTML
Altered Question/details from better understanding of issue
Try to open a local html file using window.open with css linked within it. And set the content html to be printed to the local html file using js.
Here is the page to be printed:-
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="test.css" rel="stylesheet" type="text/css" />
<script src="jquery.js"></script>
</head>
<body>
<div id="print">
<div class="red">TODO write content</div>
</div>
<button id="print_btn">Print</button>
<script>
$('#print_btn').click(function(){
var newWindow = window.open('print.html','_blank');
$(newWindow).load(function(){
$(newWindow.document).find('body').html($('#print').html());
});
})
</script>
</body>
</html>
The css file test.css is linked here, and I'm opening print.html at the time of window.open, the test.css is also linked in the print.html
Now, in print.html I'll write:-
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
Since you provide an empty string as a new window's URL (the first parameter of the open function), the page inside it most likely can't figure out where your stylesheet is (as it's address is "relative to nothing"). Try specifying an absolute URL to your stylesheet.
Also, there is media="screen" attribute that should be changed to media="print"
mywindow.document.write('<link rel="stylesheet" type="text/css" href="http://my.site/Site.css" media="print"')
The issue can be solved by introducing some delay time before executing mywindow.close(); method. Seems that some time is needed for CSS to be applied (loaded), like this:
$('#printMeButton').click(function () {
var content = document.getElementById(id).innerHTML;
var mywindow = window.open('', 'Print', 'height=600,width=800');
mywindow.document.write('<!DOCTYPE html><html dir="rtl"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Print</title>');
mywindow.document.write('<link rel="stylesheet" type="text/css" href="/static/css/styles.css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(content);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus()
mywindow.print();
// this is needed for CSS to load before printing..
setTimeout(function () {
mywindow.close();
}, 250);
return true;
});
We can use this inline style.
var divToPrint = document.getElementById('DivIdToPrint');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html>' +
'<style>' +
".btn-petty-cash-split{display: none}"+
".btn-petty-cash-split{display: none}"+
'</style>' +
'<body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){
newWin.close();
window.location.reload();
},10);
Does H5BP assume that you will write your JavaScript and jQuery code so that it only executes when the window has fully loaded (using the onload listener)? The reason I ask is that H5BP locates the jQuery inclusion script tag at the bottom of the body tag as shown below. However, the script in which a cookie is being set will not work unless I move the jquery.min.js script element to the head element which precedes the body (and thus the execution of the cookie script). Thanks.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<p>This is HTML5 Boilerplate.</p>
<!-- Cookie isn't set when jquery.min.js follows this element block -->
<script>
var test_profile = { browserWidth: $(window).width() };
document.cookie = "test_profile=" + JSON.stringify(test_profile);
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
</body>
</html>
That first <script> block depends on jQuery ($(window).width()), so it cannot be used before jQuery has been loaded.
Just move that cookie script after the other two <script> blocks:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script>
var test_profile = { browserWidth: $(window).width() };
document.cookie = "test_profile=" + JSON.stringify(test_profile);
</script>
I'm getting the error
XMLHttpRequest cannot load http://127.0.0.1:8099//negotiate?_=1348566460118. Origin http://localhost:49848 is not allowed by Access-Control-Allow-Origin
If I run the below code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/jquery.signalR-0.5.3.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery.support.cors = true;
var con = $.connection("http://127.0.0.1:8099/");
$.connection.url = "http://127.0.0.1:8099/signalr";
con.start({ transport: 'auto', xdomain: true }, function () {
console.log('connection started!');
});
</script>
</body>
</html>
There's a couple things wrong with the code:
1) You're missing a script reference to /signalr/hubs.
In your case it must come from the self-hosted server. So you need to add:
<script src="http://127.0.0.1:8099/signalr/hubs"></script>
2) Your con variable is not pointing to the correct object.
Instead of
var con = $.connection("http://127.0.0.1:8099/");
it should be
jQuery.support.cors = true;
var con = $.connection.hub;
con.url = "http://127.0.0.1:8099/signalr";
con.start(function() {
console.log('connection started!');
});