I have a set of accordion panes(dynamically created) contained in an Accordion control. Basically, what I am wanting is for the user to be capable of dragging these accordion panels so that instead of
A pane
B pane
C pane
They can drag and drop it to be something like
B pane
A pane
C pane
Or whatever. Also, more importantly, I would need to be able to detect that they have changed the order. Would there be a way to have it when they "drop" the pane that it can update a hidden field or something? I don't need a postback on every single drag and drop, but rather I want for when they hit a save button for the server application to detect the order in which the panes are so that it can save this order.
I would prefer to stay away from javascript libraries, but if it would be the easiest way, then I'll consider it.
Based on petersendidit's answer but without "disappearing accordion" bug...
<div id="accordion">
<div id="section_1">
<h3>Section 1</h3>
<p>
Body 1
</p>
</div>
<div id="section_2">
<h3>Section 2</h3>
<p>
Body 2
</p>
</div>
<div id="section_3">
<h3>Section 3</h3>
<p>
Body 3
</p>
</div>
<div id="section_4">
<h3>Section 4</h3>
<p>
Body 4
</p>
</div>
</div>
and
$("#accordion").accordion({
header:'h3'
}).sortable({
items:'>div'
});
Demo at: https://jsbin.com/bitiyucasa
You can do something like this with jQuery UI:
$("#accordion").accordion()
.sortable({
items:'>.ui-accordion-header',
change: function(event, ui) {
$content = ui.item.next();
},
stop: function(event, ui) {
ui.item.after($content);
}
});
This sets $content to the content div for that header on change. And then on stop moves that content to be after the new position of the header.
HTML would be something like:
<div id="accordion">
<h3 id="section_1">Section 1</h3>
<div>
<p>
Body 1
</p>
</div>
<h3 id="section_2">Section 2</h3>
<div>
<p>
Body 2
</p>
</div>
<h3 id="section_3">Section 3</h3>
<div>
<p>
Body 3
</p>
</div>
<h3 id="section_4">Section 4</h3>
<div>
<p>
Body 4
</p>
</div>
</div>
When your user hits the "save" button you can just call:
$('#accordion').sortable( 'serialize');
Which will give you something like:
section[]=2§ion[]=1§ion[]=3§ion[]=4
This widget is probably the sort of thing you are after.
You can add links to the javascript in the head
<link rel="stylesheet" type="text/css" href="accordion.css">
<script type="text/javascript" src="Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="Ext.ux.Accordion.js"></script>
The markup is then just a series of divs. With a little bit of effort you should be able to tie this into the accordion control or create a user control to do your bidding
<div id="acc-ct" style="width:200px;height:300px">
<div id="panel-1">
<div>My first panel</div>
<div>
<div class="text-content">My first panel content</div>
</div>
</div>
<div id="panel-2">
<div>My second panel</div>
<div>
<div class="text-content">My second panel content</div>
</div>
</div>
</div>
A preview of it is available here
Hope this helps
You could use predefined dojo control (open source javascript framework)(link text) and use this control from here (link text) .You can also integrate dojo with asp.net like on my blog (link text).
Waiting for response of your success
Related
I am trying to use summernote on my contact form for the text area, and unfortunately I have the textarea showing twice int he contact form when running the application.
Here is the textarea bootstrap code:
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<label asp-for="Message">Message</label>
<textarea rows="5" class="form-control" asp-for="Message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
#section Scripts{
<script>
//Default font size but not for placeholder...
$('#Message').summernote({
placeholder: "Please enter a message"
});
</script>
}
Note that I am using "summernote-bs4.min.css" & "summernote-bs4.min.js"
The problem is that for Bootstrap 4 I have to use the popper script to make it wor properly;
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ></script>
HTML
<head></head>
<body class=" products show us">
<header id="header"></header>
<div id="wrap">
::before
<div id="container" style="opacity: 1;">
<div class="sidebar"></div>
<article itemtype="http://schema.org/Product" itemscope="itemscope">
::before
<figure>
<img id="img-main" src="test.jpg" itemprop="image" alt="test"></img>
<div id="zoom-lens"></div>
<div id="zoom-holder" style="background: url("test.jpg") no-repeat scroll 0px 0px transparent;" data-background-image="test.jpg"></div>
</figure>
::after
</article>
<div id="details" data-style-limited-with-count="0" data-style-limited="false">
<h1 itemprop="name"></h1>
<p class="style" itemprop="model">
White
</p>
<p class="description" itemprop="description"></p>
<ul class="styles "> // STEP 1: GENERATE LIST OF STYLES PER data-style-name and select the one that matches via adding "selected" to a class""!
::before
<li>
<a class="selected" data-style-name="White" data-style-id="10570" data-sold-out="false" data-images="{"detail_url":"..."..."}" href="..." data-no-tubolink="data-no-tubolink"></a>
</li>
<li>
<a class="" data-style-name="Black" data-style-id="10571" data-sold-out="true" data-images="{"detail_url":"..."..."}" href="..." data-no-tubolink="data-no-tubolink"></a>
</li>
::after
</ul>
<p class="price" itemtype="http://schema.org/Offer" itemscope="itemscope" itemprop="offers"></p>
<div id="cart-controls">
<div id="cart-controls"> // STEP 2 => OPEN THIS!
<form id="cart-addf" class="add" method="post" data-remote="true" action="/shop/168934/add" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline"></div> // STEP 3: GENERATE LIST OF OPTIONS (UNKNOWN AMOUNT OF FIELDSETS) AND SELECT OPTION(S)!
<fieldset>
<select id="size" name="size">
<option value="25134"></option>
<option value="25135"></option>
<option value="25136"></option>
</select>
</fieldset>
<fieldset>
<select id="qty" name="qty">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
<option value="7"></option>
<option value="8"></option>
</select>
<a class="next" href="..."></a>
</fieldset>
<fieldset id="add-remove-buttons">
<input class="button" type="submit" value="add to cart" name="commit"></input> // STEP 4: CLICK BUTTON!
<a class="button continue" href="/shop"></a>
</fieldset>
</form>
</div>
</div>
<script id="cart-controls-add" type="text/x-nano-tmpl"></script>
<script id="cart-controls-remove" type="text/x-nano-tmpl"></script>
<script id="cart-controls-sold-out" type="text/x-nano-tmpl"></script>
<script id="cart-controls-limited" type="text/x-nano-tmpl"></script>
</div>
</div>
::after
</div>
<footer id="nav" style="opacity: 1;"></footer>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
</body>
</html>
DESC
Above is the HTML code that I would like to access, modify values, & then submit data.
I am using c# net 4.0 and HTMLAGILITYPACK to achieve this.
I wrote inside the HTML above 4 total comments (4 things in total that is needed).
I was wondering if the goal of editing values is possible with HTMLAGILITYPACK and if it was possible to click a button on the webpage to submit the values that would be edited.
I found a few references regarding this matter but do not know how to put to proper use.
1: How to click a link element programmatially with HTMLElement?
2: Clicking button automatically using HtmlAgilityPack
PSEUDO CODE
HtmlAgilityPack.HtmlDocument doc = null;
doc = new HtmlAgilityPack.HtmlDocument();
doc.LoadHtml(new WebClient().DownloadString("website above that contains that HTML"));
Not quite sure what you want to accomplish, but I think this might be on the right track:
See this to change any attributes in JQuery http://api.jquery.com/attr/
See this to change/add things that'll happen when you click something https://api.jquery.com/click/
Needless to say, I don't think you need to make the button "click itself", what's the point of it then? :P
But you can make it that if you click it, it does the first thing it should first, and then the second thing after that, within the JQuery click function you'll presumably make.
But like pasty said, I'd like you to elaborate a bit more, feel free to comment and ask if something is unclear in this post.
Our solution runs with a parent frame and a main content iframe. One of the pages in the main content iframe is set up with a series of divs used as tabs, example as follows.
<div id="topRow">
<div class="mainInformation tab tabSelected" runat="server" id="mainInformationTop">
<div class="tabLeft">
<div class="tabMain">
Main Information
</div>
</div>
</div>
<div class="executives tab" runat="server" id="executivesTop">
<div class="tabLeft">
<div class="tabMain">
Executives
</div>
</div>
</div>
</div
<div id="secondRow">
<div id="mainInformationTabGroup" runat="server" class="mainInformation tabGroup">
<div id="overview" runat="server" class="tab tabSelected overview">
<div class="tabLeft">
<div class="tabMain">
Overview
</div>
</div>
</div>
<div id="locations" runat="server" class="tab locations">
<div class="tabLeft">
<div class="tabMain">
Locations
</div>
</div>
</div>
</div>
<div id="executivesTabGroup" runat="server" class="executives tabGroup" style="display: none">
<div id="companyExecutives" runat="server" class="tab companyExecutives">
<div class="tabLeft">
<div class="tabMain">
Company Executives
</div>
</div>
</div>
<div id="affiliatedExecutives" runat="server" class="tab affiliatedExecutives">
<div class="tabLeft">
<div class="tabMain">
Affiliated Company Executives
</div>
</div>
</div>
</div
</div>
The jquery event handlers are loaded from a local .js file, example pertaining to the above HTML as follows
$('#topRow div.tab').click(function() {
$('#topRow div.tabSelected').removeClass('tabSelected');
$(this).addClass('tabSelected');
})
$('#topRow .mainInformation').click(function() {
$('#secondRow').css('display', 'block');
$('#thirdRow').css('display', 'none');
resizeAllIframes();
$('#secondRow .tabGroup').css('display', 'none');
$('#secondRow .mainInformation').css('display', 'block');
$('#secondRow .mainInformation div.tab').not('.locked').children().first().trigger('click');
});
$('#topRow .executives').click(function(){
$('#secondRow').css('display', 'block');
$('#thirdRow').css('display', 'none');
resizeAllIframes();
$('#secondRow .tabGroup').css('display', 'none');
$('#secondRow .executives').css('display', 'block');
$('#secondRow .executives div.tab').not('.locked').children().first().trigger('click');
});
(The click events just change the "src" attribute of the iframe)
The issue I'm experiencing is that sometimes when we load this tab page (and only in Internet Explorer 9+, IE7 seems to not have this issue), I'll click on a tab and nothing will happen. The hover events for the CSS are loaded just fine, but click on the tab does nothing. However, if I click one tab and nothing happens, I can click on the next and it will work fine. Similarly, if I click anywhere in the main content frame first and then on a tab, it will always fire the event handler.
We've noticed this problem happening almost entirely when we try to direct to the tabbed page from the parent frame (we have a quicksearch up there) and we use a Response.Redirect to load the iframe with the tab page. I've tried redirecting this quicksearch to a landing page inside the iframe that then uses a Response.Redirect to get us to the tab page, but it ends up with the same results. When we're clicking on a hyperlink from inside the iframe (Target="_self"), that works just fine.
This issue doesn't happen in Firefox, Chrome, or IE7, but it does in IE9+.
Does anybody have any thoughts, ideas, known bugs that I'm missing, anything like that?
this is how you bind an event to an element:
$(document).bind('click','#topRow div.tab',function() {
$('#topRow div.tabSelected').removeClass('tabSelected');
$(this).addClass('tabSelected');
});
do the exact same for the other events just change the selector part (I mean "#topRow div.tab") with the desired selectors.
I have a .net c# webform using the JQueryUI tabs Example as per the code below:
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div id="divTab1">
Showing Tab 1
</div>
<div id="divTab2">
Showing Tab 2
</div>
<div id="divTab3">
Showing Tab 3
</div>
<div id="divTab4">
Showing Tab 4
</div>
</div>
What I would like to achieve, is based on a condition in my code behind, is to hide specific tabs.
How would I go about doing this?
You can call the JQuery hide() method:
http://api.jquery.com/hide/
In code-behind, evaluate your conditions and register the hide() method invocation with ClientScriptManager.RegisterStartupScript method:
http://msdn.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.registerstartupscript.aspx
I am trying to use the jquery accordion with a repeater. I used the sample directly from the jquery documentation. When I click on the section links, the details open and expand, but you can't see any of the text. The html output looks right to me, not sure where this is going wrong.
<script>
$(document).ready(function () {
$("#accordion").accordion();
});
</script>
<div id="accordion">
<asp:Repeater ID="respondToExceptionsList" runat="server">
<ItemTemplate>
<h3>Section 1</h3>
<div>
sdfffffffffffffff
</div>
</ItemTemplate>
</asp:Repeater>
</div>
This is the html output.
<DIV id=accordion class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role=tablist jQuery1315324170464="2">
<H3 aria-expanded=true class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role=tab tabIndex=0 jQuery1315324170464="3">
<SPAN class="ui-icon ui-icon-triangle-1-s" jQuery1315324170464="13"></SPAN><A tabIndex=-1 href="#">Section 1</A></H3>
<DIV style="HEIGHT: 19px" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role=tabpanel>sdfffffffffffffff </DIV>
</DIV>
This is related to the accordion height being set to zero. I am having the same issue using the accordion in an html repeater generated using angularjs. To fix the problem, the accordion must be refreshed after the data is loaded. I found the answer in the jquery forums here.