Scoured a bunch of articles and questions here but can't get to the bottom of this.
I have a page that opens a file manager inside a jqueryUI dialog. This file manager simply displays some thumbnails and a list of sub folders within the main assets folder. The idea is the user clicks a sub folder and gets the thumbs within that folder and a list of sub folders .. I'm sure you get the idea. But, when clicking the folder link the whole page is updated not just the dialog.
In the parent page I am referencing
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
and the jquery functions to prepare and open the dialog:
$("#scopeManagerDialog").dialog({
autoOpen: false,
width: 400,
resizable: false,
title: "File Manager",
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$("#openScopeManager").click(function() {
$("#scopeManagerDialog").load("#Url.Action("Index", "ScopeManager")",
function(response, status, xhr) {
$("#scopeManagerDialog").dialog("open");
});
return false;
});
and the div it loads into:
<div id="scopeManagerDialog" title="Scope Manager" style="overflow: hidden">
</div>
the controller action that returns the partial
public ActionResult Index(string path)
{
if (path==null)
{
path = ConfigurationManager.AppSettings["assetRoot"];
}
List<AssetVM> assets = ScopeManager.GetAllAssets(Server.MapPath(path));
List<FolderVM> folders = ScopeManager.GetAllFolders(Server.MapPath(path));
AssetSetVM model = new AssetSetVM()
{
Path = path,
Assets = assets,
Folders = folders
};
return PartialView("ScopeManager", model);
}
and finally the partial itsself. Note that the ActionLink refers to the containing div (I'm wondering if this is the issue .. I hope not and my gut says this should be possible).
<div id="scopeManagerContainer">
<div id="folderList">
<ul>
#foreach (FolderVM folder in Model.Folders)
{
<li>#Ajax.ActionLink(folder.Name,"Index","ScopeManager",new AjaxOptions {UpdateTargetId = "scopeManagerContainer"})</li>
}
</ul>
</div>
<div id="fileList">
#foreach (AssetVM asset in Model.Assets)
{
<img src='#Url.Action("GetThumbnail", new { path = string.Format("{0}/{1}", Model.Path, asset.FileName), width = 100, height = 100 })' />
}
</div>
</div>
Please let me know if anything else is required. As I say the first load works. Everything is appearing correctly, just that when I click the folder link it re-renders at the page level instead of updating the contents of the dialog.
Thanks.
My error .. I should have been setting the target to scopeManagerDialog not scopeManagerContainer. The question really is a bit pointless now but not sure what the policy is on deleting questions. I'll leave it for now for a mod to decide what to do with it.
Related
Is there a way to switch tabs with foundation 5 Joyride?
I have foundation tabs on the page and want Joyride to point elements on different tabs.
Like mentioned in the comment from Steven, you could use the callback either in the pre or post step callback function you activate the tab you need.
post_step_callback : function (){}, // A method to call after each step
pre_step_callback : function (){} // A method to call before each step
Hope this helps...
Here's what worked for me. I looked around and couldn't find anything useful, so wrote this. The hardest part was figuring out how to get the id of the target anchor. This was found buried in the 'this' object available to the callback.
$(this.$target)[0].id;
The 'content' class is used by foundation to identify the content to display when a tab is clicked. So traversing up the .parents tree finding the enclosing elements gives you the content tab(s) holding your link. And then of course you have to add an id to the <a> element of the tab you want to click. If you name it the same as your content div, with '-a' appended, you should be good to go.
html:
<dl class="tabs radius" data-tab id="my_tabs">
<dd class="active">Tab 1</dd>
<dd class="active">Tab 2</dd>
</dl>
<div class="tabs-content">
<div class="content" id="tab1">
<article id="joyride_stop1">...</article>
</div>
<div class="content" id="tab2">
<article id="joyride_stop2">...</article>
</div>
</div>
js:
$(document).ready(function() {
$(document).foundation('joyride', 'start', {
pre_step_callback: function(i, tip) {
var target = $(this.$target)[0].id;
if($('#' + target).parents('.content').length > 0) {
$('#' + target).parents('.content').each(function() {
var id = $(this).attr('id');
if($('#' + id).is(':visible') == false) {
$('#' + id + '-a').click();
}
});
}
}
});
});
This will work on any page, whether it contains tabs or not, so it can be universally included across a site.
I have big forms with lots of data,
so I'd like tabs with chunks of data for each tab.
I'd like tab content to be lazy loaded on click of the tab title, and it then doesn't need to be reloaded again when selected again later.
I think this example goes into the direction of what I want:
angular-ui tabs loading template in tab-content
but this seems to load a static template:
<tabs>
<pane active="pane.active"
heading="{{pane.title}}"
ng-repeat="pane in panes">
<div ng-include="pane.content"></div>
</pane>
</tabs>
How can I load the pane's content dynamically with $http.get()?
Note: this is already a page loaded via ng-view routing, so I can't do nested routing.
EDIT: The content is quite different for every tab, so ideally I'd provide a function and a template for every tab or something like that...
I guess angular-ui is a good way to go about this?
Was curious myself how to make tabs load via ajax. Here's a little demo I worked out.
Tabs have a select attribute that triggers when selected. So I used following for a tab:
<tab heading="{{tabs[0].title}}" select="getContent(0)">
<div ng-hide="!tabs[0].isLoaded">
<h1>Content 1</h1>
<div ng-repeat="item in tabs[0].content">
{{item}}
</div>
</div>
<div ng-hide="tabs[0].isLoaded"><h3>Loading...</h3></div>
</tab>
Controller:
$scope.tabs = [
{ title:"AJAX Tab 1", content:[] , isLoaded:false , active:true},
{ title:"Another AJAX tab", content:[] , isLoaded:false }
];
$scope.getContent=function(tabIndex){
/* see if we have data already */
if($scope.tabs[tabIndex].isLoaded){
return
}
/* or make request for data , delayed to show Loading... vs cache */
$timeout(function(){
var jsonFile='data'+(tabIndex +1)+'.json'
$http.get(jsonFile).then(function(res){
$scope.tabs[tabIndex].content=res.data;
$scope.tabs[tabIndex].isLoaded=true;
});
}, 2000)
}
Would move the cache to a service so if user switches views, and returns, data will still be in service cache
DEMO
Another approach is to use dynamic ng-include:
<tabset>
<tab ng-repeat="tab in tabs"
heading="{{tab.heading}}"
select="setTabContent(tab.content)">
</tab>
</tabset>
<ng-include src="tabContentUrl"></ng-include>
Then the controller has this:
$scope.tabs = [
{ heading: 'Dashboard', content: 'dashboard' },
{ heading: 'All Nodes', content: 'nodes' },
{ heading: 'Details', content: 'details' },
{ heading: 'Dependencies', content: 'dependencies' }
];
$scope.setTabContent = function(name) {
$scope.tabContentUrl = "view/" + name + "/index.html";
}
I have built a Firefox extension using the Addon SDK that opens up a new tab with a HTML page from the extensions directory and attaches a content script to it:
function openHtmlLoadFormTab(htmlFileName, jsWorkerFileName) {
tabs.open({
url: data.url(htmlFileName),
onReady: function(tab) {
var tabWorker = tab.attach({
contentScriptFile: [ data.url(jsJquery), data.url(jsWorkerFileName) ]
});
}
});
}
I have an <input type="file"> in the HTML file and some code that handles the "submit" event in the JS file (these files are given by htmlFileName and jsWorkerFileName respectively)
Because of security reasons, I cannot access the full file path in JS with document.getElementById('uploadid').value. I only get the file's name.
However, since this is a Firefox extension, I'm wondering if there is anyway to override this restriction?
I have been looking into netscape.security.PrivilegeManager.enablePrivilege("UniversalFileRead") and mozFullPath but I haven't been able to get it to work. I believe it's deprecated anyway?
The other solution is to build an XUL-based UI and prompt for the file there somehow, but I would like to know for sure if there is anyway to get this to work in HTML.
First edit with small example code
I built a small sample extension to illustrate how I'm doing things.
lib/main.js
var self = require('self');
var tabs = require('tabs');
var data = self.data;
var jsLoadForm = "load-form.js", htmlLoadForm = "load-form.html";
var jsJquery = 'jquery-1.8.0.min.js';
exports.onUnload = function(reason) {};
exports.main = function(options, callbacks) {
// TODO: remove this debugging line
openHtmlLoadFormTab(htmlLoadForm, jsLoadForm);
};
function openHtmlLoadFormTab(htmlFileName, jsWorkerFileName) {
tabs.open({
url: data.url(htmlFileName),
onReady: function(tab) {
var tabWorker = tab.attach({
contentScriptFile: [ data.url(jsJquery), data.url(jsWorkerFileName) ]
});
}
});
}
data/load-form.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Form</title>
<script lang="text/javascript">
function fileChanged(e) {
// this is just the file name
alert("html js: files[0].name: " + e.files[0].name);
// mozFullPath is indeed empty, NOT undefined
alert("html js: files[0].mozFullPath: " + e.files[0].mozFullPath);
}
</script>
</head>
<body>
<form name="my-form" id="my-form" action="">
<div>
<label for="uploadid1" id="uploadlabel1">File (JS in HTML):</label>
<input type="file" name="uploadid1" id="uploadid1" onchange="fileChanged(this)"/>
</div>
<div>
<label for="uploadid2" id="uploadlabel2">File (JS in content script): </label>
<input type="file" name="uploadid2" id="uploadid2" onchange="fileChangedInContentScript(this)"/>
</div>
<div>
<label for="uploadid3" id="uploadlabel3">File (JS using jQuery in content script):</label>
<input type="file" name="uploadid3" id="uploadid3" />
</div>
</form>
</body>
</html>
data/load-form.js
$(document).ready(function() {
$("#uploadid3").change(function(e) {
// in jquery, e.files is null
if(e.files != null)
console.log("jquery: e.files is defined");
else
console.log("jquery: e.files is null");
// this works, prints the file name though
console.log("$('#uploadid3').val(): " + $("#uploadid3").val());
// this is undefined
console.log("$('#uploadid3').mozFullPath: " + $("#uploadid3").mozFullPath);
});
});
// this handler never gets called
function fileChangedInContentScript(e) {
alert("js content script: filechanged in content script called");
}
As you can see in main.js, I used jquery-1.8.0.min.js, downloaded from the jQuery website.
Note: I also tried these without jQuery included as a content script when I opened the tab in main.js, but no luck.
The conclusion is that mozFullPath is indeed empty when I access it from JS embedded in the HTML page and I cannot find a way to access mozFullPath from jQuery, nor can I find a way to add a onchange handler in load-form.html that's defined in load-form.js
Second edit with onchange handler in the load-form.js content-script
I added the following code to load-form.js to catch the onchange event.
I also removed the jQuery content script from main.js
document.addEventListener("DOMContentLoaded", function() {
try {
document.getElementById("uploadid2").addEventListener('change', function(e) {
console.log("addeventlistener worked!");
console.log("e: " + e);
console.log("e.target: " + e.target);
console.log("e.target.files: " + e.target.files);
console.log("e.target.files[0].name: " + e.target.files[0].name);
console.log("e.target.files[0].mozFullPath: " + e.target.files[0].mozFullPath);
});
console.log('added event listener')
} catch(e) {
console.log('adding event listener failed: ' + e);
}
}, false);
This still outputs an empty string for mozFullPath:
info: added event listener
info: addeventlistener worked!
info: e: [object Event]
info: e.target: [object HTMLInputElement]
info: e.target.files: [object FileList]
info: e.target.files[0].name: test.sh
info: e.target.files[0].mozFullPath:
Is there anyway to acquire the needed permissions? How can I get my hands on that full path? I need the full path so I can pass it to an application the extension launches. (There are workaround solutions where I can do without the full path, but they decrease the quality of the extension)
fileInput.value property is meant to be accessible to web pages so it will only give you the file name, not the full path - web pages have no reason to know the full path on your machine. However, as a privileged extension you should be able to access the File.mozFullPath property. In this particular case you would do it like this:
var files = document.getElementById('uploadid').files;
if (files.length > 0)
{
// Assuming that only one file can be selected
// we care only about the first entry
console.log(files[0].mozFullPath);
}
The big question of course is whether your code is allowed to access File.mozFullPath. I suspect that a content script in the Add-on SDK won't have the necessary privileges. The main extension code will have the privileges but getting to the input field from there is hard...
I am a newbie at jquery. I've been researching how to set cookies for a jquery function using the cookie plugin.
I have this simple hide and show function for a div but want the class states to persist after links to other pages and refreshing.
The JS looks like this
<script type="text/javascript">
$(document).ready(function(){
$("div.toggle_search").hide();
$("h2.trigger_up").click(function() {
$(this).toggleClass("active").prev().slideToggle(250);
if ($.cookie('more_search','1')) {
$("#criteria").attr('class', $.cookie('more_search'));
} else {
$("#criteria").attr('class', 'active');
}
$.cookie('more_search', $(".trigger_up").attr('class'));
return false;
});
});
</script>
HTML
<div id="criteria">
<div class="toggle_search">
<div class='left'>
Stuff goes here
</div>
</div>
<h2 class="trigger_up">See More Search Criteria</h2>
<div class="clear"></div>
</div>
Any help would be greatly appreciated. !
Check the cookie before you show or hide the div. In this snippet, the div with id="moreButton" (not an actual button) has text saying "More" or "Less" for showing and hiding the div with id="moreOptions":
$(document).ready(function() {
if ($.cookie("show") == "show") {
$("#moreButton").html("Less «");
$("#moreButton").attr("title", "Hide the extra search parameters.");
$("#moreOptions").show();
}
else {
$("#moreButton").html("More »");
$("#moreButton").attr("title", "See more search options.");
}
$("#moreButton").click(function() {
$("#moreOptions").animate({ "height": "toggle" }, { duration: 60 });
if ($("#moreButton").html() == "More »") {
$("#moreButton").html("Less «");
$("#moreButton").attr("title", "Hide the extra search parameters.");
$.cookie("show", "show", { path: '/' })
}
else {
$("#moreButton").html("More »");
$("#moreButton").attr("title", "See more search options.");
$.cookie("show", "", { path: '/' })
};
});
}
);
Have you included the reference to the jQuery-cookie library?
See the documentation found here at the plugin page it looks like you are using or trying to use, https://github.com/carhartl/jquery-cookie/
By setting the cookie to expire in the future, it should persist until it hits the expiration date.
Ex: $.cookie('more_search', $(".trigger_up").attr('class'), { expires: 7 });
//Would expire in a week.
Also notice you have two classes when you get $(".trigger_up").attr('class') trigger_up and active (when the link is clicked for the first time), you might want to parse that the cookie value is set to "active"
The jQuery plugin cycle looks for elements of class slideshow. I want to add this class to a <ul> element to make a slideshow out of its <li>s. But when I add the slideshow class to the <ul> element, all <li> disappear and I get no slideshow whatsoever.
The HTML looks like this:
<ul>
<li>
<h3 class="expander">...</h3>
<div class="content">
<p>...</p>
<h4>...</h4>
<ul class="slideshow">
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
...
</ul>
As you see, the slideshow <ul> is included in another list. This parent list consists of headers which reveal the content of each list item on click. I am hiding all the .contents programmatically when the DOM is ready. Then, I add a click listener to the .expanders so they can show the hidden .contents.
It is inside these .contentss that I have .slideshows which use the cycle plugin to cycle through their list items.
The other weird thing about all this is that the slideshow's worked perfectly before I transformed my headers into toggles for their associated content. Indeed, when I added the toggle functionality to the headers, the slides are no longer visible. But then if I take away the slideshow class, they are visible again. Of course, they no longer have slideshow functionnality...
Here is the javascript for all this:
$(document).ready(function()
{
var expanders = $('.expander');
expanders.each(function()
{
$('.content', $(this).parent()).toggle();
$(this).click(function()
{
$('.content', $(this).parent()).toggle("blind", {"easing":"easeInOutCirc"}, "normal");
});
});
$('.slideshow').each(function() {
var parent = $(this).parent();
$(this).cycle(
{
fx: 'scrollHorz',
easing: 'easeInOutCirc',
timeout: 0,
nowrap: 1
});
});
});
Any idea what could be causing this problem?
Apparently, I needed to move the cycle code above the toggle code, like this:
$(document).ready(function()
{
$('.slideshow').each(function() {
var parent = $(this).parent();
$(this).cycle(
{
fx: 'scrollHorz',
easing: 'easeInOutCirc',
timeout: 0,
nowrap: 1
});
});
var expanders = $('.expander');
expanders.each(function()
{
$('.content', $(this).parent()).toggle();
$(this).click(function()
{
$('.content', $(this).parent()).toggle("blind", {"easing":"easeInOutCirc"}, "normal");
});
});
});
I don't know why this works though, so better answers would be appreciated.