I try to use jQueryUIHelpers.Mvc3 but when i click on the box the datebox picker not appear.
I installed the jqueryUIHelpers.Mvc 3 package like here http://jqueryuihelpers.apphb.com/Docmo/Overview/GettingStarted
But when i am running the page and click the date box nothing appears.
Here is my view:
#model MvcApplication4.Models.Reservation
#using JQueryUIHelpers
#{
ViewBag.Title = "Create";
}
<head>
<h2>Create</h2>
<title>jQuery UI Helpers - #ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.18.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.unobtrusive.min.js")" type="text/javascript"></script>
</head>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Reservation</legend>
<div>
<label for="anotherDate">Select another date: </label>
#(Html.JQueryUI().Datepicker("anotherDate").MinDate(DateTime.Today).ShowButtonPanel(true)
.ChangeYear(true).ChangeMonth(true).NumberOfMonths(2))
</div>
May be it is because you have called jquery after the validate js and an error occurred and script stopped functioning. Check your error console and include jquery-1.7.1.min.js before all other jquery plugin js and try again. I didnt find any error in the datepicker initialisation function.
I believe it is because when you run Install-Package jQueryUIHelpers.Mvc3 the current version installs ~/Scripts/jquery-ui-1.8.19.min.js and ~/Scripts/jquery-1.7.2.min.js. However, the demo code references version ~/Scripts/jquery-ui-1.8.18.min.js and ~/Scripts/jquery-1.7.1.min.js which is the version you have used. Unless you have manually installed this file, you will not be referencing the correct version.
Related
Am using jquery draggable collision plugin which throws the error on loading the page that is "Type Error i is undefined"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type= "text/javascript" src="js/jquery-ui.js"></script>
<script type= "text/javascript" src="js/jquery-collision.min.js"></script>
<script type= "text/javascript" src="js/jquery-ui-draggable-collision.min.js"></script>
<script type= "text/javascript" src="js/common.js"></script>
</head>
<body>
<div id="header">Sprite Generator</div>
<div id="droppable" >
<div id="overLay">Drop Files Here</div>
</div>
<div id="cssDetails">
<div id="cssHead">CSS Data</div>
</div>
<div id="errorMessage"></div>
</body>
</html>
This is the code I use. Kindly help, am not aware what is going wrong here.
The error lies in the draggable collision plugin file. Each time the method .data("draggable") is called, an undefined value is returned.
There is a slight difference between jQuery UI 1.9.2 and 1.10.3. In this last version, .data("draggable") has been replaced by .data("ui-draggable").
You should :
Either use an old version of jQuery UI plugin,
or use the last version, then replace .data("draggable") by .data("ui-draggable") in the jquery-ui-draggable-collision.min.js file.
In my own case, I used the second solution. But your case may be different, since I don't know which version of jQuery UI plugin you are using now.
The README for jQuery UI Draggable Collision reads:
Load jquery-ui-draggable-collision and its dependencies:
<script src="jquery-1.8.3.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="jquery-collision-1.0.2.js"></script>
<script src="jquery-ui-draggable-collision-1.0.2.js"></script>
It doesn't explain why you need to load modules separately, but my suspicion is there's a conflict going on somewhere. I'd try including the specific individual files (core, widget, mouse, draggable, collision, and ui-draggable-collision) and see if that works. Without more information in your question, it's hard for me to try a set of specific things, but this may be your best bet.
Hello guys I'm trying to implement the wmd editor like this on stackoverflow but I can't show the buttons of the editor only the textarea appears.. here is my codes.. Am I doing something wrong here? Or missing something? Thanks hopefully you guys could help me.
<!DOCTYPE html>
<head>
<link href="#Url.Content("~/Content/wmd.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/showdown.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/wmd.js")" type="text/javascript"></script>
<body>
<div id="wmd-button-bar" class="wmd-panel"></div>
<textarea id="wmd-input" class="wmd-panel"></textarea>
<div id="wmd-preview" class="wmd-panel"></div>
<div id="wmd-output" class="wmd-panel"></div>
</head>
</body>
I want to use Agile Uploader to resize images before upload on my server.
But when I try to upload image on server it does nothing... I mean that there is no image in POST data. I've checked POST and there is no items at all. What am I doing wrong?
Here is my code:
<html>
<head>
<script type="text/javascript" src="/static/js/jquery1.6.4.min.js"></script>
<script src="/static/js/jquery.flash.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/static/css/unrelated.css" />
<script src="/static/js/agile-uploader-3.0.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/static/css/agile-uploader.css" />
</head>
<body>
<form action="/test" method="post" id="singularDemo" enctype="multipart/form-data">
<div id="single"></div>
</form>
Submit
<script type="text/javascript">
$('#single').agileUploaderSingle({
formId:'singularDemo',
progressBarColor:'#3b5998',
flashVars:{
firebug:true,
form_action:'/test',
}
});
</script>
</body>
</html>
Most code part taken from their demo.
Thanks in advance!
you have to edit the process.php file, where you'll define the remote upload folder!
and then modify the form_action in: "form_action: process.php"
Im relatevely new with Asp.net MVC3,
I have a form handled with Ajax, like this:
#using (Ajax.BeginForm("dtjson", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "detalle_tarifa", OnSuccess = "exito2", OnBegin="bloquear" }))
My problem is that when I submit data, it sends the request twice.
Lets take a look at the view.
This is the form:
ok, now the view after submit:
And this one is to show firebug debugging:
On the layout, I have those javascript files..
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.windows-engine.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.jqDock.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.jqDock.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablePagination.0.4.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tools.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.cookie.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.treeview.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.treeview.edit.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
And on the view (A Partial View), I have this:
<script src="#Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script type="text/javascript" src=#Url.Content("~/Content/tinymce/jscripts/tiny_mce/jquery.tinymce.js")></script>
<script type="text/javascript" src=#Url.Content("~/Content/tinymce/jscripts/tiny_mce/tiny_mce.js")></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="#Href("~/Scripts/jquery.uploadify.js")" type="text/javascript"></script>
<script src="#Href("~/Scripts/jquery.scrollTo.js")" type="text/javascript"></script>
<script src="#Href("~/Scripts/jquery.blockUI.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.min.js")" type="text/javascript"></script>
<script src="/Scripts/jquery.cookie.js" type="text/javascript"></script>
<script src="/Scripts/jquery.treeview.js" type="text/javascript"></script>
<script src="/Scripts/jquery.treeview.edit.js" type="text/javascript"></script>
It seems like it's a problem with jquery... but Im not sure of it...
Any help would be great, Thanks everybody!
You have included jquery.unobtrusive-ajax.min.js twice once in the layout once in the partial. So your browser executes the js inside twice which will subscribe twice on the form click event that is why doing two POST instead of one.
So you need to remove the jquery.unobtrusive-ajax.min.js from the partial.
Note: If your are using a partial with a layout you don't need to duplicate the js included in the partial because it's already done by the layout. There are some good articles about layouts and partials.
You have added jquery.unobtrusive-ajax.js three times. It had happened to me as well.
Check in bundle config "~/ui/js/jquery.unobtrusive.*". the * is wildcard to match both minified or un-minified version. As your solution contains both of the files, it is adding "jquery.unobtrusive-ajax.js" and "jquery.unobtrusive-ajax.min.js". Again in your view page or layout page, you have added jquery.unobtrusive-ajax.js/jquery.unobtrusive-ajax.min.js which is making three times request/post
I my case I had "return View" instead of "return PartialView".
I am working with ASP.NET MVC 3 (Razor)
I loaded a partial view by holds a form by clicking on Ajax Link that is located on my view as follows
#Ajax.ActionLink("Students List", "Create", "Student", new AjaxOptions {OnSuccess = "updatePlaceholder", UpdateTargetId = "holder" })
The partial view loads properly, but I discovered that the Telerek DatePicker isn't showing when I click on the button to bring it down
and also client side validations arent working also. I followed the approch described here but it still insn't working
http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html
My code is below
HERE IS MY VIEW
#Ajax.ActionLink("Students List", "Create", "Student", new AjaxOptions {OnSuccess = "updatePlaceholder", UpdateTargetId = "holder" })
function updatePlaceholder(context) {
// the HTML output of the partial view
var html = context.get_data();
// the DOM element representing the placeholder
var placeholder = context.get_updateTarget();
// use jQuery to update the placeholder. It will execute any JavaScript statements
$(placeholder).html(html);
// return false to prevent the automatic update of the placeholder
return false;
}
HERE IS MY PARTIALVIEW
#model MyUniversity.Models.Student
#using (Ajax.BeginForm(new AjaxOptions {UpdateTargetId="holder"}))
{
#Html.ValidationSummary(true)
Student
#Html.Telerik().DateTimePicker().Name("EnrollmentDate").Value(DateTime.Now.ToString())
#Html.ValidationMessageFor(model => model.EnrollmentDate)
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
#Html.ActionLink("Back to List", "Index")
Here is my _Layout.cshtml with the registered scripts
#ViewBag.Title
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.debug.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")" type="text/javascript"></script>
#(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.telerik.css").Combined(true).Compress(true)))
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
#(Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(group => group.Combined(true).Compress(true)))
I have partial view that is loaded without Ajax. I had trouble making both the validation and Telerik datepicker popup to work. On my partial view I added the three scripts for validation:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
But with this the popup wouldnt work, so I added these scripts to my _layout.cshtml just before:
#Html.Telerik().ScriptRegistrar()
I had already registered the following scripts on the _layout.cshtml page on the top:
<script src="#Url.Content("~/Scripts/MicrosoftAjaxTemplates.debug.js")" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/ui/jquery.ui.core.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/ui/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.tabs.js")" type="text/javascript"></script>
<!-- Telerik Extensions for MVC Scripts -->
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.combobox.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.editing.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.filtering.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.grouping.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.reordering.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.resizing.min.js")" type="text/javascript"></script>
<script src="../../Scripts/2011.2.712/telerik.datetimepicker.min.js" type="text/javascript"></script>
<script src="../../Scripts/2011.2.712/telerik.datepicker.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
After that all seems to work fine.