My Search.cshtml has a div named "search-results" that is to be updated. SearchResults is the action name. I have done this many times on MVC2/VS2008 projects, but this is my first using MVC3 and VS2010.
The problem is, instead of my search result being rendered in my div, it clicking submit is redirecting me displaying my partial as a standalone page.
I have read that this may be because Ajax is not enabled. My _Layout.cshtml looks like this:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/2011.2.712/jquery-1.5.1.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/themes/base/jquery.ui.core.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/main.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/2011.2.712/jquery-1.5.1.min.js")" type="text/javascript"></script>
#(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.transparent.css").Combined(true).Compress(true)))
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
#(Html.Telerik().Menu()
.Name("menu")
.Items(menu => {
menu.Add().Text("Home").Action("Index", "Home");
menu.Add().Text("About").Action("About", "Home");
menu.Add().Text("Employees").Action("List", "Employee");
}))
</div>
<div id="main">
#RenderBody()
<div id="footer">
</div>
</div>
</div>
#(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)))</body>
</html>
Do I need to add MicrosoftMvcAjax.js or jquery.unobtrusive-ajax.js in? My web.config (root) contians the following:
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
If I add MicrosoftMvcAjax.js in at the end of the element, I get an error sayning namespace 'Type' is undefined error from the first line of MicrosoftMvcAjax.js:
Type.registerNamespace('Sys.Mvc');Sys.Mvc.$create_AjaxOptions=function(){return {};}
What am I missing here. I am sure my code is fine, as it copied alsmost verbatim from my MVC2 projects.
You forgot to include the jquery.unobtrusive-ajax.js script to your page (adjust the path as necessary):
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
As far as Microsoft*.js scripts are concerned, they are obsolete in ASP.NET MVC 3 and should no longer be used unless you are porting some legacy application. They have been replaced by jQuery.
Ok, figured out my problem.
I was calling Ajax.BeginForm with the AjaxOption OnSuccess pointint to a js function that updated my place holder. But this is not needed, with unobtrusive. Once I removed the OnSucces from the Ajax options everything started working.
~S
Related
I have a situation where i have a view file users.blade.php which extends master. and the master includes another file called header.blade.php, i want to pass some data from users.blade to header.blade.
Here is the simplified version of the files
/****** Users.blade.php *********/
#extends('shared.master')
#section('title', 'Dashboard')
#section('pagecss')
<link rel="stylesheet" href="links to css file" />
#endsection
Here is the master.blade.php
/******Shared/master.blade.php ********/
<html>
<head>
<title>#yield('title')</title>
#include('shared.header')
</head>
<body >
#yield('content')
</body>
</html>
Here is the header file
/******Shared/header.blade.php ********/
<link rel="stylesheet" href="links to bootstrap" />
#yield('pagecss')
<link rel="stylesheet" href="links to other files" />
#yield('pagecss') doesn't work in the header.blade, but it does work in master.blade. Now i cant paste it in master.blade because there are some files which override other files, so it has to be in a specific order. Any ideas how to make the yield work in header.blade?
EDIT:
I do like Bharat Geleda approach, i have modified the code to include some heredocs to make it more convenient. But i think its kind of a hack and still looking for a better solution.
/********** Users.blade.php ***********/
#extends('shared.master')
#section('title', 'Dashboard')
#section('pagecss')
<link rel="stylesheet" href="links to css file" />
#endsection
<?php $pagecss = <<<CSS_FILES
<link rel="stylesheet" href="links to page css" />
CSS_FILES;
?>
/*********** Shared/header.blade.php **********/
#if(isset($pagecss))
{{-- */ echo $pagecss;/* --}}
#endif
A possible solution would be to do this
<?php $pagecss = '<link rel="stylesheet" href="links to css file" />'?>
/****** Users.blade.php *********/
#extends('shared.master')
#section('title', 'Dashboard')
master.blade.php would remain the same
/******Shared/master.blade.php ********/
<html>
<head>
<title>#yield('title')</title>
#include('shared.header')
</head>
<body >
#yield('content')
</body>
</html>
And then in your header file you could do this
/******Shared/header.blade.php ********/
<link rel="stylesheet" href="links to bootstrap" />
#if(isset($pagecss))
{{ $pagecss }}
#endif
<link rel="stylesheet" href="links to other files" />
EDIT: TESTING OUT QUESTION
main.blade.php (master in your case)
<html>
<head>
#include('test.header')
</head>
<body >
#yield('content')
</body>
</html>
header.blade.php
<link rel="stylesheet" href="links to bootstrap" />
#yield('pagecss')
<link rel="stylesheet" href="links to other files" />
users.blade.php
#extends('test.main')
#section('content')
CONTENT
#endsection
#section('pagecss')
<link rel="stylesheet" href="links to css file" />
#endsection
OUTPUT :
<html>
<head>
<link rel="stylesheet" href="links to bootstrap" />
<link rel="stylesheet" href="links to css file" />
<link rel="stylesheet" href="links to other files" />
</head>
<body >
CONTENT
</body>
</html>
I guess this is as expected.
Simple if it's working on homepage and not in inner views, that means you've used it, and Blade will take only the higher level and resolve it (include its content where it should be placed within #yield).
What I'm trying to say that if you got a #yield within your header file and you've used it as #section('pagecss') later you got another view as in your case Users.blade.php with the same statement #section('pagecss') blade won't take the inner one.
Solution
Nice way but foolish:
create another #yield within your shared header blade file and name it as level two or like so. i.e #yield('pagecss-2')
Good way:
using #parent, this directive is going to append (rather than overwriting) content to the layout
as mentioned here within docs of laravel
i'm a web devoper from Italy...I have a problem with loading with href
example:
i have one.html with this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
</head>
<body>
<!-- LOGIN -->
<div data-role="page" id="loginPage">
<div data-role="content">
<div style=" text-align:center">
<img style="width: 70%;" src="http://www.laboncloud.it/dkrmobile/css/images/logdkr.png">
</div>
<form action="#pageFile">
<div data-role="fieldcontain">
<label for="userNameLogin">
Username
</label>
<input name="" id="userNameLogin" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="passwordLogin">
Password
</label>
<input name="" id="passwordLogin" placeholder="" value="" type="password">
</div>
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch="trues">
Login
</a>
</form>
</div>
</div>
</body>
</html>
and the two.html with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<script type="text/javascript" src="js/tolito-1.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/tolito-1.0.5.min.css" />
<!--css userinterface-->
<link rel="stylesheet" href="css/ui.css" />
</head>
<body>
<div data-role="page" id="loadingPage">
<div data-role="content">
<h1>caricamento di tutti i contenuti in corso</h1>
<a data-role="button" data-theme="a" data-transition="fade" href="#pageFile">skip</a>
</div>
</div>
<div data-role="page" id="pageFile">
<div data-role="content">
<h1>dueeee</h1>
</div>
</div>
<!-- FILE-->
</body>
</html>
now if tap on login - the two.html will no be loaded.
want a demo?
here the demo
if I click on skip in two.html dont show nothing (if I refresh the page it start work).
the only way is data-ajax="false" ? why?
This is not an error. To understand this problem you must understand how jQuery Mobile works.
Multi HTML template can't be mixed with multi page template. For example when working with several HTML pages, only first one can have more then one page. When jQuery Mobile loads other HTML files it will strip HEAD (we dont need it because first HTML HEAD content is already loaded into the DOM) and it will load ONLY first page it can find in a file, every other page will be discarded.
data-prefetch will not help you here. Also you are initializing it incorrectly, data-prefetch attribute don't have a value, it is just data-prefetch, example:
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch>Login</a>
If you want to find out more how jQuery Mobile handles multiple HTML and multiple page templates or what are they take a look at this ARTICLE or THIS one. To be transparent they are my personal blog articles. Everything you need to know can be found there.
Basically solution to your problem would be to have all pages inside a single HTML file, or you should brake two.html into two separate HTML files. you decide what is a best solution for you.
I have the following view definition in my asp.net mvc website:
<% Using Ajax.BeginForm("UsrCtlChangePassword", "User", Nothing, New AjaxOptions With {.UpdateTargetId = "resultDiv", .InsertionMode = InsertionMode.Replace, .HttpMethod = "Post"}, New With {.id = "myFormID"})%>
<%: Html.ValidationSummary(True, "Invalid details supplied.")%>
...View field definition in here
...
<% End Using%>
</div>
So basically when the user enters invalid information (old password doesn't match) the whole page isn't refreshed just the targetdiv.
This works perfectly in my dev environment. The problem I have is that I have now deployed it to my web host server (softsys windows 2008 server) and it doesn't work upon the deployed server. It totally ignores the ajax insertion mode logic and just sends back the entire form.
Why would it be working in dev and not on the deployment server? I've checked all the dlls and scripts and everything seems to be there. Following is the dll's in my bin folder:
I've got the following keys set in my web.config (I changed the UnobtrusiveJavaScriptEnabled to true and it didnt make a difference):
<add key="webpages:Version" value="1.0.0.0" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="false" />
And this is the script links in my site.master:
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="<%: Url.Content("~/Content/themes/Redmond/jquery-ui.css")%>" rel="stylesheet" type="text/css" />
<script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/modernizr-1.7.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.cookie.js") %>" type="text/javascript"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/MicrosoftAjax.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>"></script>
Any ideas?
Thanks in advance.
I worked it out, it ended up being that I needed to add the following lines to my site.master:
<% Html.EnableClientValidation()%>
<% Html.EnableUnobtrusiveJavaScript(False)%>
For some reason the keys I set in the web.config were being ignored when deployed to the webserver. As soon as I added these lines to the site master everything worked as it should.
I am working on a richface application and trying to evaluate the following xpath with xpather on firefox3.5. XPather does not evaluate any of the xpath though the same xpath works perfectly fine on firefox 3.6.
The page which I am testing is like -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="http://openfaces.org">
<head>
<script src="some source" type="text/javascript"></script>
<script src="some source" type="text/javascript"></script>
<link class="component" href="some source" rel="stylesheet" type="text/css" />
<link class="component" href="some source"
media="rich-extended-skinning" rel="stylesheet" type="text/css" />
<link class="component" href="some source" rel="stylesheet" type="text/css" />
<script type="text/javascript">window.RICH_FACES_EXTENDED_SKINNING_ON=true;</script>
<link type="text/css" href="some source" rel="stylesheet"/>
<body class="Banner" onresize="setTreePnlHeight()" onload="loadApp();">
<input type="hidden" id="dsTreeScrollPos" value="0" />
<div id="a" class="application"><form id="form" name="form" method="post" action="...">
....
</body>
</html>
If I use xpather(v1.4.5) to evaluate the simple xpath on FF3.5 like //input, it does not return any result. Is namespace causing this issue? How can i verify my xpath on FF3.5?
simple xpath on FF3.5 like //input, it
does not return any result. Is
namespace causing this issue?
Yes. If you look at your document, you have a default namespace definition there.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="http://openfaces.org">
This means that //input is looking for an element <input> without a namespace, whereas you should look for <input> that is in the http://www.w3.org/1999/xhtml namespace. You need to define that namespace and bind it to a prefix and then use that prefix in your XPath. like //x:input
I tried to retrieve the value of a particular variable and alert it.
That is,I wanted to get the value "{"attributes":[{"type":"Text","labels":"Untitled1"}]}
" in that variable. Using the success: function(msg) in ajax ,I alerted the value.
But instead of the required value :{"attributes":[{"type":"Text","labels":"Untitled1"}]}
I am getting the text given below. What is the problem?
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
CakePHP: the rapid development php framework: Forms
</title>
<link href="/cake_1_2/favicon.ico" type="image/x-icon" rel="icon" />
<link href="/cake_1_2/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<link rel="stylesheet" type="text/css" href="/cake_1_2/css/cake.generic.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>
CakePHP: The rapid development php framework
</h1>
</div>
<div id="content">
{"attributes":[{"type":"Text","labels":"Untitled1"}]}
</div>
<div id="footer">
<a href="http://www.cakephp.org/" target="_blank">
<img src="/cake_1_2/img/cake.power.gif" alt="CakePHP: The rapid development php framework" border="0" />
</a>
</div>
</div>
</body>
The problem is that you still use the default layout. Try switching to another shipped layout for Ajax-responses:
// In your controller
$this->layout = 'ajax';