I have the following Jquery in my user control which is loaded onto the page, however the jquery is not firing at all:
<script type="text/javascript" >
$(document).ready(function () {
$("div.holder").jPages({
containerID: "itemContainer",
perPage: 2,
first: false,
previous: "span.arrowPrev",
next: "span.arrowNext",
last: false
});
});
</script>
I have tried stripping this out and just using an alert when inside of document.ready but this still does not fire. How can i get this code to execute inside of a user control in aspx?
And simply this is the html i am using:
<div class="eng-container">
<!-- navigation holder -->
<div class="holder">
</div>
<!-- wrapped custom buttons for easier styling -->
<div class="customBtns">
<span class="arrowPrev"></span>
<span class="arrowNext"></span>
</div>
<ul id="itemContainer">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</div>
There are no obvious errors with the code i can see.
EDIT
http://jsfiddle.net/p4LES/1/
EDIT 2
Heres the pastebin link for the code, it is quite long though for the whole page. At line 185 my script begins and my HTML code related to it.
http://pastebin.com/szknh76v
UPDATE
I've tried moving the jQuery code in question to the main.Master file for my project which looks to have fixed the problem in question and it is now firing. Although I have no clue as to why the javascript would not fire within the control.
I created a new HTML page and this worked for me:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jPages.min.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$("div.holder").jPages({
containerID: "itemContainer",
perPage: 2,
first: false,
previous: "span.arrowPrev",
next: "span.arrowNext",
last: false
});
alert("myMsg");
});
</script>
<head>
<title></title>
</head>
<body>
<div class="eng-container">
<!-- navigation holder -->
<div class="holder">
</div>
<!-- wrapped custom buttons for easier styling -->
<div class="customBtns">
<span class="arrowPrev"></span>
<span class="arrowNext"></span>
</div>
<ul id="itemContainer">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</div>
</body>
</html>
Related
I have a jQuery UI tab control, created using asp.net repeater, and am trying to make sure on page load first tab is selected and also keep the selected tab on postbacks.
I have worked out the postback part but am having problem getting first tab's name. I have applied styling to tabs. This is what I have and what have tried:
<div id="divCategories">
<asp:Repeater runat="server" ID="rptCategories">
<HeaderTemplate>
<ul class="bronze nav nav-tabs" role="tablist">
</HeaderTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
<ItemTemplate>
<li>
<a href='#<%# Eval("Abbrev")%>' data-toggle="tab" aria-controls='<%# Eval("Abbrev")%>'>
<p class="tab title"><%# Eval("CourseCategory")%></p>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:HiddenField ID="hfSelCat" runat="server" />
<script type="text/javascript">
$(function () {
debugger
//$("#divCategories").tabs();
var tabName = $("[id*=hfSelCat]").val() != "" ? $("[id*=hfSelCat]").val() : 'AnOps';//$("#divCategories").tabs('option', 'active');
$('#divCategories a[href="#' + tabName + '"]').tab('show');
$("#divCategories a").click(function () {debugger
$("[id*=hfSelCat]").val($(this).attr("href").replace("#", ""));
});
});
</script>
if I uncomment first line in the script that initializes the tabs; I lose tab styling; if I comment it out, I get an error on next line when I try to access .tabs('option','active') because tab is not initialized yet. So, I am using hard-coded tab name ('AnOps');
Because the tab names are generated dynamically, basically I am trying to get the name of the first tab, whatever it may be.
Update (based on Dee's suggestion)
I modified the script like below; it does set the selected tab to first one but none of the styling is applied.
<script type="text/javascript">
$(function () {
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
debugger
//$("#divCategories").tabs();
var tabName = $("[id*=hfSelCat]").val() != "" ? $("[id*=hfSelCat]").val() : 'AnOps';//$("#divCategories").tabs('option', 'active');
$('#divCategories a[href="#' + tabName + '"]').tab('show');
$("#divCategories a").click(function () {
$("[id*=hfSelCat]").val($(this).attr("href").replace("#", ""));
});
});
</script>
According to documentation of active option it can be specified with integer value which tab will be active at initialisation (zero will activate the first tab). If I am not wrong this is all you need to keep the first tab selected whenever the page loads. HTH
Example:
<script type="text/javascript">
$(function () {
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
});
</script>
To define your own look some classes of jquery-ui can be edited in Theme Roller. So you create your style-css file and link it the the page (probably master-page). Then just call tabs() function and the style will be applied. You shouldn't define style inside of the repeater yourself. Maybe this is your problem you mentioned in the comment?
First use Theme Roller and generate your style. For example I have changed the background and border of active item to black-red (pretty ugly :)).
Then save the generated files to local folder, I saved it to folder named js but the name is not important. Link the generated css files to your asp.net page. Here I have example with simple html file, but that is not important. As you can see the <ul> doesn't have any style.
Nobullman.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="js/external/jquery/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-ui.theme.css">
<link rel="stylesheet" type="text/css" href="js/jquery-ui.structure.css">
</head>
<body>
<!-- This content will be generated by the Repeater, but withou any styles -->
<div id="divCategories">
<ul>
<li>1.Tab</li>
<li>2.Tab</li>
<li>3.Tab</li>
</ul>
<div id="tabs-1">
<p>Text 123</p>
</div>
<div id="tabs-2">
<p>Text 456</p>
</div>
<div id="tabs-3">
<p>Text 789</p>
</div>
</div>
<script type="text/javascript">
$(function() {
// tabs will do the trick and create the tabs css styles inclusive
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
});
</script>
</body>
</html>
The relation of the Nobullman.html and the saved files from Theme Roller looks like this:
When this html file is loaded by browser it looks like this. The styles were applied by jquery-ui-tabs() them selves.
Dropdown is not showing when clicked. Other input fields are working as expected except this.
The dropdown field is one of the field in form tag.
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Select Gender</div>
<div class="menu">
<div class="item" data-value="0">Male</div>
<div class="item" data-value="1">Female</div>
<div class="item" data-value="2">Other</div>
</div>
</div>
</div>
I've initialized it in the script tag just before the end of body tag. Also tried to put in head tag, or added document.ready as well as window.onload but all doesn't fix the problem.
<script>
$('.ui.dropdown').dropdown();
</script>
FYI, I've installed Semantic-UI ASP.NET MVC in Nuget.
I've tried the solutions below but to no avail.
Semantic-ui dropdown is not working
Semantic UI Dropdown is not showing the drop down but everything else is working
I managed to get the drop down list shown now, by adding this script in the head tag.
<script>
$(document).ready(function () {
$('#divDropdown').click(function () {
var clicks = $(this).data('clicks');
if (clicks) {
$('#divDropdown').removeClass('active visible');
$('#dropdownMenu').removeClass('visible');
} else {
$('#divDropdown').addClass('active visible');
$('#dropdownMenu').addClass('visible');
}
$(this).data("clicks", !clicks);
});
});
</script>
By right, it can be as simple that initializing it with .dropdown should work. But somehow it's not.
I'm still waiting for someone to propose a better solution than this.
Thanks.
Include semantic CSS inside the head tag
Include jquery in the end of your body tag, then include semantic UI JS
Put your code from semantic dropdown inside
$(document).ready(function () { //code goes here });
this way it will be executed after everything loads (jquery and semantic) and it will work.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Test semantic</title>
<link rel="stylesheet" type="text/css" href="semantic2/semantic.min.css">
</head>
<body>
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Select Gender</div>
<div class="menu">
<div class="item" data-value="0">Male</div>
<div class="item" data-value="1">Female</div>
<div class="item" data-value="2">Other</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="semantic2/semantic.min.js"></script>
<script>
$(document).ready(function () {
$('.ui.dropdown').dropdown();
});
</script>
</body>
</html>
I have created an ASP.Net Master page with Bootstrap 3.3.7 and Jquery 3.1.0.
Default.master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Default.master.cs" Inherits="BootStrap_With_ASPDotNet.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>This is My Site Using BootStrap in ASP.Net</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384- BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Font Awesome inclusion for the icons on the pages -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text\css" />
<!-- Adding Google Web Fonts to Bootstrap -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
<link href="custom/custom.css" rel="stylesheet" type="text\css" />
<!-- Adding a web font -->
<!--<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css />-->
<script type="text/javascript">
function openModal() {
$('#myModal').modal('show');
}
</script>
</head>
<body>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<!--Bootstrap Modal (Dialog Box / Pop-up Window) Example-->
<div id="MyModal" class="modal fade" role="dialog" runat="server">
<div class="modal-dialog" runat="server">
<div class="modal-content" runat="server">
<div class="modal-header" runat="server">
<button type="button" class="close" data- dismiss="modal">×</button>
<h4>This is Modal Header</h4>
</div>
<div class="modal-body" runat="server">This is Modal Body
</div>
<div class="modal-footer" runat="server">This is Modal Footer
<button type="button" class="btn btn-default" data-dismiss="modal" runat="server">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Bootstrap Model (Dialog Box / Popup Window)-->
</body>
</html>
As you can see I have placed a Popup Dialog at the bottom of the MasterPage so that every instance of the MasterPage i.e. Content Pages will be use this.
Also I have created a JavaScript Function called 'openModal()' has created at the head of the MasterPage to use across all the content pages.
Now I have created a content page 'WebForm1.aspx' using the previously created MasterPage and added a button. Please refer the code below.
WebForm1.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Default.Master"
AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="BootStrap_With_ASPDotNet.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Button ID="btnClickMe" runat="server" OnClick="btnClickMe_Click"
Text="Click Me" CssClass="btn btn-danger"/>
</asp:Content>
What I want is when I click the button it should show the popup and I need to do it from code behind. See below what I have tried.
protected void btnClickMe_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}
However it's not working. I can't figure it out why. So could someone help me on this?
Thanks
I got the answer by my self. Please refer the below information.
First place the below JS code in the .
function openModal() {
$('#myModal').modal('show');
}
Second In server side on button click add the below function()
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { openModal(); });", true);
FYI for others in search for Bootstrap 4 Modal not showing up.
I use master page and have the modal inside a child page, jquery 3.2.1 and bootstrap 4 beta 2.
If the modal do not show up, check the page source, and see if you can find it there.
When you find the modal, it will most likely have change id.
Use .modal or whatever class name used on the modal to be sure hit the it.
Javascript part also need to be before the the child page loads, as the code behind run when if gets to that content part.
Javascript (masterpage head tag):
function openModal() { $('.modal').modal('show'); }
code behind (child page):
ScriptManager.RegisterStartupScript(this, this.GetType(), "", "openModal();", true);
This code behind also works.
Page.ClientScript.RegisterStartupScript(this.GetType(), "", "openModal();", true);
Can anyone tell me how to use jQuery tooltip on jQuery accordion control?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Accord').accordion(
{
create: function (event, ui) {
$('.ui-accordion-header').attr("disabled", true);
}
});
})
$(document).tooltip();
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="row" id="Accord">
<h2>Getting started</h2>
<div class="col-md-4">
<p>
ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
</p>
</div>
<h2>Get more libraries</h2>
<div class="col-md-4">
<p>
NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301949">Learn more »</a>
</p>
</div>
<h2>Web Hosting</h2>
<div class="col-md-4">
<p>
You can easily find a web hosting company that offers the right mix of features and price for your applications.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301950">Learn more »</a>
</p>
</div>
</div>
</form>
</body>
</html>
Above is my sample code. Please guide me how can I integrate tooltip with accordion? I want to get certain contents of panel on hovering mouse over the headers of accordion.
no need to use any plugin. just write it by yourself.
you can put your content which you want to show up on hover in a custom attribute ( or for example rel attribute ) and get it's value and show it in an absolute positioned span generated by jquery.
for example :
HTML:
<h2 rel="YOUR CONTENT GOES HERE">Web Hosting</h2>
jquery:
$(function(){
var ttContent = $('h2').attr('rel');
$('h2').hover(function(){
$(this).append('<span class="ttbox">' + ttContent + '</span>');
},function(){
$(this).children('.ttbox').remove();
});
});
CSS:
h2 { position:relative; }
.ttbox { position:absolute; display:none; top:20px; width:200px; height:30px; display:block; background:#000; color:#fff; }
FIDDLE DEMO
I am new one for ASP.NET.
I want to list out my views in TabView.
I do the Following Changes in my application,
In _Layout.cshtml i add the following bundle in
<head>
#Styles.Render("~/Content/themes/base/css")
</head>
and
<Body>
#Scripts.Render("~/bundles/jqueryui")
<Body>
After that i add two controller like Default1 and Default2, in both controller i add one view like, index.
Then i write the following code in Index.cshtml in Home view to display my controller view in particular tab like.
<div id="body">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
#section scripts
{
<script>
$(function () {
$("#tabs").tabs();
});
</script>
}
</div>
</div>
But it's not working. I don't Know i add more code for work that.
Please help me. Thanks in advancce.
You have to add content also to display on tab click .so add two div in your code .as shown below.
Modified code ::
<div id="body">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
#section scripts
{
<script>
$(function () {
$("#tabs").tabs();
});
</script>
}
</div>
<div id="tab-1">
'content which you want to display on click of first tab'
</div>
<div id="tab-2">
'content which you want to display on click of second tab'
</div>
</div>
Don't know if it will fix all your issues but this:
$(function () {
$(function () {
$("#tabs").tabs();
});
});
should be:
$(function () {
$("#tabs").tabs();
});
You don't need 2 $(function() {}) handlers