How to get source to Jquery Autocomplete UI from classic asp page?
i found that default code. But i want to take my results from another asp page. How may i send with asp and get jQuery?
I need little help.
<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.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/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>
one solution is to response write the data directly to the output.
e.g. this is how your classic asp:
I have no way to run this code but it should look something like that...
<%
function getListOfTags()
{
try
{
var objRs = new ActiveXObject("ADODB.Recordset");
}
catch (e)
{
alert("ADODB namespace not found.");
exit(0);
}
strTagList = "";
strConn = "Provider=" +DP+
";Initial Catalog=" +DB+
";Data Source=" +DS+
";Integrated Security=SSPI;"
strComm = "SELECT ProductID,ProductName,UnitPrice "+
"FROM Products " +
"WHERE CategoryID = 7" // select Produce
objRs.open(strComm, strConn, adOpenForwardOnly, adLockReadOnly, adCmdText);
objRs.MoveFirst();
while (objRs.EOF != true)
{
strTagList += '"'+objRs("TagName")+'",'
objRs.MoveNext();
}
objRs.Close
objRs = null;
return (strTagList);
}
%>
<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.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
var availableTags = [
<%= getListOfTags() %>
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>
You can use a remote data source for jQuery auto-complete.
Check this EXAMPLE on jQuery.com
$( "#birds" ).autocomplete({
source: "search.asp",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
Here search.asp is a page that returns you the list of items in JSON format.
Related
I am using the org.doctales.reveal DITA Open Toolkit plugin. I understand how to use the outputclass attribute on an element in a DITA topic to transform that element to a fragment in the resulting reveal.js html file.
But what about other reveal.js attributes, such as data-autoslide? I want to apply that attribute to an element in the DITA topic so that I can control the timing of fragments displaying on the reveal.js slide. Is there a way to do this?
To be clear, I am not asking about the args.reveal.autoslide plugin parameter. I have that set to apply to all slides and fragments. Rather, I want to control the timing of individual fragments.
What I have done so far:
I have the following DITA XML topic:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE task PUBLIC "-//OASIS//DTD DITA Task//EN" "task.dtd">
<task id="t_Portal-Dashboard" xtrf="t_Portal-Dashboard">
<title>Viewing The Client Portal Dashboard</title>
<shortdesc>The dashboard provides a summary of activities.</shortdesc>
<taskbody>
<context id="context_fnf_xhv_5cb">The dashboard provides a summary of activities.</context>
<steps>
<step outputclass="fragment fade-in">
<cmd>If the dashboard is not displayed, click <uicontrol>Dashboard</uicontrol>.</cmd>
<stepresult>
<image placement="break" href="i_Portal-Dashboard-Tab-183.png" id="image_c52_1gf5_jwx" width="664px" height="190px" outputclass="fragment fade-in"/>
</stepresult>
</step>
<step outputclass="fragment fade-in">
<cmd>View the summary of information.</cmd>
<stepresult>
<image placement="break" href="i_Portal-Dashboard-Data-183.png" id="image_c52_1gs5_jwx" width="800px" height="520px" outputclass="fragment fade-in"/>
</stepresult>
</step>
</steps>
</taskbody>
</task>
The Doctales DITA-OT plugin transforms to the following HTML:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="(C) Copyright 2019" />
<meta name="DC.rights.owner" content="(C) Copyright 2019" />
<meta name="DC.Type" content="concept" />
<meta name="DC.Title" content="Client Portal" />
<meta name="abstract" content="Information and configuration for activities is available from a web application portal." />
<meta name="description" content="Information and configuration for activities is available from a web application portal." />
<meta name="DC.Format" content="XHTML" />
<link rel="stylesheet" type="text/css" href="commonltr.css" />
<link rel="stylesheet" type="text/css" href="doctales.css" />
<title>Client Portal</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<link rel="stylesheet" href="css/reveal.css" />
<link rel="stylesheet" href="css/theme/doctales.css" id="theme" />
<link href="lib/css/zenburn.css" rel="stylesheet" />
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1 class="title topictitle1" id="ariaid-title2">Viewing The Client Portal Dashboard</h1>
<div class="body taskbody">
<div class="section context" id="t_Portal-Dashboard__context_fnf_xhv_5cb">The dashboard provides a summary of activities.</div>
<ol class="ol steps">
<li class="li step stepexpand fragment fade-in">
<span class="ph cmd">If the dashboard is not displayed, click <span class="ph uicontrol">Dashboard</span>.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gf5_jwx" src="i_Portal-Dashboard-Tab-183.png" width="664" height="190" />
<br />
</div>
</li>
<li class="li step stepexpand fragment fade-in">
<span class="ph cmd">View the summary of information.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gs5_jwx" src="i_Portal-Dashboard-Data-183.png" width="800" height="520" />
<br />
</div>
</li>
</ol>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js" type="text/javascript"></script>
<script src="js/reveal.js" type="text/javascript"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
Reveal.initialize({
// parallaxBackgroundHorizontal: null,
// parallaxBackgroundImage: '',
// parallaxBackgroundSize: '',
// parallaxBackgroundVertical: null,
autoSlide: 3000,
autoSlideStoppable: false,
backgroundTransition: 'default',
center: true,
controls: false,
controlsLayout: 'edges',
embedded: false,
fragments: true,
height: 700,
hideAddressBar: true,
history: true,
keyboard: true,
loop: false,
margin: 0.1,
maxScale: 1.5,
minScale: 0.2,
mouseWheel: false,
overview: true,
previewLinks: false,
progress: true,
rtl: false,
slideNumber: false,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
touch: true,
transition: 'fade',
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
transitionSpeed: 'default',
viewDistance: 3,
width: 960,
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
Reveal.addEventListener( 'slidechanged', function( event ) {
zoomSection();
} );
$( document ).ready(function() {});
</script>
</body>
</html>
But I want to the plugin to read (data-autoslide) attributes I've added to the DITA topic and so transform to something like the following HTML:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="(C) Copyright 2019" />
<meta name="DC.rights.owner" content="(C) Copyright 2019" />
<meta name="DC.Type" content="concept" />
<meta name="DC.Title" content="Client Portal" />
<meta name="abstract" content="Information and configuration for activities is available from a web application portal." />
<meta name="description" content="Information and configuration for activities is available from a web application portal." /> <meta name="DC.Format" content="XHTML" />
<meta name="DC.Identifier" content="concept_Client-Report-Portal" />
<link rel="stylesheet" type="text/css" href="commonltr.css" />
<link rel="stylesheet" type="text/css" href="doctales.css" />
<title>Client Portal</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<link rel="stylesheet" href="css/reveal.css" />
<link rel="stylesheet" href="css/theme/doctales.css" id="theme" />
<link href="lib/css/zenburn.css" rel="stylesheet" />
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1 class="title topictitle1" id="ariaid-title2">Viewing The Client Portal Dashboard</h1>
<div class="body taskbody">
<div class="section context" id="t_Portal-Dashboard__context_fnf_xhv_5cb">The dashboard provides a summary of activities.</div>
<ol class="ol steps">
<li class="li step stepexpand fragment fade-in">
<span class="ph cmd">If the dashboard is not displayed, click <span class="ph uicontrol">Dashboard</span>.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" data-autoslide="8000" id="t_Portal-Dashboard__image_c52_1gf5_jwx" src="i_Portal-Dashboard-Tab-183.png" width="664" height="190" />
<br />
</div>
</li>
<li class="li step stepexpand fragment fade-in" data-autoslide="1000">
<span class="ph cmd">View the summary of information.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gs5_jwx" src="i_Portal-Dashboard-Data-183.png" width="800" height="520" />
<br />
</div>
</li>
</ol>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js" type="text/javascript"></script>
<script src="js/reveal.js" type="text/javascript"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
Reveal.initialize({
// parallaxBackgroundHorizontal: null,
// parallaxBackgroundImage: '',
// parallaxBackgroundSize: '',
// parallaxBackgroundVertical: null,
autoSlide: 3000,
autoSlideStoppable: false,
backgroundTransition: 'default',
center: true,
controls: false,
controlsLayout: 'edges',
embedded: false,
fragments: true,
height: 700,
hideAddressBar: true,
history: true,
keyboard: true,
loop: false,
margin: 0.1,
maxScale: 1.5,
minScale: 0.2,
mouseWheel: false,
overview: true,
previewLinks: false,
progress: true,
rtl: false,
slideNumber: false,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
touch: true,
transition: 'fade',
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
transitionSpeed: 'default',
viewDistance: 3,
width: 960,
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
Reveal.addEventListener( 'slidechanged', function( event ) {
zoomSection();
} );
$( document ).ready(function() {});
</script>
</body>
</html>
welcome to Stackoverflow. You can find a list of all currently supported parameters in the documentation. If you want to request new parameters, that are supported by reveal.js but not directly through the plugin, please raise an issue on Github. The autoslide function is supported by setting the args.reveal.autoslide property as explained in the docs. You are welcome to join our Slack group for discussing anything the plugin and other things.
I have used code from http://jqueryui.com/autocomplete/#default which is working fine in FF and Chrome but not working for IE8 version 8.0.7600.16385. The developer console states
'null' is null or not an object
What's wrong?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Web.XXX.XXX.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/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>
<form id="form1" runat="server">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input type="text" id="tags" />
</div>
</form>
</body>
</html>
It is resolved with using internal Jquery files and noconflict function.
<script src="/JqueryPlugins/ui/jquery.ui.core.js" type="text/javascript"></script>
<script src="/JqueryPlugins/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="/JqueryPlugins/ui/jquery.ui.position.js" type="text/javascript"></script>
<script src="/JqueryPlugins/ui/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script>
$J = jQuery.noConflict();
$J(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"];
$J("#tags").autocomplete({ source: availableTags });
});
</script>
I have an autocomplete field into my website. I just want to display the results inside a -div- tag instead the popup window that the plugin opens natively.
I searched already for solutions for this in other posts, but what they do is to change the position of the "popup" window, and what I want is to replace the content of the -div- with the results, not to put the popup over it.
Any advice will be very appreciated.
This is the code that I have:
<!doctype html>
<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.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/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>
.
As j08691 says, you have to handle the open event of the widget. However, since you also want to select the items in the #results element, copying them will not be enough.
I would suggest you reparent the whole autocompletion menu under your #results element instead, and reset its position style attribute to static so it remains in place:
$("#tags").autocomplete({
source: availableTags,
open: function() {
$(this).autocomplete("widget")
.appendTo("#results")
.css("position", "static");
}
});
You can see the results in this update to your fiddle.
Use autocomplete's open event like in this jsFiddle example.
open: function(e, ui) {
var list = '';
var results = $('ul.ui-autocomplete.ui-widget-content a');
results.each(function() {
list += $(this).html() + '<br />';
});
$('#results').html(list);
}
I've been trying to create a resizable autocomplete (and I'm not even sure if this would be possible!). I've tried a lot of things getting ideas from google but have not been able to accomplish it.
The code I've creates a resizable menu but it's not aligned to the bottom of the text box and when I search the 2nd time the resize option disappears. Is there a way of fixing it or can this functionality be achieved in any other way?
<head runat="server">
<title></title>
<link href="~/css/1.8/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="~/script/jquery/1.5/jquery.min.js"></script>
<script src="~/script/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
.ui-resizable-se
{
bottom: 0px;
}
.ui-autocomplete
{
background: silver;
overflow-y: hidden; /* prevent horizontal scrollbar */
overflow-x: hidden;
}
</style>
<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,
open: function (event, ui) {
$('ul.ui-autocomplete').resizable();
}
});
});
$(function () {
$("#ul.ui-autocomplete").resizable({
handles: "se"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="ui-widget">
<label for="tags">
Tags:
</label>
<input id="tags">
</div>
</form>
</body>
</html>
It does work for me with different versions of jquery and jquery ui (resizing autocomplete dropdown).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
JSFiddle
Here is a fiddle that works:
http://jsfiddle.net/gU5Tb/3/
Your version of jQuery and jQuery UI are deprecated.
<html>
<head runat="server">
<title></title>
<link href="~/css/1.8/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="~/script/jquery/1.9.1/jquery.min.js"></script>
<script src="~/script/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style>
.ui-resizable-se
{
bottom: 0px;
}
.ui-autocomplete
{
background: silver;
overflow-y: hidden; /* prevent horizontal scrollbar */
overflow-x: hidden;
}
</style>
<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,
open: function (event, ui) {
$('ul.ui-autocomplete').resizable();
}
});
});
$(function () {
$("#ul.ui-autocomplete").resizable({
handles: "se"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="ui-widget">
<label for="tags">
Tags:
</label>
<input id="tags">
</div>
</form>
</body>
</html>
I would like to open a JQuery UI dialog when a user clicks on a link. So far I have this
<script>
//to hide the dialog box on loading
$j(function() {
$j( "#dialog" ).hide();
});
$('.button').click(function(){
$('#dialog').dialog('open');
});
</script>
<div id="dialog" title="Basic dialog">
<p>Dialog box</p>
</div>
The button
But the dialog won't open by clicking the link... Everything is included well.
EDIT
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script>
var $j = jQuery.noConflict();
</script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.effects.core.js"></script>
Are you referencing jQuery and jQuery ui library? You can autohide when initializing:
$("#dialog").dialog({ autoOpen: false });
$('.button').click(function() {
$('#dialog').dialog('open');
});
Demo: http://jsfiddle.net/pxQ8j/
You can use this code for your purpose.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/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.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<form action="" method="post">
Name :- <input type="text" name="name" value="">
Email :-<input type="email" name="email" value="">
Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
</form>
</div>
<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
function myfuncation()
{
// Here is your ajax request to db related work.
var ajaxresponce = "Sucessfully Insert Form";
$('#dialog-message').html(ajaxresponce);
$( "#dialog-message" ).dialog();
}
</script>
Hope it helps you. Please let me know if you have any query.
Your problem is you are trying to access the dialogs open method even though you never created the dialog instance.
Just change your code to do:
$('#dialog').dialog()
If you read the docs: http://jqueryui.com/demos/dialog/, it spells that out for you, you will also see that it opens by default on the initial call.
Notification dialog function like alert().
function msgbox(text,buttontext) {
buttontext = buttontext || "OK"
$( "<div>" + text + "</div>" ).dialog({
dialogClass: "no-close",
buttons: [
{
text: buttontext,
click: function() {
$( this ).dialog( "close" );
$(this).remove();
}
}
]
});
}
call function
msgbox("test dialog");
or
msgbox("test dialog", "I agree");
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/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.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<form action="" method="post">
Name :- <input type="text" name="name" value="">
Email :-<input type="email" name="email" value="">
<div id="test" class="loader"></div>
Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
</form>
</div>
<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
$( "#test" ).hide();
function myfuncation()
{
alert("hai");
// Here is your ajax request to db related work.
$( "#test" ).show();
//var ajaxresponce = "Sucessfully Insert Form";
//$('#dialog-message').html(ajaxresponce);
// $( "#dialog-message" ).dialog();
}
</script>