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>
Related
I am using thymeleaf for my front end design ,I create a nav bar and
I want this nav bar work for all pages, my Requirement is make one nav
bar and use this nav bar in every page ,with out define another nav
bar in separate page .
I create a nav bar inside my fragments folder that situated inside
template folder
When i call my nav bar in my index page it is not working
Here is my code of index page
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Coursel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="/static/demo.js"></script>
</head>
<body>
<nav th:replace="/fragments/nav :: nav-front"></nav>
<div class="container-fluid">
here my register form codes
</div>
</body>
</html>
nav.html
<nav class="nav">
<a class="nav-link active" th:href="#{/templates/index.html}">Active</a>
<a class="nav-link active" th:href="#{/templates/index.html}">Register</a>
<a class="nav-link active" th:href="#{/templates/index.html}">Login</a>
<a class="nav-link active" th:href="#{/templates/index.html}">AboutUs</a>
</nav>
Here is my project structure
I use IntelliJ IDEA as code editor.
It is possible, look into Thymeleaf Layout Dialect.
In short:
you create some layout.html in your templates folder. In it:
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- all common head tags - meta etc. -->
<title layout:title-pattern="$CONTENT_TITLE - $LAYOUT_TITLE">App name</title><!-- define title in your page template and it will be added too your app name, e.g. 'Home - My App' -->
</head>
<body>
<nav>
<!-- your nav here -->
</nav>
<section layout:fragment="content">
<!-- don't put anything here, it will be replaced by the page contents -->
</section>
</body>
</html>
And in you page templates:
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{/path/to/layout.html}">
<head>
<title>Page name</title>
</head>
<body>
<section layout:fragment="content">
<p>This will be added into your layout!</p>
</section>
</body>
</html>
In order to make it work, you will need to add it to your templateEngine() bean definition:
#Bean
public SpringTemplateEngine templateEngine() {
SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver( thymeleafTemplateResolver() );
templateEngine.addDialect( new LayoutDialect() );
return templateEngine;
}
See mvnrepository to import this dialect using maven.
I have set up my site with an off canvas menu when it goes mobile
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Mobile Application</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/custom-mobile-portrait.css" />
<link rel="stylesheet" href="css/custom-mobile-landscape.css" />
<link rel="stylesheet" href="css/custom-xlarge.css" />
<link rel="stylesheet" href="css/custom-ipad.css" />
<link rel="stylesheet" href="css/custom-ipad-portrait.css" />
<link rel="stylesheet" href="css/font-sizes.css" />
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<script src="js/vendor/modernizr.js"></script>
<a name="head"></a>
</head>
<body>
<div class="off-canvas-wrap mobile-menu" data-offcanvas>
<div class="inner-wrap">
<nav class=" tab-bar hidden-for-large-up" data-topbar ">
<section class="left-small ">
<a class="left-off-canvas-toggle menu-icon " href="# "><span></span></a>
</section>
<section class="middle tab-bar-section ">
</section>
</nav>
<aside class="left-off-canvas-menu ">
<ul class="off-canvas-list ">
<li><label>Dehumaniser App</label></li>
<li><STRONG>TOP</STRONG></li>
<li><STRONG>APP OVERVIEW</STRONG></li>
<li><STRONG>HOW DOES IT WORK</STRONG></li>
<li><a href="#features " ><STRONG>FEATURES</STRONG></a></li>
<li><STRONG>GALLERY</STRONG></li>
</ul>
</aside>
<!-- <aside class="right-off-canvas-menu ">
<ul class="off-canvas-list ">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside> -->
<section class="main-section ">
i put my site content in here and then after my code finishes:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/vendor/fastclick.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" />
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script src="js/myscript.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/myscript.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.single-item').slick();
});
</script>
<script type="text/javascript">
jQuery(document).foundation()
</script>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
<script>
jQuery(document).foundation();
jQuery('a.left-off-canvas-toggle').on('click', function() {
});
</script>
<div id="fixedbutton">
<a href="#head"><img src="img/upbutton.png">
</a>
</div>
</body>
</html>
I get the proper off canvas behavior (I get the three lines box . when I click the box it opens, and the off-canvas menu appears) but when I click a menu link even though the page scrolls smoothly down the off-canvas menu doesn't close. How can I fix this?
Try to add these lines to your script
$(document).foundation({
offcanvas : {
close_on_click : true
}
});
The default.aspx page created when starting a new SharePoint App is not needing my needs since it inherits from the host web master page and I have found it easier to obtain a responsive design with my own index.aspx page that has less complexity. Using this article JSOM in HTML5 Apps, I am attempting to retrieve the FormDigest, but upon code inspection it is not working. Any ideas? Here is my current code:
<!DOCTYPE html>
<%--Declare the Page Language and obtain the SharePoint namespace required for retrieving the FormDigest header--%>
<%# Page language="C#" %>
<%# Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Import Namespace="Microsoft.SharePoint" %>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/App.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script src="/_layouts/1033/init.js"></script>
<script src="/_layouts/MicrosoftAjax.js"></script>
<script src="/_layouts/sp.core.js"></script>
<script src="/_layouts/15/sp.runtime.js"></script>
<script src="/_layouts/15/sp.js"></script>
<script src="/_layouts/15/SP.RequestExecutor.js"></script>
<script src="/_layouts/15/SP.UI.Controls.js"></script>
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="../Scripts/angular-route.min.js"></script>
<script src="../Scripts/angular-resource.min.js"></script>
<script src="../Scripts/dirPagination.js"></script>
<script src="../Services/services.js"></script>
<script src="../Controllers/controllers.js"></script>
<script src="../App.js"></script>
</head>
<body>
<SharePoint:FormDigest ID="FormDigest1" runat="server"></SharePoint:FormDigest>
<div class="container" data-ng-app="app">
<div id="chrome_ctrl_container"></div>
<div>
<p id="message">
initializing...
</p>
</div>
<div data-ng-view></div>
<hr>
<footer></footer>
</div>
</body>
</html>
I have discovered that I needed a form instance to execute the call. Its working perfectly:
index.aspx
<!DOCTYPE html>
<%--Declare the Page Language and obtain the SharePoint namespace required for retrieving the FormDigest header--%>
<%# Page language="C#" %>
<%# Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Import Namespace="Microsoft.SharePoint" %>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/App.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script src="/_layouts/1033/init.js"></script>
<script src="/_layouts/MicrosoftAjax.js"></script>
<script src="/_layouts/sp.core.js"></script>
<script src="/_layouts/15/sp.runtime.js"></script>
<script src="/_layouts/15/sp.js"></script>
<script src="/_layouts/15/SP.RequestExecutor.js"></script>
<script src="/_layouts/15/SP.UI.Controls.js"></script>
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="../Scripts/angular-route.min.js"></script>
<script src="../Scripts/angular-resource.min.js"></script>
<script src="../Scripts/dirPagination.js"></script>
<script src="../Services/services.js"></script>
<script src="../Controllers/controllers.js"></script>
<script src="../App.js"></script>
</head>
<body>
<%-- Get the form digest to use for POST/Update/Delete operations via Web services--%>
<form id="Form1" method="post" runat="server">
<SharePoint:FormDigest ID="FormDigest1" runat="server"></SharePoint:FormDigest>
</form>
<div class="container" data-ng-app="app">
<div id="chrome_ctrl_container"></div>
<div>
<p id="message">
initializing...
</p>
</div>
<div data-ng-view></div>
<hr>
<footer></footer>
</div>
</body>
</html>
Example of us in ngResource call via AngularJS:
appServices.factory('appTypes', ['$resource', function ($resource) {
return $resource("/_api/web/lists/getbytitle('Todo Types List')/Items", {Id: "#Id"},
{
'query': { method: "GET", isArray: false, headers: { 'Accept': 'application/json;odata=nometadata' } },
'update': { method: 'PATCH', headers: { 'Accept': 'application/json;odata=nometadata' } },
'save': { method: 'POST', headers: { 'Accept': 'application/json;odata=nometadata', 'content-type': 'application/json;odata=nometadata', 'X-RequestDigest': $("#__REQUESTDIGEST").val() } }
}
);
}]);
I'm migrating a beginning project from PrimeFaces 2.2.1 to 3.3.1, following the steps of MigrationGuide and using the 3.3 version's Users Guide.
I want a p:dialog in the top of the pages, containing the navigation.
This dialog must be shown when I click in a link, in the top of the pages.
Error description:
When I click on "I Want" link, nothing happens on page (the p:dialog doesn't shows up), and I get
this error on Firebug's console:
popupModalMenu is not defined
http://localhost:8080/{appname}/view/xhtml/principal.jsf
Line 1
The p:dialog (id="modalMenu") is loaded on page.
Here goes the structure:
Main page (/view/xhtml/principal.xhtml):
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="base/master.xhtml">
<ui:define name="conteudo">
Title of Main Page
</ui:define>
</ui:composition>
</html>
Master (/view/xhtml/base/master.xhtml):
<html><!-- DOCTYPE GOES HERE -->
<ui:include src="head.xhtml" /> <!-- CONTAINS CSS, JAVASCRIPT STUFF -->
<h:body>
<f:view contentType="text/html" >
<div id="wrapper">
<!-- TOP BEGIN -->
<div id="header">
<div class="topo" id="topo">
<div id="menuTopo" class="menu left">
<a id="linkMenu" class="left" href="javascript:;" onclick="popupModalMenu.show();">
I want
<div class="iconeDoMenu"></div>
</a>
</div>
</div>
</div>
<!-- END TOP -->
<!-- CONTENT BEGIN -->
<div id="content">
<div id="conteudo">
<!-- SYSTEM MENU BEGIN -->
<ui:include src="../menu.xhtml" />
<!-- END SYSTEM MENU -->
</div>
</div>
<!-- END CONTENT -->
</div>
</f:view>
</h:body>
</html>
Head (/view/xhtml/base/head.xhtml):
<html><!-- DOCTYPE GOES HERE -->
<h:head>
<title>Title</title>
<meta http-equiv="keywords" content=" " />
<meta http-equiv="description" content=" " />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="../css/base/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/base/general.css" />
<link rel="stylesheet" type="text/css" href="../css/base/skin.css" />
<link rel="stylesheet" type="text/css" href="../css/primefaces/primefaces.css"/>
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../css/base/generalIE7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="../css/base/generalIE8.css" />
<![endif]-->
<script type="text/javascript">
jQuery.noConflict();
</script>
<script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/currency_mask.js"></script>
<script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/date_mask.js"></script>
<script type="text/javascript" src="../js/ourjs.js"></script>
<!-- Internal screen's Css -->
<link href="../css/generalUtilScreen.css" media="all" rel="stylesheet" type="text/css"/>
<!-- menu's scripts and css -->
<link href="../css/base/menu.css" media="all" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../js/jquery.metadata.js"></script>
<script type="text/javascript" src="../js/jquery.mb.flipText.js"></script>
<script type="text/javascript" src="../js/mbExtruder.js"></script>
<script type="text/javascript">
$(function(){
$("#extruderLeft").buildMbExtruder({
position:"left",
width:300,
extruderOpacity:.8,
hidePanelsOnClose:true,
accordionPanels:true,
onExtOpen:function(){},
onExtContentLoad:function(){},
onExtClose:function(){}
});
});
</script><!-- menu's scripts and css end -->
<!-- Scripts inside menu -->
<h:outputStylesheet library="primefaces/jquery/ui" name="jquery-ui.css"/>
<h:outputScript library="primefaces/jquery/ui" name="jquery-ui.js" target="head"/>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
});
</script><!-- end Scripts inside menu -->
<script type="text/javascript" src="../js/verticaltabs.pack.js"></script> <!--http://dean.edwards.name/packer/-->
<link rel="stylesheet" href="../css/base/verticaltabs.css" />
<script type="text/javascript" src="../js/provider.js"></script>
<script type="text/javascript">
$(document).ready(function(){fornecedor.verticalTabs();});
</script>
<!-- Internal screen's Css -->
<link href="../css/provider.css" rel="stylesheet" type="text/css"></link>
<!-- END PROVIDER -->
</h:head>
</html>
Menu (/view/xhtml/menu.xhtml):
<html><!-- DOCTYPE GOES HERE -->
<p:dialog id="modalMenu" widgetVar="popupModalMenu"
draggable="false" resizable="false" modal="true"
width="940" height="580"
showEffect="fade" hideEffect ="fade"
position="null" closable="false" dynamic="false"
minimizable="false" maximizable="false">
<h:form id="formMenu">
<div id="nav">
<div id="menu">
<p:commandButton id="btnCloseModalMenu" styleClass="btcloseMenu"
title="Click here to close" onclick="popupModalMenu.hide();">
</p:commandButton>
<!-- Menu's content goes this way: -->
<div id="divN">
<!-- Group of content -->
<h3><h:outputLabel>Group N</h:outputLabel></h3>
<div class="linkN">
<!-- Links to pages -->
<ul>
<li><a id="menuN" href="urlN">Title N</a></li>
</ul>
</div>
</div>
</div>
</div>
</h:form>
</p:dialog>
</html>
I just removed some code from Head. Seems that it is a conflict with JQuery's version. Thanks to a coworker.
So the code went like this:
Head (/view/xhtml/base/head.xhtml):
<html><!-- DOCTYPE GOES HERE -->
<h:head>
<title>Title</title>
<meta http-equiv="keywords" content=" " />
<meta http-equiv="description" content=" " />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="../css/base/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/base/general.css" />
<link rel="stylesheet" type="text/css" href="../css/base/skin.css" />
<link rel="stylesheet" type="text/css" href="../css/primefaces/primefaces.css"/>
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../css/base/generalIE7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="../css/base/generalIE8.css" />
<![endif]-->
<!-- REMOVED
<script type="text/javascript">
jQuery.noConflict();
</script>
-->
<script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/currency_mask.js"></script>
<script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/date_mask.js"></script>
<script type="text/javascript" src="../js/ourjs.js"></script>
<!-- Internal screen's Css -->
<link href="../css/generalUtilScreen.css" media="all" rel="stylesheet" type="text/css"/>
<!-- menu's scripts and css -->
<link href="../css/base/menu.css" media="all" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../js/jquery.metadata.js"></script>
<script type="text/javascript" src="../js/jquery.mb.flipText.js"></script>
<script type="text/javascript" src="../js/mbExtruder.js"></script>
<script type="text/javascript">
$(function(){
$("#extruderLeft").buildMbExtruder({
position:"left",
width:300,
extruderOpacity:.8,
hidePanelsOnClose:true,
accordionPanels:true,
onExtOpen:function(){},
onExtContentLoad:function(){},
onExtClose:function(){}
});
});
</script><!-- menu's scripts and css end -->
<!-- Scripts inside menu -->
<h:outputStylesheet library="primefaces/jquery/ui" name="jquery-ui.css"/>
<h:outputScript library="primefaces/jquery/ui" name="jquery-ui.js" target="head"/>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
});
</script><!-- end Scripts inside menu -->
<script type="text/javascript" src="../js/verticaltabs.pack.js"></script> <!--http://dean.edwards.name/packer/-->
<link rel="stylesheet" href="../css/base/verticaltabs.css" />
<script type="text/javascript" src="../js/provider.js"></script>
<script type="text/javascript">
$(document).ready(function(){fornecedor.verticalTabs();});
</script>
<!-- Internal screen's Css -->
<link href="../css/provider.css" rel="stylesheet" type="text/css"></link>
<!-- END PROVIDER -->
</h:head>
</html>
Place <h:head/> in head.xhtml
You are missing a </div> tag after <!-- END SYSTEM MENU --> in the master.xhtml file
hello i am using thickbox as an information popup. it works well in IE7/8 & FF but in IE6 it does not display the content just garbled characters. i have attached my code and would be grateful if someone could tell me what the problem is? many thanks.
Answer
and the doctype
<!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">
screengrabs
IE6
http://i53.tinypic.com/9gm4jb.png
IE8
http://i56.tinypic.com/55qexf.png
Check the documentation in the following link:
[JQuery Thick box][1]
[1]: http://jquery.com/demo/thickbox/
And use the following code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<script type="text/javascript">
function show_search (value)
{
var url= 'http://www.google.com';
tb_show('Change Details','"+url+"');
setTimeout("remove()",1*100);
return false;
}
function remove()
{
tb_remove();
alert("check");
}
</script>
</head>
<body>
<form id="hotel_search_popup">
<h2>Search Hotels</h2>
<input name="category" type="radio" value="F" class="radioSearch" onclick="return show_search(this.value);"/>
<label>Flight</label>
</form>
</body>
</html>