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.
Related
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);
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>
I am currently running into an issue with CKEditor (version 4.4.0) in the WebBrowser control for WinForms in C# (Framework 3.5). I am using the UIColor and Font Size/Family options with the editor - which works fine when I load the page in IE. Through the WebBrowser control, the click events when trying to select a color or font (or the right click cut/copy/paste menu for that matter) never register. I have noticed, that if I use the keyboard to select the option and hit enter, everything works as it is supposed to.
What appears to be happening on the ckeditor side is it creates a div for the control, loads an iframe within that div and generates the HTML so you get a nice, rich display of what font you would be choosing, etc. It seems like after this has been loaded, the WebBrowser control doesn't recognize the newly created HTML within that iframe, and treats it as though it does not exist when I click on it. i.e. If I click on the color and there is another button under that color, the other buttons click event gets registered. Is there any way for me to inform the Web Browser control something is actually there - or force it to read the newly rendered code? I have noticed that the Navigating event also gets fired when I click on the font or color, but it never enters the DocumentCompleted/Navigated routine afterwards.
I have the web browser control in my WinForms app running under IE 9 settings (using FEATURE_BROWSER_EMULATION = 9000), although I have IE11 installed. I have also tried using FEATURE_BROWSER_EMULATION = 11000, with no success as well.
Anyone have any ideas on what to do here?
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Editor Test</title>
<script src="../assets/js/jquery/jquery.js" type="text/javascript"></script>
<script src="../assets/js/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="../assets/js/ckeditor/adapters/jquery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#uxBody").ckeditor();
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].on('change', function () { pageIsDirty = true; });
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<fieldset class="fldSet">
<legend><strong>Correspondence</strong></legend>
<table border="0" cellpadding="2" cellspacing="0" class="icsForm">
<tr id="subjectRow" class="icsFormRow">
<td class="right">Subject:</td>
<td class="left">
<asp:TextBox ID="uxSubject" runat="server" MaxLength="78" style="width: 400px" />
</td>
</tr>
<tr id="bodyRow" class="icsFormAltRow">
<td class="right" style="vertical-align: top;">
<span class="reqFields">*</span>Body:
</td>
<td class="left">
<asp:TextBox ID="uxBody" runat="server" TextMode="MultiLine" Rows="10" style="width: 600px;" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
CK Editor Config File:
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbar = [
{ name: 'clipboard', items: ['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'] },
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
{ name: 'links', items: ['Link', 'Unlink'] },
{ name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar'] },
'/',
{ name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote'] },
{ name: 'align', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
{ name: 'fonts', items: ['Font', 'FontSize', '-', 'TextColor', 'BGColor'] },
{ name: 'tools', items: ['Maximize', '-', 'Source'] },
];
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.width = '600px';
};
Let me know if you guys would like to see anything else. Again, the problem ONLY manifests itself when it's within the WebBrowser control for WinForms. When navigating to the page via a normal browser, everything works fine. Thanks again!
First, make sure you correctly implement the WebBrowser feature control. I posted some working code you can copy:
https://stackoverflow.com/a/18333982/1768303
Then:
Use <!DOCTYPE html> and <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> on the web page hosting CKEditor.
Check document.compatMode to make sure it is CSS1Compat (rather than BackCompat).
Check document.documentMode to make sure it matches the actual installed version of IE.
This will make sure CKEditor can use the latest and greatest HTML5/JavaScript features implemented by the underlying IE/MSHTML rendering engine.
Once the above has been done, see if the problem goes away. Here's how the CKEditor-hosting page may look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>CKEditor test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
CKEDITOR.domReady(function () {
CKEDITOR.replace("editorDiv", {
docType: '<!DOCTYPE html>',
on: {
instanceReady: function (evt) {
var editor = evt.editor;
// the editor is ready
editor.execCommand("maximize");
}
}
});
});
});
</script>
</head>
<body>
<div id="editorDiv"></div>
</body>
</html>
I have created an Image Slider using html with Jquery. I am trying to put this image slider into a contentplaceholder on my homepage which is running off a masterpage template with c#. It is not working.
Image Slider HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Slider</title>
<style type="text/css">
.slider {
width:1025px;
height:500px;
overflow:hidden;
margin:30px auto;
}
.slider img{
width:1025px;
height:500px;
display:none;
margin:30px auto;
}
</style>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery- ui.min.js"></script>
<script type="text/javascript">
function Slider() {
$(".slider #1").fadeIn("fade, 500");
$(".slider #1").delay(5500).hide("slide", { direction: 'left' }, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function (){
$(".slider #" + count).show("slide",{direction:'right'}, 500);
$(".slider #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count = 1;
}else{
count = count + 1;
}
}, 6500);
}
</script>
</head>
<body onload="Slider();">
<div class="slider">
<img id="1" src="Promotion1.png" border="0" alt="Promotion one" />
<img id="2" src="Promotion2.png" border="0" alt="Promotion two" />
</div>
</body>
</html>
Content Placeholder I am trying to put HTML into:
<asp:Content ID="Content3" runat="server" contentplaceholderid="ContentPlaceHolder1">
</asp:Content>
You must have a masterpage right that's why ur using a content page right ? You masterpage has already defined head / body and so on the HTML tags, so u need to just put the divs in the content place holder
<div class="slider" onload="Slider()";>
<img id="1" src="Promotion1.png" border="0" alt="Promotion one" />
<img id="2" src="Promotion2.png" border="0" alt="Promotion two" />
</div>
and your onload function call , you need to move your src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery- ui.min.js">
tag into the masterpage and put your jS in a JS file and reference it inside your masterpage ideally, you could put your JS code in the content page but this is not good practice, it just easier to create the js file and plonk in a reference in your masterpage...good luck !
First thing first, your CDN is wrong. it should be:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
notice you missed the https part. Then HTML for that single page should work by itself.
Then follow other suggestions using proper master and content tag, or comes back for more questiond :D
In a master page add the links to jquery, then add a content placeholder for the head.
Add a new page using the master page recently created. Add the function slider in that content placeholder. Remove the onload from the body and in the page use .load() using jquery to add the call.
Add a second place holder in the master to add content in the body and add your html for the slider.
Hope it helps.
I have made this example and it works fine on a plain aspx webpage. I use Visual Studio 2010.
Head-part:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#CheckBoxShowHide').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
When I have a masterpage and the same code on the child webpage JQuery dosent work. The loading of the JQuery javascript file fails. The child page and the masterpage are in the same folder. If I put the code on the masterpage it works fine but I want JQuery on the child page too. Please help me.
I can see another problem as well, you are trying to grab the checkbox ID based on its server ID not ClientID. Once a asp control has been rendered onto the client its ID gets changed. Try the following code:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
The following line is the only thing I changed:
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
Hope it helps.
Are you sure your page is loading jQuery, use a absolute URL in your master page to reference the jQuery library.
If jQuery is on your masterpage, it will work on your child page.
Master <head>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
Child <head>
<head>
<script type="text/javascript">
$(document).ready(function () {
//Do Child jQuery Stuff here....
});
</script>
<head>
If you are having issues the only other thing to check is to make sure that your path to the jquery file is right. (ie Maybe it should be ../js/jquery.js)
Use this to make sure that isn't the issue if the other thing I suggested doesn't work:
For your Master Page <head>:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
Or (if you want to host it)
<head>
<script type="text/javascript" src='<%=ResolveURL("~/js/jquery.js")%>'></script>
</head>
Where ~/ is your root.
You should be able to just place the link to the JQuery library in the HEAD section of the master page. When the page is ran it will generate the HTML content for the master page with the link in the HEAD section, the content page should be able to then make user of the JQuery library. I know we had an issue with how the link was being done. Maybe try linking in the HEAD of the master page like this instead:
<script type="text/javascript" src='<% = ResolveURL("~/js/jquery.js") %>' ></script>
The '<% %>' is a way to do inline server side code as the page loads, so the page will inject the correct src given the location of the URL.