I was reading the documentation on Phalcon about Hierarchical Rendering("http://docs.phalconphp.com/en/latest/reference/views.html#hierarchical-rendering"). And I can't seem to figure it out. I have the following file setup just like the documentation but the only difference is that i am using volt.
--views
--vacancy
--index.volt// action
--new.volt//action
--layouts
--vacancy.volt//controller
And this is my Vacancy controller. It's just an empty controller
class VacancyController extends \Phalcon\Mvc\Controller
{
public function indexAction()
{
}
public function newAction()
{
}
}
Problem
When i go to "mysite.com/vacancy" everything seems to be rendering just fine. But when i use the "new" action "mysite.com/vacancy/new" i get the content of the file new.volt but it doesn't render the way i think it's supposed too.
In the chrome console i get this error:
Resource interpreted as Script but transferred with MIME type text/html:
If i remove the action "new " it will just renders fine!
I hope it's clear enough.
I resolve it just by putting a / before every file that i was including into the html document..
Example
<script type="text/javascript" src="/js/main.js"></script>
instead of
<script type="text/javascript" src="js/main.js"></script>
Related
I'm trying to use ajax with thymeleaf. I designed a simple html page with two input field. I would like to use addEventHandler for the value of first input text, then I want to send it to controller and make calculation, after that I need to write it in same html form in the second field which returns from controller.
For example:
first input text value -> controller (make calculation) -> (write value) in second input text.
My html page is
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<input type="text" name="Thing" value=""/>
<script th:inline="javascript">
window.onload = function () {
/* event listener */
document.getElementsByName("Thing")[0].addEventListener('change', doThing);
/* function */
function doThing() {
var url = '#{/testurl}';
$("#fill").load(url);
alert('Horray! Someone wrote "' + this.value + '"!');
}
}
</script>
<!-- Results block -->
<div id="fill">
<p th:text="${responseMsg}"/></div>
</div>
</body>
</html>
My controller
#RequestMapping(value = "/testurl", method = RequestMethod.GET)
public String test(Model model) {
model.addAttribute("responseMsg","calcualted value")
return "test";
}
However I cannot call controller from ajax. Could you help me?
There are a few issues with your code. First of all, it looks like you're using the same template for both the initial loading of the application, and returning the calculated result.
You should split these two into different calls if you're using AJAX, since one of the goals of AJAX is that you don't need to reload an entire page for one change.
If you need to return a simple value, you should use a separate request method like this:
#GetMapping("/calculation")
#ResponseBody
public int multiply(#RequestParam int input) {
return input * 2; // The calculation
}
What's important to notice here is that I'm using #ResponseBody and that I'm sending the input to this method as a #RequestParam.
Since you will be returning the calculated value directly, you don't need the Model, nor the responseMsg. So you can remove that from your original request mapping.
You can also remove it from your <div id="fill">, since the goal of your code is to use AJAX to fill this element and not to use Thymeleaf. So you can just have an empty element:
<div id="fill">
</div>
Now, there are also a few issues with your Thymeleaf page. As far as I know, '#{/testurl}' is not the valid syntax for providing URLs. The proper syntax would be to use square brackets:
var url = [[#{/calculation}]];
You also have to make sure you change the url to point to the new request mapping. Additionally, this doesn't look as beautiful since it isn't valid JavaScript, the alternative way to write this is:
var url = /*[[ #{/calculation} ]]*/ null;
Now, your script has also a few issues. Since you're using $().load() you must make sure that you have jQuery loaded somewhere (this looks like jQuery syntax so I'm assuming you want to use jQuery).
You also have to send your input parameter somehow. To do that, you can use the event object that will be passed to the doThing() function, for example:
function doThing(evt) {
var url = [[#{/calculation}]];
$("#fill").load(url + '?input=' + evt.target.value);
alert('Horray! Someone wrote "' + this.value + '"!');
}
As you can see, I'm also adding the ?input=, which will allow you to send the passed value to the AJAX call.
Finally, using $().load() isn't the best way to work with AJAX calls unless you try to load partial HTML templates asynchronously. If you just want to load a value, you could use the following code in stead:
$.get({
url: /*[[ #{/calculation} ]]*/ null,
data: { input: evt.target.value }
}).then(function(result) {
$('#fill').text(result);
});
Be aware that $.get() can be cached by browsers (the same applies to $().load() though). So if the same input parameter can lead to different results, you want to use different HTTP methods (POST for example).
I am new to MVC 3 and have come accross the following scenario:
First let me explain how I have setup my application:
All post backs to the server use jquery ajax which which return a view from the controller that either appended or prepended or replace a targeted div.
The Scenario:
I have come to a point where I would like to upload images but unfortunately because of the jquery ajax posting I cannot get the values for an html in C# Request.Files. I know there are plugins out there to help out with this but I would like to do this myself so I have created an <iframe> which i then use a bit of javascript and post the form targeted to the iframe (old classic way of doing things):
function UploadImg(SACTION) {
alert(SACTION);
validatorform.action = SACTION;
validatorform.target = "fraImage";
validatorform.method = "POST";
validatorform.submit();
}
the SACTION parameter looks like this #Url.Action("UploadFile", "Response"). This all works well as it hits the controllers action method and I can then save the image:
[HttpPost]
public ActionResult UploadFile(string ArticleID)
{
ViewBag.PreviewImage = cFileUploads.UploadFile(ArticleID, Request.Files[0]);
return View("ImagePreview");
}
I would now like to return a view to the iframe (simply to preview the image and then do a couple of other things but this is besides the point)
The View for previewing the Image:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="">
<img alt="" src="#ViewBag.PreviewImage" />
</form>
</body>
</html>
The Problem:
Unfortunately when I return the View (ImagePreview.cshtml) in C# the whole page is refreshed, all I want is for the iFrame to be refreshed. How should I return the view from the controller?
Fiqured out the problem, I had a bit of javascript that was replacing the contents of a div that the iframe was sitting in ... (slap on my forehead). All working perfectly now :)
Will leave this question here just incase ..
My first post...
When I use RedirectToAction the url in the browser doesn't change. How can I achieve this?
I'm switching over to ASP.NET MVC 3.0 (also using jQuery Mobile) after 10+ years using web forms. I'm about 8 weeks into it, and after several books and scouring Google for an answer, I'm coming up dry.
I have a single route defined in Global.asax:
routes.MapRoute(
"Routes",
"{controller}/{action}/{id}",
new { controller = "Shopping", action = "Index", id = UrlParameter.Optional }
I have a ShoppingController with these actions:
public ActionResult Cart() {...}
public ActionResult Products(string externalId) {...}
[HttpPost]
public ActionResult Products(List<ProductModel> productModels)
{
// do stuff
return RedirectToAction("Cart");
}
The url when I do a get and post (with the post having the RedirectToAction) is always:
/Shopping/Products?ExternalId=GenAdmin
After the post and RedirectToAction I want the url in the browser to change to:
/Shopping/Cart
I've tried Redirect, and RedirectToRoute but get the same results.
Any help would be greatly appreciated.
[Update]
I found that jQuery Mobile AJAX posts are the culprit here. If I turn off jQuery Mobile's AJAX it works.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// do not handle links via ajax by default
$(document).bind("mobileinit", function () { $.mobile.ajaxEnabled = false; });
</script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
The ordering of the above scripts is important. I had to include the script to jQuery first, then include the script to disable jQuery Mobile's use of AJAX and then include the script to jQuery Mobile.
I'd still like to find a way to use AJAX and have the url update properly. Or at the least be able to call jQuery Mobile's "loading" message (or bake my own).
I think I've found an answer. Buried deep in the jQuery Mobile documentation, there is information about setting the data-url on the div with data-role="page". When I do this, I get the nice jQuery Mobile AJAX stuff (page loading message, page transitions) AND I get the url in the browser updated correctly.
Essentially, this is how I'm doing it...
[HttpPost]
public ActionResult Products(...)
{
// ... add products to cart
TempData["DataUrl"] = "data-url=\"/Cart\"";
return RedirectToAction("Index", "Cart");
}
Then on my layout page I have this....
<div data-role="page" data-theme="c" #TempData["DataUrl"]>
On my HttpPost actions I now set the TempData["DataUrl"] so for those pages it gets set and is populated on the layout page. "Get" actions don't set the TempData["DataUrl"] so it doesn't get populated on the layout page in those situtations.
The only thing that doesn't quite work with this, is when you right-click... view source... in the browser, the html isn't always for the page you are on, which isn't unusual for AJAX.
Not sure if it is still actual, but in my case I wrote following helper method
public static IHtmlString GetPageUrl<TModel>(this HtmlHelper<TModel> htmlHelper, ViewContext viewContext)
{
StringBuilder urlBuilder = new StringBuilder();
urlBuilder.Append("data-url='");
urlBuilder.Append(viewContext.HttpContext.Request.Url.GetComponents(UriComponents.PathAndQuery, UriFormat.UriEscaped));
urlBuilder.Append("'");
return htmlHelper.Raw(urlBuilder.ToString());
}
And then use it as follows:
<div data-role="page" data-theme="d" #Html.GetPageUrl(ViewContext) >
This way I don't need for every redirect action store a TempData. Worked for me fine both for Redirect and RedirectToAction. This would not work properly in case if you use method "View()" inside controller and return different view name, which will change UI, but will retain url.
Hope it helps
Artem
David, this was a big help to me. I just wanted to add that in my case I had to use the following format to get the Url to display in the correct form as my other url's:
TempData["DataUrl"] = "data-url=/appName/controller/action";
return RedirectToAction("action", "controller");
As a side note, I also found that when assigning the value to TempData["DataUrl"] I was able to leave out the escaped quotes and enter it exactly as above and it seems to be working fine for me. Thanks again for your help.
There is an issue on github
https://github.com/jquery/jquery-mobile/issues/1571
It has a nice solution without the need of TempData
I'm using tinymce jquery plugin and trying to access the api after initializing an instance of tinymce over a textarea.
In this example, I have a hide button, which when clicked on is supposed to hide the tinymce editor, but instead I get an error.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tinymce/jquery.tinymce.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<div><textarea id="textEditor" class="tinymce" disabled="disabled"></textarea></div>
<input type ="button" id="hide" value="Hide tinymce">
</body>
</html>
$(document).ready(function(){
//textEditor
$("#textEditor")
.tinymce({
// Location of TinyMCE script
script_url : 'js/tinymce/tiny_mce.js',
theme : "advanced",
theme_advanced_buttons1 : "bold,italic,underline,",
theme_advanced_resizing : false
})
//... see below ...//
});
Update: I have 2 versions now, one that works by wrapping the $("#textEditor").tinymce().hide(); line in a click function, and one that gives me tinyMCE not defined with just the line itself.
Works:
$("#hide").click(function(){
$("#textEditor").tinymce().hide();
})
Doesn't work:
$("#textEditor").tinymce().hide(); //error tinyMCE is not defined
You could try
tinymce.get("textEditor").hide();
To verify if you are useing the correct tinymce id can alert all tinymce ids present at your page using
for (var i = 0; i < tinymce.editors.length; i++) {
alert(tinymce.editors[i].id);
}
EDIT:
This:
/** Option Block A error **/
// $("#textEditor").tinymce().hide(); //error tinyMCE is not defined
/** Option Block A error **/
does not work because it will get called before the tinymce editor is initialized. At this point there is no tinymce.get("textEditor").
I think that the path to your jquery plugin is not correct, because, the $.tinymce() method is provided there. If the file is not to be found, so is this method.
Also you should ensure that the path specified inside the *script_url* field is valid, as the plugin will try to load it on the fly.
I have a content page and a user control. The usercontrol uses CollapsiblePanelExtender. I have written the following javascript function on "onmouseout" of the panel.
<script language="javascript" type="text/javascript">
function doToggle()
{
var cpe = $find("CollapsiblePanelExtender1.ClientID");
//cpe._toggle();
if (!cpe.get_Collapsed()) {
cpe._doClose();
}
}
</script>
This conent page is part of master page. When I run the code I get javascript error. cpe is always null. How to use $find for CPE for a master page scenario? I also tried document.getElementById and passed the client id, still it didn't work. Please help.
Problem resolved by adding BehaviorID="cpe" to CollapsiblePanelExtender.
<ajax:CollapsiblePanelExtender ID="cpe" runat="Server" BehaviorID="cpe"
TargetControlID="SettingsContentPanel" CollapsedSize="0" Collapsed="True" ExpandControlID="SettingsTitlePanel"
CollapseControlID="SettingsTitlePanel" ScrollContents="False" ImageControlID="btnSettingsPopup"
SuppressPostBack="true" ExpandedImage="~/images/collapse.jpg" CollapsedImage="~/images/expand.jpg"
ExpandDirection="Vertical" AutoCollapse="false" AutoExpand="false" />
And then $find function will be able to find the control, code like:
function doToggle()
{
var cpe = $find("cpe");
if (!cpe.get_Collapsed())
{
cpe._doClose();
}
}