How to implement the ajax script using the get , post calls and ActiveX objects for search suggestions in a text box in asp.net?
You can use jquery autocomplete plugin and it works like a charm.
JQueryUI Autocomplete
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>
The example above binds a static array to the control, instead you can also get dynamic array in document.ready() using ajax call.
Related
index.html:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app" class="bg-red-300"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue:
<template>
<div class="flex flex-col md:flex-row">
<Nav class="bg-gray-300 md:w-1/4" />
<router-view class="bg-yellow-400" />
</div>
</template>
<script>
import Nav from './components/nav_components/Nav.vue';
export default {
name: 'App',
components: {
Nav,
},
};
</script>
<style></style>
640px Tailwind's small breakpoint (sm)
768px Tailwind's medium breakpoint (md)
Until 768px I use flex-col, and for bigger screen sizes I use flex-row as you can see in my code as well.
RESULT: (0-768px width, flex-col):
Between 640px and 768px the width of both my Nav and router-view containers stop expanding and I can see the red background of my where I mount my App.
RESULT: (>768px width, flex-row):
After 2050px, my container stops expanding which leads to the same result as mentioned before.
What can i do to workaround this behaviour?
Max width was by default 1536px. Setting max-w-full to my router-view container fixed the problem.
Can someone help me, I'm building my first chrome extension and it's a popup with a button that's supposed to do something on click (just using alert now), but somehow whatever in my js file doesn't seem to be working. Styles also seem not to load.
manifest:
{
"name": "Toolbar",
"manifest_version": 2,
"version": "1.0.2",
"description": "Toolbar",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "None",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "http://*/", "https://*/"
]
}
popup.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="popup.js"></script>
</head>
<body>
<div>
<button type="button" id="closeButton"> x<button/>
</div>
</body>
</html>
popup.js:
function closePopup ()
{
//window.close();
alert("hello");
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('closeButton').on("click", function (){
closePopup();
}
});
});
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<!--<script src="popup.js"></script> delete this-->
</head>
<body>
<div>
<button type="button" id="closeButton"> x<button/>
</div>
<!--add this--><script src="popup.js"></script>
</body>
</html>
place the script after the object, where the eventlistener is placed on. I had the same problem and that fixed it
You've got to put the <script src="popup.js"></script> in the <body> instead of <head> tag. That worked for me.
I have googled for this and I am not an expert on it either. I tried the following code thinking I am doing it right to implement a simple autocomplete textbox. But does not work. Here is the code. If anyone would help out what could be wrong with it, that will be a big help. My textbox simply does not return any autocomplete suggestions when I try it.
Thanks.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="jquery.WebForm1" %>
<!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 runat="server">
<%--<link href="jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />--%>
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
$(function () {
$("#TextBox1").autocomplete
({
source: ["Joe", "John", "Jack", "Ben", "Bell", "Steve", "Scott"] // simple list of strings
});
});
</script>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
There is no reference for jquery ui library in ur code
TRY TO ADD THIS :
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<html>
<head>
<title></title>
<script src="script/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="script/jquery.autocomplete.js" type="text/javascript"></script>
<script src="script/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).ready(function () {
$(function () {
debugger;
var availableTags = ("ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme");
$("#tags").autocomplete({
source: availableTags
});
});
});
</script>
</head>
<body>
<div>
<input id="tags" type="text" />
</div>
</body>
</html>
Here's the fiddle link to it, works fine on Fiddle, but not from VS
I suspect the code you are using from VS is not the same as the fiddle version.
The fiddle code looks perfectly fine, but the code you posted here has a syntax error. You must use square brackets to create an array, not parentheses:
var availableTags = ["ActionScript", "AppleScript", "Asp", ... ];
Add a doctype to your HTML file. Some browsers don't run javascript if there is no proper Doctype given.
I'm currently developing an overlay for Google Chrome (A toolbar if you prefer), and i have some issues with and i can't understand the reason why.
So, basically i've created an extension with this manifest.json :
{
"background_page" : "background.html",
"browser_action" :
{
"default_icon" : "images/Extension.png"
},
"content_scripts":
[ {
"all_frames": true,
"css": ["css/overlay.css"],
"js": ["js/overlay.js"],
"matches": ["http://*/*"],
"run_at": "document_start"
} ],
"permissions" : ["tabs", "unlimitedStorage", "http://*/*"],
"name" : "MyOverlay",
"version" : "1.1",
"description" : "Sindar Overlay"
}
The concept is that my background.html page will call the jquery.js and overlay.js. Then on the initialization of overlay.js it will call the html page (overlay.html) by using
<iframe id="YourToolbarFrame" src="'+toolbarURL+'">
The problem is that when i'm trying to start the extension everything seem to be good, no compilation problem but i don't see my overlay. And when i'm just opening the html page all is ok, i see it. So i'm asking myself if the problem dont come from the contentscript or from the permissions but i dont know where it could come from...
Thanks in advance.
Edit 23/02/2011 - 18:46
background.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/overlay.js"></script>
</head>
</html>
overlay.js
var overlay= {
init: function() {
this.injectoverlay();
//alert('Initialisation reussie');
},
injectoverlay: function() {
var body = $('body'),
overlayURL = chrome.extension.getURL("overlay.html"),
iframe = $('<iframe id="YouroverlayFrame" src="'+overlayURL+'">');
body.append(iframe);
iframe.show();
//alert('Injection reussie');
}
}
var length = {}, maxLength = 0, currentLength;
$(function(){
$('#menu li.title')
.each(function(){
// Save the Menu Length
length[$(this).attr('id')] = currentLength = $(this).height();
// Fix the height
$(this).height(20);
if(currentLength > maxLength)
{
maxLength = currentLength;
}
// To don't overflow on the content
$('#menu').height(maxLength);
})
.mouseenter(function(){
$(this).stop().animate({
height: length[$(this).attr('id')]
}, 500);
})
.mouseleave(function(){
$(this).stop().animate({
height: '20px'
}, 500);
});
});
$(document).ready(function() {
overlay.init();
});
overlay.html
<html>
<head>
<title>overlay</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/overlay.css" type="text/css"></link>
<base target="_blank" />
</head>
<body>
<div class="default">
<form id="searchForm">
<img id="logo" src="images/Extension.png"></img>
<input type="search" value="Enter you research" name="search">
<input type="submit" value="Go !" /> |
</form>
<ul id="menu">
<!--
<li class="title" id="accueil">
<a class="" href="#">Accueil</a>
</li>
-->
<li class="title" id="contact">
<a class="" href="#">Contact</a>
<ul class="dropMenu">
<li>google</li>
<li>yahoo</li>
</ul>
</li>
</ul>
</div>
<!-- Include the library of Google, more centralized.
Optimized the browser cache.
Compressed version. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>
</html>
Currently you include overlay.js as a content script to all pages plus include it into a background page for some reason. You don't need a background page for this task. If you are doing this just to inject jquery the solution would be to download jquery.js and put it into your extension folder, then automatically inject it in the manifest.json:
//"background_page" : "background.html", - this is not needed
"content_scripts":
[ {
"all_frames": true,
"css": ["css/overlay.css"],
"js": ["js/jquery.js", "js/overlay.js"], //jquery included as well
"matches": ["http://*/*"],
"run_at": "document_start"
} ],
(besides a background page doesn't have visible body, so you inject your frame to an invisible page right now)