I am developing some ajax stuff on asp.net mvc framework beta.
but,I got exception as following.
Anyone has problem like me?
Sys.ArgumentUndefinedException: Value cannot be undefined.
and my source code is like this.
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<script src="../../Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<script type="text/javascript">
var myView;
$(pageLoad);
function pageLoad() {
myView = $create(Sys.UI.DataView, {}, {}, {}, $get("ajaxResult"));
$("#callAjaxButton").click(callActionMethod);
}
function callActionMethod() {
$.getJSON("/Home/GetCategories", bindData);
}
function bindData(data) {
myView.set_data(data);
}
</script>
<input type="button" id="callAjaxButton" value="ajaxCall" />
<div id="ajaxResult"></div>
</asp:Content>
From the snippet you provided there are a couple of things to consider:
You are missing a script reference to the Microsoft ASP.NET 2.0 AJAX Templates for Visual Studio 2008.
You are using the jquery's document.ready function (raised whenever the DOM is ready to be traversed and manipulated) instead of the System.Application.init event (raised after all scripts have been loaded but before objects are created).
Can you try this to see if it works for you:
<script src="../../Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>
<script type="text/javascript">
var myView;
Sys.Application.add_init(pageLoad);
function pageLoad() {
myView = $create(Sys.UI.DataView, {}, {}, {}, $get("ajaxResult"));
$("#callAjaxButton").click(callActionMethod);
}
function callActionMethod() {
$.getJSON("/Home/GetCategories", bindData);
}
function bindData(data) {
myView.set_data(data);
}
</script>
<input type="button" id="callAjaxButton" value="ajaxCall" />
<div id="ajaxResult"></div>
Scott Hanselman has written a nice post on this subject.
Related
I'm trying to add a script to my view head part. Problem is when I load view I'm getting a console error "Uncaught ReferenceError: myfunction is not defined". As I understand my script wasn't loaded. I just started working with .NET.ASP MVC.
Here is part of my view.cshtml
#model dynamic
#{
var rUser = ViewBag.User as MyAplication.Model.User;
}
#section head {
#if (!rUser.IsPremiumMember)
{
<script type="text/javascript">
myfunction
</script>
<script type="text/javascript" async="async" data-cfasync="false" src="https://script.js"></script>
<script type="text/javascript" async="async" data-cfasync="false" src="https://otherscript.js"></script>
}
}
I have been trying to get a simple example of the jquery-ui autocomplete to work. I have a controller setup to handle the query, and it returns the string that looks to be in order, but I am getting no suggestions showing up.
Here are the libraries I am including on that page
<link href="/Content/css/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/Stylesheet.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/coupon1.css" rel="stylesheet" type="text/css" />
<link href="/Content/Slider/slidder.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/el7r_notify.min.jq.js" type="text/javascript"></script>
<script src="/Scripts/ZeroClipboard.js" type="text/javascript"></script>
<script src="/Scripts/jquery.spellcheck.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Content/Slider/jquery.jcarousel.min.js" type="text/javascript"></script>
<script src="/Content/Slider/jquery-func.js" type="text/javascript"></script>
<script src="/Scripts/Coupon.js" type="text/javascript"></script>
and here is the javascript and the form tags:
$(document).ready(function () {
$("#tags").autocomplete({
source: function (request, response) {
$.ajax({
url: '/Home/GetCompanyNames',
success: function (msg) {
response($.map(msg));
}
});
}
});
});
<div class="ui-widget">
<label for="tags">tags: </label>
<input id="tags" />
</div>
I get back a string response that looks reasonable from my controller:
"LTJRKK,
KTOYQQ,
GDADKT,
PVFOQT,
PVFOQT,
YNKYVS,
YNKYVS,
DQBOVU,
DQBOVU
"
this string seem to be the default naming that autocomplete is looking for.
But I get no joy at all. Any thoughts?
Your call to $.map is incorrect. You are not supplying the callback function to $.map, which is probably causing the problem.
In this case, you do not need to use $.map at all since your action returns data in the correct format. The following should work fine:
$(document).ready(function () {
$("#tags").autocomplete({
source: '/Home/GetCompanyNames'
});
});
Probably you need this:
$("#tags").autocomplete({
source: function(request, response) {
$.ajax({
url: "url",
data: request,
dataType: "json",
method: "post",
success: response
}
}
});
I would like to create some resizeable and draggable div tags contain textarea tags with jQueryUI.And I also want to use nicEdit to format text inside these textarea tags.But i can't combine them,maybe.I can't edit text if i use $(element).resizeable().draggable().Here is my code:
<html>
<head>
<title>Trouble using jquery ui resizeable, draggable and nicEdit</title>
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" />
<script src="nicEdit/nicEdit.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var btnlist=['fontSize','fontFamily',
'bold','italic','underline','strikeThrough',
'left','center','right','justify',
'ol','ul','hr',
'indent','outdent',
'forecolor','bgcolor',
'subscript','superscript','removeformat'];
var myNicEditor = new nicEditor({iconsPath : 'nicEdit/nicEditorIcons.gif',buttonList :btnlist });
myNicEditor.setPanel('myNicEdit');
function ID()
{
var id="id";
var random_number=Math.round(Math.random()*1000000);
id+=random_number;
return id;
}
$('#a').click(function(){
var id=ID();
$('#content').append('<div class="d" style="width: 100px;height:100px;"><textarea style="width:100%;height: 100%" id='+id+'></textarea></div>');
myNicEditor.addInstance(id);
jQuery('.d').draggable().resizable();//If i remove this line,it work ok.
});
});
</script>
</head>
<body>
<div>
<button id="a">Add</button>
<div id="myNicEdit" style="width: 200px;" ></div>
<br />
<div id="content">
</div>
Can anyone give some solutions for me!Thank a lot!
</div>
You need to add 'handle' option when you apply draggable, so that it doesn't highjack the onmousedown event on all the child elements.
I can't see why the following form performs a full postback instead of asynchronously using AJAX. Request.IsAjaxRequest() is always false. I think I've followed all the examples correctly. What am I doing wrong?
Here's the view:
#(Layout = null)
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.4.4.js" type="text/javascript"></script>
</head>
<body>
<div>
<div id="update"></div>
#using(Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "update" }))
{
<input type="submit" value="test" />
}
</div>
</body>
</html>
And here's the controller:
using System.Web.Mvc;
namespace TheHoges.Web.Controllers
{
public class TestController : Controller
{
public ActionResult Index()
{
if (Request.IsAjaxRequest())
{
// never gets here
return Content("it worked");
}
return View();
}
}
}
For reference:
AJAX and MVC 3
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
Do you see this in you web.config?
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
If, yes, including the library above should solve your problem.
Just to be thorough I created a test page. Works peachy...
#{
ViewBag.Title = "Home Page";
}
#(Layout = null)
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
</head>
<body>
<div>
<div id="update">
</div>
#using(Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "update" }))
{
<input type="submit" value="test" />
}
</div>
</body>
</html>
I tried add click function on item, but seems that does not work correctly.
$(document).ready(function(){
$("#vibrateBtn").click(function() {
window.alert('test');
});
});
I tried also disable Ajax loading, with>
$(document).bind("mobileinit", function(){
ajaxEnabled:false;
});
But with same result.
Where can be problem please?
Thanks for any advice.
in jquery mobile document.ready() doesn't work and use .live to bind the click event instead of using the short hard .click().
There are other event like pagebeforecreate, pagecreate. check the jquery demo for the list of event.
$(document).live('pageshow',function(){
$("#vibrateBtn").live('click',function() {
window.alert('test');
});
});
Please try this code
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script language="javascript">
$(function() {
$('#theButton').on('tap click',function(event, ui) {
alert('The Button has been clicked');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
</div>
</body>
</html>