I have a JQuery UI tab dialog that is the detail of a Master-Detail interface. When someone selects an element in the master, the tabs all get their href's populated with URLs giving details of that selected item.
For example, see
http://www.trirand.com/blog/jqgrid/jqgrid.html and browse to Advanced->Master Detail.
But instead of updating a second grid, I'm updating the links of a jquery-ui tabs element like so:
var urls = {
0 : "/url1",
1 : "/url2",
};
jqgrid(....
onSelectRow: function(location_id) {
for (url in urls){
$('#tabs').tabs('url', url , urls[url]+location_id );
}
var selectedTab = $('#tabs').tabs("option", "selected");
$('#tabs').tabs('load', selectedTab);
}
);
$(#tabs.tabs({});
With html like:
<div id="tabs">
<ul>
<li><a id="URL1" href="blank.html">Info</a></li>
<li><a id="URL2" href="blank.html">History</a></li>
</ul>
</div>
I shouldn't have to use a blank.html dummy link. Is there something I can do (when I don't have anything selected in the master) that doesn't cause my tabs to cause a fetch and instead just be empty?
If you set the tab to be blank in your coding nothing will appear in it (obviously), but if you need to empty it on page load use this:
$(document).ready(function() {
$('#divID').empty();
});
Related
I'm running into trouble trying to set anchor tag helper parameters dynamically and looking for some help.
I have a nav that is a view component inside the shared _Layout.cshtml page that populates departments from a model.
#model List<DepartmentModel>
<ul class="nav">
#foreach (var d in Model)
{
<li>
<a asp-page="catalog/departments" asp-route-departmentName="#d.Name" asp-route-departmentId="#d.Id">#d.Name</a>
</li>
}
</ul>
Here is the InvokeAsync() from my View Component class
public async Task<IViewComponentResult> InvokeAsync()
{
var departments = _catalogService.GetNavDepartments();
return View(departments);
}
When I first launch the page, all the hrefs are populating correctly.
"catalog/departments/department-name-1/department-id-1"
"catalog/departments/department-name-2/department-id-2"
"catalog/departments/department-name-3/department-id-3"
If I click on one of the links, like the first link for example, I go to the proper department page "catalog/departments/department-name-1/department-id-1"
However, once I click that first link and navigate to the respective page, all the nav hrefs populate to the current url "catalog/departments/department-name-1/department-id-1" instead of the originally generated hrefs. This makes it so I can't navigate to another department.
Here is my route in the Startup.cs
services.AddRazorPages().AddRazorPagesOptions(options => {
options.Conventions.AddPageRoute("/Catalog/Departments", "{dName}/{dId}");
});
Based on the convention above, it eliminates the "catalog/department" piece of the url but I added it in this description for a sense of what I'm trying to accomplish. Even if I add this template to the page that populates the "catalog/departments" url, I get the same result.
#page "{dName}/{dId}"
Can anyone help me figure out what I am missing? Thanks in advance!
******** UPDATE ********
Currently, the only way I am able to get this to work is by adding the cache tag helper.
<cache>
<ul class="nav">
#foreach (var d in Model)
{
<li>
<a asp-page="catalog/departments" asp-route-departmentName="#d.Name" asp-route-departmentId="#d.Id">#d.Name</a>
</li>
}
</ul>
</cache>
This doesn't seem like a proper fix. Seems more of a hack then anything. Anybody have any ideas? Thanks!
Wanted to use this 'item' example:
http://codepen.io/dimsemenov/pen/sHoxp
but instead of having one button, I'd like to have multiple buttons for each inline element (like a gallery).
For example, How would I create a second button that would open data array item 2 (paul irish)? Is there a way to specify from the button link? thanks!
I had to do something similar and had no idea how to do it so hopefully this helps someone later.
All my modals were inline but I also needed a list for each item on the page so you could click on the link and it would open at Item 2 or 3 etc..but still allow you to navigate through the gallery. I based my code off this http://codepen.io/dimsemenov/pen/zvLny and added the additional parts for the id's.
Basically you just have to put a data attribute e.g data-slideid on the individual links and pass that through when you open magnific. After you set everything you can specify which item it opens at by passing through the value from data-slideid. If anyone has a better solution i'd love to know!
Check out my below
<div id="gallery1" class="mfp-hide">
<div class="slide" data-slideid="0">slide 1</div>
<div class="slide" data-slideid="1">slide 2</div>
<div class="slide" data-slideid="2">slide 3</div>
</div>
// single link opens gallery starting at first slide
<p>view gallery</p>
// individual links opens gallery starting at relevant slide
Slide1
Slide2
Slide3
$('.open-gallery-link').click(function() {
var itemNum = $(this).data("slideid"); // get the id
var items = [];
$( $(this).attr('href') ).find('.slide').each(function() {
items.push( {
src: $(this)
} );
});
$.magnificPopup.open({
items:items,
gallery: {
enabled: true
}
},itemNum); // set it in here
});
I have multiple navigation bars in one page:
<ul class="nav nav-tabs">
<li>Home</li>
<li>About</li>
</ul>
<ul class="nav nav-tabs">
<li>Home</li>
<li>About</li>
</ul>
The status of a LI element becomes active when the belonging link was clicked. Problem: It stays active even when the user switches the tab in the other navigation.
It is not possible to switch back in the first navigation as the LI is already active there and can not be clicked. Things get even worse if you add a div.collapse.navbar-collapse in the main navigation bar and a simple link somewhere in the page:
<p><a data-toggle="tab" href="#about">About</a></p>
In many cases different nav (with tabs) will open a new page or interact on difference elements in the page. In your case being active of nav1 only will be a problem when nav2 removes or change the content related to your nav1 active state.
You could try to remove the active states with the tab event, see http://getbootstrap.com/javascript/#tabs. For your example this will be come something like;
$('.nav').on('show.bs.tab', function (e) {
$('.nav .active').removeClass('active');
})
I think the best solution is to set the active class manually in all the navs after each tab switch.
$(function() {
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
// add active class where nav entry is active
$('.nav a[data-toggle="tab"][href="'+$(e.target).attr("href")+'"]')
.parent().addClass('active');
// remove active class where nav entry is no longer active
$('.nav a[data-toggle="tab"][href!="'+$(e.target).attr("href")+'"]')
.parent().removeClass('active');
});
});
I have a view with pagination. When the user clicks on a page number, I display the data for that page.
I only want the data items to be replaced so I don't want to navigate to the "next page." So what I'm doing is using the router.navigate(url, { replace: false, trigger: false }); to add the page to the browser's history, but not to trigger the navigate there.
If after I get the data, I click on the browser's back button, the URL changes to the previous one, but I don't get an event. If once I'm back in the previous page, I click the browser's forward button, I get the trigger event from that page.
Example. I'm at /# and it is displaying page 1 of the data. The user click on the "next page" link on the page. I display page 2's data, and I replace the url with /#welcome/2 Now if I click on the browser's back button the URL changes back to /# but the page doesn't trigger. If I press the browser's forward button the URL changes back to /#welcome/2 and the page triggers. Now that that has happened, I can click the back button and page one will trigger; and I can go back and forth between page 1 and page 2. If the user clicks on "page 3", the problem happens again.
If you all need a working example, I will deploy it, but currently this is only running on my local box.
IMO paging, like sorting/filtering represent the internal state of a view/widget and shouldn't be presented via routes. Consider e.g. user is on #something/3 and bookmarks the url. After deleting a couple of items there's no #something/3 any longer and the bookmark fails. Here's some more thought food on that topic http://lostechies.com/derickbailey/2011/08/03/stop-using-backbone-as-if-it-were-a-stateless-web-server/
Update based on comments:
activate on hitting browser back get's not called for two reason. a) welcome.js returns a singleton and b) in shell.html viewCache is set to true. When the user press browser forward it get's called because at this time route #welcome/2 from the SPA perspective is called the first time, so activate kicks in.
One way to make the system work would be to force every page change (regardless if it was initialized by SPA or browser) running through activate. Here are the required steps: Convert the singleton into a constructor, set cacheViews: false and replace click events by normal hrefs that calls the page route.
Update 2
Here's an example that combines the inPage navigation (without router involvement) with the ability to use browser back/forth navigation. init is responsible for setting up things that are common for activate and gotoPage.
Viewmodel
define(['plugins/router', 'knockout'], function( router, ko ) {
var ctor = function() {
this.pageNo = ko.observable();
this.pageData = ko.observable();
};
ctor.prototype.activate = function( page ) {
this.init(page);
};
ctor.prototype.init = function( page ) {
this.pageNo(page || 1);
this.pageData('Data for ' + this.pageNo());
};
ctor.prototype.gotoPage = function( page ) {
var url = "extras/welcome/" + page;
this.init(page);
router.navigate(url, { replace: false, trigger: false });
};
return ctor;
});
View
<section>
<h1>
Hello Durandal Pagination
</h1>
<a data-bind="click: gotoPage.bind($data, 1)" style="cursor: pointer;">Page 1</a>
<a data-bind="click: gotoPage.bind($data, 2)" style="cursor: pointer;">Page 2</a>
<a data-bind="click: gotoPage.bind($data, 3)" style="cursor: pointer;">Page 3</a>
<h2 data-bind="text: pageData"></h2>
</section>
Live example at: http://dfiddle.github.io/dFiddle-2.0/#extras/welcome
I have, essentially, an unlimited number of containers with dynamic ids and a dynamic menu to load each containers content. I have done this with static id's (but still seems such a heavy use) but do not know where to go to use dynamic.
When a nav link (from .img_select) is clicked it shows the corresponding div and hides all others in the group. It also updates the class of the menu items so the clicked item becomes selected, and the remaining become unselected.
<div id="pf1_1">
My content for pf1_1 container goes here
</div>
<div id="pf1_2">
My content for pf1_2 container goes here
</div>
<!-- This could have a dozen+ or more divs, or only 1 //-->
<p class="img_select"><span class="pf_current" id="pfc1_1">1-1</span> <span class="pf_next" id="pfc1_2">1-2</span></p>
<div id="pf2_1">
My content for pf2_1 container goes here
</div>
<div id="pf2_2">
My content for pf2_2 container goes here
</div>
<div id="pf2_3">
My content for pf2_3 container goes here
</div>
<!-- This could have a dozen+ or more divs or only 1 //-->
<p class="img_select"><span class="pf_current" id="pfc2_1">2-1</span> <span class="pf_next" id="pfc2_2">2-2</span> <span class="pf_next" id="pfc2_3">2-3</span></p>
the jquery I would like to create dynamically something similar to this
<script>
$(document).ready(function(){
$("#pf1_2").hide();
$("#pf2_2").hide();
$("#pf2_3").hide();
$('#pfc1_1').click(function(){
$("#pf1_2").hide('fast');
$("#pf1_1").show('fast');
$("#pfc1_1").removeClass("pf_next").addClass("pf_current");
$("#pfc1_2").removeClass("pf_current").addClass("pf_next");
});
$('#pfc1_2').click(function(){
$("#pf1_1").hide('fast');
$("#pf1_2").show('fast');
$("#pfc1_2").removeClass("pf_next").addClass("pf_current");
$("#pfc1_1").removeClass("pf_current").addClass("pf_next");
});
$('#pfc2_1').click(function(){
$("#pf2_2").hide('fast');
$("#pf2_3").hide('fast');
$("#pf2_1").show('fast');
$("#pfc2_1").removeClass("pf_next").addClass("pf_current");
$("#pfc2_2").removeClass("pf_current").addClass("pf_next");
$("#pfc2_3").removeClass("pf_current").addClass("pf_next");
});
$('#pfc2_2').click(function(){
$("#pf2_1").hide('fast');
$("#pf2_3").hide('fast');
$("#pf2_2").show('fast');
$("#pfc2_2").removeClass("pf_next").addClass("pf_current");
$("#pfc2_1").removeClass("pf_current").addClass("pf_next");
$("#pfc2_3").removeClass("pf_current").addClass("pf_next");
});
$('#pfc2_3').click(function(){
$("#pf2_2").hide('fast');
$("#pf2_1").hide('fast');
$("#pf2_3").show('fast');
$("#pfc2_3").removeClass("pf_next").addClass("pf_current");
$("#pfc2_2").removeClass("pf_current").addClass("pf_next");
$("#pfc2_1").removeClass("pf_current").addClass("pf_next");
});
});
</script>
If you can point me in the right direction, be much appreciated, thank you.
Seeing as I found a way, not saying was right way, but it worked, I wanted to share it with you.
I would like to point out it didn't take 2 months to sort a solution, just 2 months to post it here.
To combat this;
$("#pf1_2").hide();
$("#pf2_2").hide();
$("#pf2_3").hide();
I used this;
$("div[id^=pf_]").hide();
$("div[id$=_1]").show();
first it hides all id's starting with pf_
then it shows only the first by matching id ending in _1
To combat this;
$('#pfc1_1').click(function(){
$("#pf1_2").hide('fast');
$("#pf1_1").show('fast');
$("#pfc1_1").removeClass("pf_next").addClass("pf_current");
$("#pfc1_2").removeClass("pf_current").addClass("pf_next");
});
// etc.....
I used this;
$('span[id^=pfc_]').live("click", function(e) {
e.preventDefault();
var id = $(this).attr('id').split('_');
var classname = $(this).attr('class');
var navwidth = $("div[id^=pf_"+id[1]+"_"+id[2]+"]").width();
if(classname != 'pf_current'){
$("span[id^=pfc_"+id[1]+"_]").removeClass("pf_current").addClass("pf_next");
$("span[id^=pfc_"+id[1]+"_"+id[2]+"]").removeClass("pf_next").addClass("pf_current");
// change portfolio item
$("div[id^=pf_"+id[1]+"_]").hide();
$("div[id^=pf_"+id[1]+"_"+id[2]+"]").delay('5').show();
}
});
Hope this helps someone else