I am trying to load a partial view in my MVC project using fancybox. It seems to load the content correctly. Most of it anyway as it seems to cut the page short, but it loses all styling from the view when it loads it.
I have included my CSS files in my partial view but still no luck.
My partial view is as follows:
#model ApprovalSystem.ViewModels.RequestDetailViewModel
#section styles
{
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/material.min.css" rel="stylesheet" />
<link href="~/Content/jquery.fancybox.min.css" rel="stylesheet" />
}
//CONTENT HERE - Not providing it all as it is quite large. Classes and all remain in the partial view though so cannot see that being an issue.
#section scripts
{
<script>
$(document).ready(function () {
$('[data-fancybox]').fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
})
</script>
}
My link to open the fancybox is:
<a data-fancybox href="#Url.Action("DetailPartial", new { id = Model.Request.ParentRequestId })" class="mui-btn mui-btn--fab mui-btn--small fancybox.ajax">#Model.Request.ParentRequestId</a>
And the controller method to return the partial view is:
public async Task<ActionResult> DetailPartial(int id)
{
var request = _uow.RequestService.Get(id);
var currentUser = await AzureGraph.GetUser();
ViewBag.CurrentUser = currentUser.DisplayName;
ViewBag.NextApprover = _uow.ResponseService.Get().Where(r => r.RequestId == id && r.ResponseStatus == RequestStatus.NotProcessed).Select(r => r.Responder).FirstOrDefault();
RequestDetailViewModel viewModel = new RequestDetailViewModel()
{
Request = request
};
if (request.FolderId != null)
viewModel.Attachments = await AzureGraph.GetFileSystemObjects(request.FolderId);
else
viewModel.Attachments = new List<FSObject>();
return PartialView("DetailPartial", viewModel);
}
I am all out of ideas and any help would be greatly appreciated.
EDIT - Added screenshot
Managed to solve this. The issue was that because the partial view had no layout, sections werent being loaded correctly. So i created a basic layout for partial views and it now works as expected.
Related
I am modifying a template on Blogger and I want to transfer this script
<script defer='defer'><b:if cond='data:view.isPost'>
//<) {
document['getElementsByClassName']('a3lan-title')[0]['innerHTML'] = document['getElementById']('a3lan-title')['innerHTML'];
document['getElementById']('a3lan-title')['remove']()
};
if (document['getElementById']('a3lan-first')) {
document['getElementsByClassName']('a3lan-first')[0]['innerHTML'] = document['getElementById']('a3lan-first')['innerHTML'];
document['getElementById']('a3lan-first')['remove']()
};
if (document['getElementById']('a3lan-Center')) {
document['getElementsByClassName']('a3lan-Center')[0]['innerHTML'] = document['getElementById']('a3lan-Center')['innerHTML'];
document['getElementById']('a3lan-Center')['remove']()
};
if (document['getElementById']('a3lan-End')) {
document['getElementsByClassName']('a3lan-End')[0]['innerHTML'] = document['getElementById']('a3lan-End')['innerHTML'];
document['getElementById']('a3lan-End')['remove']()
};
if (document['getElementById']('a3lan-lates')) {
document['getElementsByClassName']('a3lan-lates')[0]['innerHTML'] = document['getElementById']('a3lan-lates')['innerHTML'];
document['getElementById']('a3lan-lates')['remove']()
};
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://4.bp.blogspot.com/-oA8G9t61JXk/VtLrtkAzObI/AAAAAAAAFTY/EjT6jl2MEFM/s1600/bloggersstand.gif",effect:"fadeIn",threshold:"-50"})});
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]></b:if>
<b:if cond='not data:view.isSingleItem'> //<![CDATA[
var olderLink=$("a.blog-pager-older-link").attr("href");olderLink&&$(".loadMorePosts").show(),$(".loadMorePosts a").on("click",(function(o){$(".loadMorePosts").hide(),$.ajax({url:olderLink,success:function(o){var e=$(o).find(".blog-posts");e.children(".status-msg-wrap").remove(),$(".blog-posts").append(e.html()),(olderLink=$(o).find(".blog-pager-older-link").attr("href"))?$(".loadMorePosts").show():$(".noMorePosts").show()},beforeSend:function(){$(".loadMore > #loader").show()},complete:function(){$(".loadMore > #loader").hide()}}),o.preventDefault()}));
//]]></b:if><b:if cond='data:view.isHomepage or data:view.isPost or data:view.isError'>//<![CDATA[
$(document).ready((function(){const o=$(".to-top");$(window).scroll((function(){$(window).scrollTop()>100?o.addClass("active"):o.removeClass("active")}))}));
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#arabes1").on("click",function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode",$(".section-center").css("display","block")):($("body").toggleClass("nightmode",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("nightmode")?$("#arabes1").prop("checked",!0):$("#arabes1").prop("checked",!1)});
//]]></b:if>
</script>
to an external script, for example on Github, in order to reduce the size of the page. Is there anyone who can help me?
Note: I have previously put it in an external script without making changes, but it did not work
Note: I have previously put it in an external script without making changes, but it did not work
I would like put a button on the left using css style and a UWA button.
This would be the code:
var btn = new UWA.Controls.Input.Button({value: 'Add new',style: {'position:absolute;right:20px;'}}).inject(widget.body);
I am not sure how to write the styles to take them into account.
I have tried:
style: {'position:absolute;right:20px;'} -> syntax error '}'
style:'position:absolute;right:20px;' -> nothing happens, doesn't appear in styles in console
style: {'position':'absolute';'right':'20px;'} -> nothing happens
Proposed syntaxes from answers that didn't work:
style: {'position': 'absolute', 'right': '20px'}
Here is the full code snippet (couldn't make a fiddle work with the references):
<head>
<!-- Application Metas Start -->
<title>TEST</title>
<!-- Application Metas End -->
<!-- UWA -->
<link rel="stylesheet" type="text/css" href="http://uwa.netvibes.com/lib/c/UWA/assets/css/standalone.css" />
<script type="text/javascript" src="http://uwa.netvibes.com/lib/c/UWA/js/UWA_Standalone_Alone.js"></script>
<!-- Application JS Start -->
<script type="text/javascript">
/* global widget */
( function () {
require({
baseUrl: '../'
}, ['UWA/Core', 'UWA/Element', 'UWA/Class', 'UWA/Controls/Input'], function(Core, Element, Class, Button) {
'use strict';
UWA.debug = true;
var myWidget = {
onLoad: function() {
try {
var btn = new UWA.Controls.Input.Button({value: 'Add new',styles: {position:'absolute',right:'20px'}}).inject(widget.body);
//btn.setAttributes({color: 'red'});
}
catch (err){
alert(err);
}
}
};
if (widget.launched)
myWidget.onLoad();
else
widget.onLoad = myWidget.onLoad;
}); // -- End of require
}() ) ;
</script>
<!-- Application JS End -->
</head>
<body>
</body>
</html>
It's probably in the docs. From my cursory glance at it, it looks you should set it through the attributes since style is an attribute:
var btn = new UWA.Controls.Input.Button({
value: 'Add new',
attributes: {
style: 'position:absolute;right:20px;'
}
}).inject(widget.body);
See https://uwa.netvibes.com/docs/Uwa/html/Input.UWA.Controls.Input.html
or possibly:
var btn = new UWA.Controls.Input.Button({
value: 'Add new',
styles: {
'position':'absolute',
'right':'20px'
}
}).inject(widget.body);
See https://uwa.netvibes.com/docs/Uwa/html/Element.html
EDIT - Since the above doesn't seem to work, perhaps creating your own Element instead of using the built in Button. In this example, I just reused the classes from the Button so they look the same:
var btn = new UWA.createElement('button', {
text: 'Add new',
styles: {
'position':'absolute',
'left':'20px'
},
class: 'dark-grey uwa-button uwa-button-root uwa-input uwa-input-root active'
}).inject(widget.body);
Fiddle: https://jsfiddle.net/nmde8m75/
see docs for createElement: https://uwa.netvibes.com/docs/Uwa/html/Element.html
NOTE: That once you make this button absolute positioned, you will need to make sure that the surrounding panel has a height.
Have you tried passing correct object? {'position':'absolute';'right':'20px;'} is not valid, because properties must be separated , and not ;.
Try style: {'position': 'absolute', 'right': '20px'}
var btn = new UWA.createElement('button', {
// you can also use var btn=new UWA.Element('button', {
text: 'Add New', //you can add value: 'Add New'
styles: {
position:'relative',
left:'20px'
},
class: 'uwa-button uwa-button-root uwa-input'
}).inject(widget.body);
I have defined an error banner in my angular app which is supposed to be visible only when an error event is triggered and there it is supposed to be hidden when the page loads.
Here is my jade code:
div.container.content(ng-init='root.error.show = false')
div.col-md-12.error-container.ng-cloak(ng-show='root.error.show')
div.alert.alert-danger.alert-dismissible(role='alert')
button.close(type='button')
span(aria-hidden='true', ng-click='root.error.show = !root.error.show') ×
span.sr-only Close
p {{ root.error.message }}
My controller
exports.RootCtrl = function RootCtrl($scope, $log) {
var self = this;
this.error = {
show: false,
message: 'Oups, something wrong just happend'
}
$scope.$on('error', function(event, data) {
self.error.show = true;
self.error.message = data;
})
}
My problem is while angular is loading, the banner is visible with {{ root.error.message }} as an error message.
I have tried using ng-cloak (body(ng-cloak)) and ng-init to hide it but it is not working.
I believe I can tweak the css to play with the display properties but this would be quite messy.
What are the common best practices to solve this?
As per the AngularJS website (https://docs.angularjs.org/api/ng/directive/ngCloak) the solution is the following CSS:
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
I have in my Layout page (Menu + Iframe)
and i want to load a cshtml files (view pages) in the iframe after the click in the menu.
the goal is not to load the entire Layout page
I tried this way:
<ul id="qm0" class="qmmc">
<li><a class="qmparent" >FILES</a>
<ul class="rgauche">
<li>#Html.ActionLink("USERS","getUsers")</li>
<li><a id="disconnect">Deconnexion</a></li>
</ul>
</li>
</ul>
but it loads the entire layout page
I had this idea from another ASP.NET project that uses javascript to load a .aspx page in the iframe after the click on the menu
<ul id="qm0" class="qmmc">
<li><a class="qmparent" >FILES</a>
<ul class="rgauche">
<li><a id="getuser">USERS</a></li>
<li><a id="disconnect">Deconnexion</a></li>
</ul>
</li>
</ul>
$(function () {
$('#getuser').click(function () {
document.getElementById('myIframe').src = "users.aspx";
return false;
});
});
Any ideas ?
You have to point the "src" attribute of the iframe to a controller action that returns the view.
For ex.
Action that returns the partial view without layout
public PartialViewResult IframeAction()
{
return PartialView();
}
Javascript
$('#getuser').click(function ()
{
document.getElementById('myIframe').src
= "/IframeController/IframeAction";
return false;
});
Load the view thru an action method. In this view, set the Layout value to null so that it wont use the layour defined in viewstart.cshtml
#{
Layout=null;
}
<p>some partial view content</p>
EDIT :
Not quite sure what you want to achieve. But If you want to update the Iframe content inside the Layout you can do like this
Assuming your Layout.cshtml is like this
<head>
//Load jQuery library
</head>
<body>
#Html.ActionLink("List", "GetUsers", "Users", null, new { #class = "iframable" })
<iframe id="ifrm" style="width:500px; height:200px; border:1px solid black;">
</iframe>
#RenderBody()
<script type="text/javascript">
$(function () {
$(".iframable").click(function (e) {
e.preventDefault();
var item = $(this);
$("#ifrm").attr('src', item.attr("href"));
});
});
</script>
Now have the GetUsers action method in your Users controller
public ActionResult GetUsers()
{
return View();
}
and make sure in the GetUsers.cshtml view, the layout is set to null
#{
Layout=null;
}
<p>some partial view content</p>
you need a different layout for the page you are loading within the iframe.
Then, within this page, you can do
#{
Layout = "YourLayout.cshtml";
}
By default all your cshtml views are using the layout provided in the _ViewStart.cshtml
EDIT
You can use the following concept:
<iframe name="my_frame"></iframe>
#Html.ActionLink("Users", "GetUsers", null, new { target = "my_frame" })
You give your iframe a name, and then use the name as the target for your action link. Thats the simplest solution. if you prefer, you can also use jquery click handler, as provided in one of the other answers.
I have a js modal window which opens with an onclick function in a page on my site:
<a class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'groupC0', wrapperClassName: 'wide-border', outlineType : 'rounded-white', dimmingOpacity: 0.8, align : 'center', transitions : ['expand', 'crossfade'], fadeInOut: true });" href="/images/phocagallery/thumbs/phoca_thumb_l_jen raymond_067 copy.jpg" title="jen raymond_067 copy">
<img alt="jen raymond_067 copy" src="/images/phocagallery/thumbs/phoca_thumb_m_jen raymond_067 copy.jpg">
</a>
I need this triggered as the page loads (not onclick, as above). I've been playing around with this js
<script type="text/javascript">
$(document).ready(function() {
window.location.href = "/images/phocagallery/thumbs/phoca_thumb_l_jen raymond_067 copy.jpg";
});
</script>
But of course it only loads the image (href) - can you help include the class, title and onclick attributes to this js function - or is there a better way?
Please show me the light :)
You can try the following (keeping in mind I have no idea what this function does):
$(document).ready(function(){
hs.expand($('.highslide'), {
slideshowGroup: 'groupC0',
wrapperClassName: 'wide-border',
outlineType : 'rounded-white',
dimmingOpacity: 0.8,
align : 'center',
transitions : ['expand', 'crossfade'], fadeInOut: true });
});
Thats the best I can come up with without looking up the hs(highlide?) api.
Try this:
$(function() {
var yourAElement = $('.highslide')[0];
hs.expand(yourAElement, { slideshowGroup: 'groupC0', wrapperClassName: 'wide-border', outlineType : 'rounded-white', dimmingOpacity: 0.8, align : 'center', transitions : ['expand', 'crossfade'], fadeInOut: true });
});
Thanks for the solutions above, maybe I'm just not knowledgable with JS, but I couldn't see my way using either, however I did get what I wanted using this method:
1) Add an ID to the Anchor tag
<a id="autoClick" class="highslide" onClick="return hs.expand(this, { slideshowGroup: 'groupC0', wrapperClassName: 'wide-border', outlineType : 'rounded-white', dimmingOpacity: 0.8, align : 'center', transitions : ['expand', 'crossfade'], fadeInOut: true });" href="/images/phocagallery/thumbs/phoca_thumb_l_jen raymond_067 copy.jpg" title="jen raymond_067 copy">
<img alt="jen raymond_067 copy" src="/images/phocagallery/thumbs/phoca_thumb_m_jen raymond_067 copy.jpg">
</a>
2) Load JQuery if not already present
3) Add this function
$(document).ready(function() {
$('#autoClick').click();
});