I wish to put part of javascript code depends on authorities like below which is freemarker code.
<script type="text/javascript"></br>
var openAuthorityOperatorData = false;
$(function() {
$('#dlg_operator_auth_search_form').dialog({
autoOpen: false,
width: 500<#security.authorize access="hasRole('AUHOA00000')"> + 450</#security.authorize>,
height: 550,
dialogClass: 'dialog-shadow',
modal: false,
resizable: false...
})});
</script>
With thymleaf, I can only find a way that puts authority attribute into script element like below.
<script sec:authorize="hasAnyRole('AUCOP0000x','AUUOP0000x')" type="text/javascript">
$(function() {
});
</script>
If I can not use something like the top code, can I use jstl with thymeleaf to achieve the goal?
Thymeleaf requires valid HTML5/XHTML/XML templates to work, so it is not possible to combine it with JSTL.
However, you can use script inlining in Thymeleaf. The Spring Security extras plugin also provides an authorization utility object.
<script th:inline="javascript">
var w = /*[[${#authorization.expression('hasAnyRole(''AUCOP0000x'',''AUUOP0000x'')')} ? ${500} : ${950} ]]*/ 500;
...
width: w,
...
</script>
Sources
Thymeleaf Script inlining
Thymeleaf Spring Security authorization object
Related
I try to make a scheduler using fullcalendar. I cannot find a tutorial that use vb.net. So i follow this tutorial A complete web diary system for jQuery and C# MVC by converting c# code into vb.net. But i have problem to display the calendar. I have added fullcalendar.js to my scripts folder and fullcalendar.css into content folder. But the result shows nothing. A blank page. This is my html code:
<div class="row">
<div id='calendar' style="width:65%"></div>
<script>
$(document).ready(function () {
$('#calendar').fullcalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaDay',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
});
})
</script>
You need to include the CSS and JS on the page. Just adding them to the folders is probably not enough.
Include them in _Layout.cshtml (which makes them available on all pages)
Include them in the current view (this page only)
Example:
<link href="#Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/fullcalendar.js")" type="text/javascript"></script>
Also you have an unclosed <div class="row">
I have problem with mobile/tablet version of page which I create
I need this: When someone look at product detail and move him to right/left (touch/swipe) then I need load next/previous product detail (= Example: Now I on page with id=2 when I go right, then I load page with id=3, npw I on page with id=3 and I go left then I load page with id=2.. etc.. with different pages id).
I look in thread here, but this solution is not dynamic and I have problem applicate it. Next I inspirated in W3C here.
Now I have these codes which not work:
JS file:
$(document).on('pageinit', function() {
$('.epicFullscreen').bind('swipeleft', function(event,ui)
{
$.mobile.changePage("http://www.some_domain.cz/category/page_name-1/","slide");
});
$('.epicFullscreen').bind('swiperight', function()
{
$.mobile.changePage("http://www.some_domain.cz/category/page_name-3/","slide");
});
});
$(document).on('pagehide', function () { $(this).off('swipeleft swiperight'); });
HTML:
<script src="funkce/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="funkce/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="funkce/skripty.js" type="text/javascript"></script>
I need use old JQuery 1.7.1. because this site using it and everything works fine, with newer JQuery I can have new problems. For that I use older JQuery-mobile 1.3.2. which must work with JQuery 1.7.1. ("jQuery Mobile 1.3 supports jQuery 1.7 and newer") . I can´t include "jquery.mobile-1.3.2.min.css" because this styles not work together with my styles correctly.
HTML in body is like that:
<div class="epicFullscreen">
<img class="epicImg" src="../../data_9/11normal.jpg" alt="inspirace č.2" title="inspirace č.2" border="0" />
</div>
Now I have dynamic solution with arrows (right/left) and with adding correct urls with PHP, but on tablet/mobile user like using touch not clicking on arrows etc...
=> Where I have problem and why not work my current solution? And how I can change this static JS to dynamic JS?
try this simple code .....
$(document).on("swipeleft", '#'+event.target.id, function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
alert(nextpage.attr('id'));
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$(document).on("swiperight", '#'+event.target.id, function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, { transition: "slide", reverse: true }, true, true);
}
});
I found solution for that I make this answer. I simplify my problem and create simple page.
Code
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">-->
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).on("pageinit",function(){
var pathname = $(location).attr('href');
var leva = $('#le').attr("href");
var prava = $('#pr').attr("href");
$("body").on("swiperight",function(){
<!--alert("You swiped right!");-->
location.href=prava;
});
$("body").on("swipeleft",function(){
<!--alert("You swiped left!");-->
location.href=leva;
});
});
</script>
</head>
<body>
<div id="test_div" style="display: block;">
<img src="test.gif" width="100px">
<a id="le" href="http://www.some_domain.cz/category/page_name-1/">left</a>
<a id="pr" href="http://www.some_domain.cz/category/page_name-3/">right</a>
</div>
</body>
</html>
I have this one hack - in PHP I know on which page I am, which page is before and which is next, I add this links it to arrows (which have tag "a"). This function working perfect. But I use this functional code to get correct URL => I don´t need some big function in JQuery which can split actual url with RegEx, know on which page I am, know if exist next page etc... Now I must only style this code to my page, but this is working.
I thank Omar for his time and I close this topic.
I am using the method noted here in the docs to set data-ajax="false" on a parent container for my site but I do have a few cases where I want the page to load via Ajax.
Is there a way to set the default on the parent container but allow individual links to override that setting? Adding data-ajax="true" to the individual links doesn't seem to work.
To set default for full page load:
$(document).on("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
To set individual, use data-ajax=true.
Somehow other suggestions didn't work for me. But this one did work. Tested.
This script disables all ajax links in the page jquery mobile - and those that should be ajax ones can be used as the a-link below with data-ajax=true.
<head>
<!-- ..... -->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).on("mobileinit", function () {
// Reference: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html
$.extend($.mobile, {
linkBindingEnabled: false,
ajaxEnabled: false
});
});
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<!-- ..... -->
</head>
<body>
<a href="holysmokewheredidtheajaxgo.html" data-ajax=true>Well, I'm still ajax. That's true!</a>
</body>
I'm trying to implement the pop up contact us dialog in this tutorial:
http://www.matthidinger.com/archive/2011/02/22/Progressive-enhancement-tutorial-with-ASP-NET-MVC-3-and-jQuery.aspx
I have a working version of the solution that runs absolutely fine.
While trying to integrate this into my own solution I've ran into a problem.
I've created a contactdialog.js file in my scripts directory:
/// <reference path="jquery-1.6.2.min.js"/>
/// <reference path="jquery-ui-1.8.11.js"/>
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("</div>")
.addClass("dialog")
.attr("id", $(this)
.attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove() },
modal: true
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
Then in my view I have near the top:
<script src="~/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="~/Scripts/contactdialog.js" type="text/javascript"></script>
And further down:
#Html.ActionLink("Contact Us", "ContactUs", "Home", null, new { #class = "openDialog", data_dialog_id = "emailDialog", data_dialog_title = "Contact Us"})
Now my link succesfully enters the javascript function, and seems to do the add class OK.
However when it gets to the .dialog function it throws the following exception:
"Object doesn't support property or method dialog"
Which would seem to indicate the jquery-UI hasn't been loaded.
However I can't figure out why?
If I load up the page in Chrome and check the page source the links to the jquery-ui-1.8.11.js happily open ok.
Some hints:
Is jqueryUI being loaded by another partial view (which is why you see it get loaded in developer tools) but the JS that calls .dialog is being rendered in a different partial view?
Try placing jqueryUI in the master/layout views?
I've changed to using bundling:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/contact")
For reasons completely beyond me at present this has kicked it into life, and the dialog is now being presented!
Ok. I have this code to load my form:
$.ajax({
type: "GET",
url: "/Board/Post/QuickEditPost",
data: dataString,
success: function (data) {
$('#quick-edit-content').html(data);
}
});
$('#quick-edit-dialog').dialog('open');
It's working fine. Form is loaded, I can edit my post and so on.
But to make it fully functional I need:
<script src="#Url.Content("~/Scripts/tiny_mce/jquery.tinymce.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/tiny_mce/tiny_mce.js")" type="text/javascript"></script>
<script type="text/javascript">
tinyMCE.init({
theme: "advanced",
height: "450",
width: "600",
mode: "textareas"
});
Which is not loaded into jQueryUI dialog.
And my question is why is not loaded and how to overrride this behavior.I tried to put those references in head section, but that's not an real option, I need then in few specific places over entire application. Not to mention it doesn't work either.