I have problem in loading placeholder on jqueryui accordin click. I have populated according from backend. i need to populate the place holder based on the accordin header click.
this is my html
<html>
<head>
<script>
$(function () {
$('#login').button({ icons: { primary: "ui-icon-person"} });
$('#showDataSource').button({ icons: { primary: "ui-icon-newwin"} });
$('#logout').button({ icons: { primary: "ui-icon-locked"} });
$('#login').click(function () {
var panel = $('#loginPanel').dialog({ modal: true });
panel.parent().appendTo($("form:first"));
});
$('#logout').click(function () {
(function (event) {
});
});
$('#showDataSource').click(function () {
$('#dataSource').dialog({ modal: true, width: 1000, height: 700 });
$('.accordion').accordion({ autoHeight: false, navigation: true, collapsible: true,
active: false,
changestart: function (event, ui) {
var dataSourceID = ui.newHeader.find('a').attr('id');
//var dataSourceColumn = EasyOutputWeb.Services.GetDataSourceColumns(dataSourceID, onsuccess, onError);
$.post(dataSourceID, function (data) {
//ui.newHeader.next("div").html(dataSourceID);
$('#columnPlaceHolder').html(dataSourceID);
});
}
});
});
});
function onsuccess(msg) {
alert(msg);
}
function onError(msg) {
alert(msg);
}
</script>
</head>
<body>
<div id="dataSource" runat="server">
<div class="divtable">
<div class="headrow" id="#accordianHeight">
<div class="divcol">
Data Sources</div>
<div class="divcol" >
Columns</div>
<div class="divcol">
Strong Keys</div>
</div>
<div class="divrow">
<div class="content">
<div class="accordion" id="accordianHeight">
<asp:PlaceHolder ID="dataPlaceHolder" runat="server" />
</div>
</div>
<div class="content">
<div id="dataColumn">
test column
<asp:PlaceHolder ID="columnPlaceHolder" runat="server" />
</div>
</div>
<div class="content" >
<div id="dataKey">
Test key
<asp:PlaceHolder ID="keyPlaceHolder" runat="server" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The first mistake here is that you use PlaceHolder that they are not warp with any tag and so jQuery can not grab them. Use Panel that warp with span or div your content.
Second mistake is that when the asp.net renders them the final id of each one is get from the .ClientID property, so the code of jQuery will be as:
$('#<%=columnPlaceHolder.ClientID%>').html(dataSourceID);
And one comment, if you do not actually add any controls on code behind on your Panel's then you simple place a <div id="columnPlaceHolder"></div> code to write on them, and use the jQuery call as it is now (don't add the CliendID)
Related
I am trying to reload the jsTree using ajax load method calling the Action-controller method to load partial view. Initially on page-load the jstree renders fine but after ajax call to update makes it plain ul li items.
I am using HTML data source (UL LI items).
Index.cshtml:
#model List<TreeViewJSDemo.Models.ModelViews.EmployeeNoRootModel>
#{
ViewBag.Title = "About Page";
}
<link href="~/Content/jsTree/docs.css" rel="stylesheet" />
<link href="~/Content/jsTree/themes/default/style.css" rel="stylesheet" />
<div class="row">
<div class="col-md-8">
<button id="refreshTree" class="btn btn-sm">Reload</button><br /><br />
<div id="dv-tree-wrapper">
#{ Html.RenderPartial("_TreePartial", Model); }
</div>
</div>
<div class="col-md-4" id="dv-node-details">
#{ Html.RenderPartial("_NodeDetailPartial", model: TempData["FirstNode"]); }
</div>
</div>
#section Scripts
{
<script src="~/Scripts/jsTree3/jstree.js"></script>
<script type="text/javascript">
$(function () {
LoadTargetTree();
/*********** refresh tree *********** */
$('#refreshTree').on('click', function (event) {
//$('#dv-tree-wrapper').load('#Url.Action("RefreshTree", "Home")');
$('#divtree').jstree('destroy').empty();
$('#dv-tree-wrapper').load('#Url.Action("RefreshTree", "Home")');
LoadTargetTree();
$('#divtree').jstree('refresh');
});
});
function LoadTargetTree() {
$('#divtree')
.jstree({
core: { check_callback: true }
});
}
</script>
}
_TreePartial.cshtml:
#model List<TreeViewJSDemo.Models.ModelViews.EmployeeNoRootModel>
<div id="divtree">
#foreach (var item in Model)
{
<ul id="tree-#item.Id">
<li id="node-#item.Id">
#item.Name
#Html.Partial("_ChildrensPartialNoRoot", item.EmployeeList)
</li>
</ul>
}
</div>
As per Stephen feedback, changed code to call the LoadTargetTree() in the success callback to resolve this issue.
Code Changed:
$('#dv-tree-wrapper').load('#Url.Action("RefreshTree", "Home")', function () { LoadTargetTree();});
I'm trying to implement this gallery on a website: http://ashleydw.github.io/lightbox/
There are no instructions so I'm pretty lost, have been trying to get it to work.
I copied what's below more or less from the source code from the link above.
I moved all the files included in the github download to a new folder dist/lightbox (e.g. ekko-lightbox.css, ekko-lightbox.js).
It's not doing anything, when you click on an image, it just opens the image url.
What am I missing? Do I need to link to some other files or what's wrong?
<head>
<!-- leaving out the other stuff here -->
<link href="dist/lightbox/ekko-lightbox.css" rel="stylesheet">
<link href="dist/css/bootstrap.css" rel="stylesheet">
<link href="dist/css/custom.css" rel="stylesheet">
</head>
<body>
<!-- this is from the source code, just updated the images -->
<h3 class="page-header" id="image-gallery">Example #2: Gallery of Images</h3>
<p>By default, gallery images must be wrapped in a tag (probably <code><div></code>) - which doesn't have the class <code>.row</code>. This is so you can create columns/rows.</p>
<p>A custom selector for the parent can be used, see example #11. Note how the final image is not in the gallery intentionally.</p>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="row">
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="People walking down stairs" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive"
</a>
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="Man getting wet" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive">
</a>
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="Someone lost their dress" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive">
</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
//Programatically call
$('#open-image').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
$('#open-youtube').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
// navigateTo
$(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
var lb;
return $(this).ekkoLightbox({
onShown: function() {
lb = this;
$(lb.modal_content).on('click', '.modal-footer a', function(e) {
e.preventDefault();
lb.navigateTo(2);
});
}
});
});
});
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="js/modal.js"></script>
<script src="dist/lightbox/ekko-lightbox.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
In the end, I got it to work with a different lightbox, http://lokeshdhakar.com/projects/lightbox2/
I have a question about my CCS code.
I got a button with above that a loading bar (that shows when you click on the button).
If I press the button, the loading bar comes but it pushes the button down and I've tried to make the button to position `fixed'.
Can someone tell me if there is another way or can you give a solution to my own code.
My HTML code with the button and loading bar:
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right">add</i>
</a>
</div>
</div>
This is my CSS for the button, the .btn selector is a class from materialize:
.btn{
background-color: #88969c !important;
position: fixed !important;
margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right"></i>
</a>
</div>
</div>
<script>
(function () {
$('#submitForm').on('click', function (e) {
e.preventDefault();
if($("#submitForm").hasClass('disabled')){
return;
}
$('#submitForm').addClass('disabled');
var randId = Math.floor((Math.random() * 19990307) + 1);
$('#loader').append('<div id="'+ randId +'" class="progress"><div class="indeterminate"></div></div>');
var name = $("#name").val();
var phonenumber = $("#phonenumber").val();
$("#name").val('');
$("#phonenumber").val('');
var data = {
name: name,
phonenumber: phonenumber
};
$.ajax({
url: 'addNew',
data: data,
method: 'post',
success: function (data) {
Materialize.toast(' '+ data +' ', 4000, 'cool white-text');
console.log(data);
$('#'+ randId +'').fadeOut(150, function () {
$('#'+ randId +'').remove();
$('#submitForm').removeClass('disabled');
});
},
})
})
})();
</script>
First of all you should make .btn { position: static; }. So that when ever loading bar comes your btn also shift itself down. And for making this happen (shifting and all). You have to use javascript or jquery.
I want use Kendo ui window, but I can't see what the problem is.
<div id="window">
</div>
<div id="rightColumn">
<p>
<asp:Button Text="Edit Advert" Visible="false" ID="btnEditAdv" CssClass="msgbutton" runat="server" />
</p>
</div>
<script type="text/javascript">
$(document).ready(function () {
var window = $("#window").kendoWindow({
title: "Centered Window",
width: "200px",
height: "200px",
visible: false
}).data("kendoWindow");
});
$("#btnOpen").click(function () {
var window = $("#window").data("kendoWindow");
window.center();
window.open();
});
</script>
Assuming btnOpen is an HTML button input and is present on the page, this code should work. You may be missing script references to jQuery or Kendo UI.
I'm using several WordPress loops and jQuery UI Tabs that result in the Main tabs and entry-content div markup below. The WordPress loops generate the "entry-post" markup in each tab div, but I'm not showing the php, as the resulting html markup in each tab div is the important part.
I'm also using a bit of jQuery to independently expand/collapse each entry-content div:
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });
What I've found is that each of the entry-content divs keeps their expanded state when switching tabs, i.e. if some of the entry-content divs are expanded in tabone and I switch to tabtwo and then back to tabone, they're still expanded in tabone.
What I need to do is collapse all the entry-content divs in a tab when a tab is changed. Below is the tab init and also the fx to change the tabs.
What do I need to add to this function to collapse all the entry-content divs when a tab is changed?
$(document).ready(function(){
var $tabs= $("#tabs").tabs();
});
$(function() {
$('#tabs').tabs({
fx: { opacity:'toggle' }
});
});
Main tabs and entry-content div markup:
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabone">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabtwo">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabthree">
....
</div></div>
The following code should collapse all .entry-content divs whenever a new tab is selected:
$(document).ready(function() {
var $tabs= $("#tabs").tabs({
fx : {
opacity: 'toggle'
},
select : function(event, ui) {
$(".entry-content").hide();
}
});
});
$("div.post [name^="entry-title"]").hide();
should do what you're wanting when attached next to your fx.
or:
$("#tabs a").click(function () {
$("div.post [name^="entry-title"]").hide();
});
I'm not sure i understand you're question completely. But if you wan't to check whether the tab is triggered or not, try use this:
$( ".selector" ).tabs({
show: function(event, ui) { ... }
});
Simplified how you could collapse all divs with class "entry-post", whenever the tab is showed:
$(document).ready(function(){
var $tabs = $("#tabs").tabs({
show: function(){
$('.entry-post').hide();
}
});
});
I'm not a jQuery expert, so here's straight javascript. Might at least help solve the problem...
Since you don't care what tab a div is on (since all divs should be hidden when a tab is changed) you could simply hide all divs on the page every time a tab is changed, regardless of what tab it's on.
var divList = document.getElementsByClassName("entry-content");
for(var divitem in divList){
divitem.style.display = "none";
}
I wish my jQuery was stronger so I could give it in that, but it may help...
Edit:
Just looking at what your example code, I guess something like this in jQuery:
$("#tabs a").click(function() { $(".entry-content").hide(); });
Something that closes all entry-content class divs when any tab is clicked.
You may want to make use of the existing jquery UI tabs library and this will solve a lot of your problems.
http://jqueryui.com/demos/tabs/
Using this will allow you to make a better association between your list items and the divs they are controlling. Add the reference in your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
or download it and remove what you don't need. Add the following to your CSS
.ui-tabs .ui-tabs-hide {
display: none !important;
}
and change your references so they are in keeping with the jqueryUI specification
<div id="tabs">
<ul>
<li>tabone</li>
and then the div ids to match
<div id="tabs-1">
<div class="entry-post">
this should make the association. You can then add the controlling behaviour so it should read
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
and that will do away with the need to store the array of divs
you can then bind a function to the tabselect event which will hide the divs you want to collapse
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
your code should then read:
<head>
<title>Collapse Divs</title>
<style type="text/css">
.ui-tabs .ui-tabs-hide {
display: none !important;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500);
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabs-1">
<div class="entry-post">
...
<h1 class="entry-title">Title 3.3</h1>
<div class="entry-content">Lorem ipsum...</div>
</div>
</div>
</body>