I am using Telerik along with regular jQuery UI.
I have include files like this,
JQuery:
<script src="<%: Url.Content("~/Scripts/jquery-1.7.2.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.20.custom.min.js") %>" type="text/javascript"></script>
Telerik
I tried,
<%= Html.Telerik().ScriptRegistrar() %>
and
<%= Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(false) %>
With jQuery(false).jQueryValidation(false) I am getting error:
Microsoft JScript runtime error: Object doesn't support property or method 'apply'
without jQuery(false).jQueryValidation(false) i.e with <%= Html.Telerik().ScriptRegistrar() %>
The jQuery UI is not working. Error: Microsoft JScript runtime error: Object doesn't support property or method 'button'
<button id="Button1">Button1</button>
<script language="javascript" type="text/javascript">
$(function () {
$("#Button1").button().click(function () {
location.href = '/One/Two';
});
});
</script>
This sounds like the same (or very similar) problem that we had after setting up Telerik. I'm assuming the scripts and telerik code you posted above is all on your master page(or layout)? Try deleting
<%= Html.Telerik().ScriptRegistrar() %>
from the master page and paste it to the bottom of each individual view that actually uses a telerik control. That is what worked for us.
Related
Beginner's question here.
I'm trying to upload the photo from a webpage directly to cloudinary.
Here is the jQuery plugin that Cloudinary recommends to use.
Unfortunately the plugin is not documented yet, and doesn't have a clear "example.html" file.
I've tried to get my head around the plugin code, but with no success so far.
Can somebody point me to the right direction in terms of what "example.html" should look like?
Thanks.
Download the Jquery SDK and the server sdk.
Here is the code with a java server side :
Generating the signature on server side :
Here is the JSP code in java :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# page import="java.util.Map" %>
<%# page import="java.util.HashMap" %>
<%# page import="java.sql.Timestamp" %>
<%# page import="com.cloudinary.Cloudinary" %>
<%
String timestamp=(new Long(System.currentTimeMillis() / 1000L)).toString();
Cloudinary cloudinary = new Cloudinary("cloudinary://CLOUDINARY_URL");
Map<String, Object> params = new HashMap<String, Object>();
Map options = Cloudinary.emptyMap();
boolean returnError = Cloudinary.asBoolean(options.get("return_error"), false);
String apiKey = Cloudinary.asString(options.get("api_key"), cloudinary.getStringConfig("api_key"));
if (apiKey == null)
throw new IllegalArgumentException("Must supply api_key");
String apiSecret = Cloudinary.asString(options.get("api_secret"), cloudinary.getStringConfig("api_secret"));
if (apiSecret == null)
throw new IllegalArgumentException("Must supply api_secret");
params.put("callback", "http://www.mcbjam.com/Scripts/vendor/cloudinary/html/cloudinary_cors.html");
params.put("timestamp", timestamp);
String expected_signature = cloudinary.apiSignRequest(params, apiSecret);%>
You can have the CLOUDINARY_URL on your Cloudinary Dashboard.
I use the cloudinary.apiSignRequest method wich is include in server cloudinary sdk. I sign the callback and the timestamp.
The HTML and Javascript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="../Scripts/vendor/jquery-1.9.1.min.js"></script>
<script src="../Scripts/vendor/cloudinary/jquery.ui.widget.js"></script>
<script src="../Scripts/vendor/cloudinary/jquery.iframe-transport.js"></script>
<script src="../Scripts/vendor/cloudinary/jquery.fileupload.js"></script>
<script src="../Scripts/vendor/cloudinary/jquery.cloudinary.js"></script>
</head>
<body>
<script type="text/javascript">
$.cloudinary.config({"api_key":"YOUR_API_KEY","cloud_name":"YOUR_CLOUD_NAME"});
</script>
<input name="file" type="file" id="uploadinput"
class="cloudinary-fileupload" data-cloudinary-field="image_upload"
data-form-data="" ></input>
<script>
var data = { "timestamp": <%= timestamp %>,
"callback": "http://YOUR_DOMAIN/cloudinary_cors.html",
"signature": "<%= expected_signature %>",
"api_key": "YOUR API KEY" };
$('#uploadinput').attr('data-form-data', JSON.stringify(data));
</script>
</body>
</html>
Put the cloudinary_cors.html on your host and modify the path on the html. Set your APIKEY and your cloud name.
<%= timestamp %> and <%= expected_signature %> are the element calculate on java. ( You can do the same on php).
I use this code on my website here http://paint.mcbjam.com
You have more details here : http://mcbjam.blogspot.fr/2013/05/integrer-cloudinary-pour-realiser-des.html in French.
Please see the recently published blog post that covers direct uploading from the browser to Cloudinary using jQuery: http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery
You cannot upload images to Cloudinary just by using plain html. You'll need a server that signs your request params. So,here is your example.html file:
<html>
<head>
<title></title>
<script src='jquery.min.js' type='text/javascript'></script>
<script src='jquery.ui.widget.js' type='text/javascript'></script>
<script src='jquery.iframe-transport.js' type='text/javascript'></script>
<script src='jquery.fileupload.js' type='text/javascript'></script>
<script src='jquery.cloudinary.js' type='text/javascript'></script>
<script type = "text/javascript">
$.cloudinary.config({ cloud_name: 'sample', api_key: '874837483274837'});
</script>
</head>
<body>
<input name="file" type="file"
class="cloudinary-fileupload" data-cloudinary-field="image_id"
data-form-data="--signedData--" />
</body>
</html>
Note: The signedData in data-form-data attribute is a JSONObject generated by a server-side code which includes a sha1Hex signature of your request parameters.
An example of that would look like:
{
"api_key": "874837483274837",
"timestamp": "1234567890",
"public_id": "sample",
"signature": "de9f2c7fd25e1b3afad3e85a0bd17d9b100db4b3"
}
Also, let me make you clear that you don't need any other buttons to upload the file, just choosing the file would trigger the jQuery event and send the request parameters to Cloudinary.
You can find about generating signature on java here.
I want to create an Organisation chart in my ASP MVC application. We have got licence for telerik AJAX controls - which has Organisation chart control.
Does anyone know if we can use Telerik ASP.NET controls in an MVC application?
Thanks
Telerik have an ASP.NET MVC section which shows use of charts:
http://www.telerik.com/products/aspnet-mvc.aspx
However I think you'll have to check with them as to whether this is part of your licence.
In a nutshell, yes.
We've not used the Org Charts but we have used a number of the Telerik asp.net ajax controls (Calendars, Grids and Treeviews for the most recent release) within the views of our MVC project.
You simply need the reference to the Telerik.Web.UI within the view.
Basic code to show the calendar in use:
<%# Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server">
About Us
</asp:Content>
<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>About</h2>
<p>
Put content here.
</p>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<telerik:RadCalendar ID="RadCalendar1" runat="server" TitleFormat="MMMM yyyy" CultureInfo="English (United States)"
PresentationType="Preview" EnableNavigation="false" EnableMonthYearFastNavigation="false">
</telerik:RadCalendar>
</asp:Content>
Whilst not really answering your question you could not use the Telerik controls but instead use JavaScript libraries offered by Google (for free).
Here is sample code taken from Google's site.
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['orgchart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
data.addRows([
[{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml:true});
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
In this blog it should be explained how to implement the jquery datepicker for all DateTime inputs. I fail miserably however when I try to follow the steps taken. I suspect that I am setting the references wrong somewhere, as there are now already newer (and diffverently named) .js files in my VS project than those mentioned in the blog. Is there a place where the implementation is spoon fed for the absolute jquery NOOB?
EDIT:
I also found this link. After copying in the code as mentioned I am greeted by an exception in jquery 1.5.1-min.js that says that the object doest not support that property or method...
EDIT(2)
I am at my wits' end wth this one, I tried to add the references Tridus suggested, but I have different versions and of some versions I have a .min.js alternative. All the relevant code:
In StandIn.cs:
[DisplayName("Available from")]
[DisplayFormat(DataFormatString="{0:d}",ApplyFormatInEditMode=true,NullDisplayText="(not specified")]
public DateTime? From { get; set; }
In Edit.cshtml:
<div class="editor-field">
#Html.EditorFor(model => model.Standin.From)
#Html.ValidationMessageFor(model => model.Standin.From)
</div>
In _Layout.cshtml:
<head>
<title>#ViewBag.Title</title>
<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.5.1.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-1.5.1.min.js")" type="text/javascript"></script>
</head>
In \Shared\EditorTemplates\DateTime.cshtml
#model Nullable<System.DateTime>
#if (Model.HasValue)
{
#Html.TextBox("", Model.Value.ToShortDateString(), new { #class = "date" })
}
else
{
#Html.TextBox("",string.Empty)
}
<script type="text/javascript">
$(document).ready(function () { $('.date').datepicker({ dateFormat: "dd/mm/yy" }); });
</script>
Mind: all the code performs without problems until I add the script tags: then on showing Edit.cshtml jquery-1.5.1.min.js throws an exception about a property or method not being supported.
This is a good place to start: http://jqueryui.com/demos/datepicker/
What you're almost certainly missing is just the script references to the right jQuery libraries. These need to be somewhere in the resulting HTML (either in the template for the DateTime object itself, or in your _layout.cshtml so it's just included everywhere). Adjust paths and versions accordingly for what you have in your project.
<script src="#Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.14.min.js")" type="text/javascript"></script>
If you have it, you probably also need a jQuery UI theme:
<link href="#Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
That's the only thing I didn't see in the blog post. Everything else really is as direct as they say.
I am getting more and more convinced that the problem lays with the .js files that are included with a default MVC3 project in Visual Studio 2010: they must lack some of the requiered dependent .js files. I went to the jquery ui site as suggested by Erik, downloaded the full jquery ui package and used the references and .js files from the default.html in the development-bundle/demo/datepicker folder. That works! However, as a VS MVC3 project comes with a lot of premade custom scripts I had to keep the downloaded .js files separate from those in the Scripts folder. Therefor I created a new JQueryScripts folder that I use for the UI elements. The references to these .js files cannot be added to _Layout.cshtml to avoid a conflict and I did not include the MasterPage (_Layout.cshtml) for the same reason.
For the record the resulting DateTime.cshtml EditorTemplate that works with a Nullable DateTime and shows how to implement localization for one language (Dutch in this case). Note that this code will be made obsolete with a new release of jquery(ui), but it gives an idea:
<link rel="stylesheet" href="../../../JQueryScripts/themes/base/jquery.ui.all.css"/>
<script type="text/javascript" src="#Url.Content("~/JQueryScripts/jquery-1.6.2.js")"></script>
<script type="text/javascript" src="#Url.Content("~/JQueryScripts/ui/jquery.ui.core.js")"></script>
<script type="text/javascript" src="#Url.Content("~/JQueryScripts/ui/jquery.ui.widget.js")"></script>
<script type="text/javascript" src="#Url.Content("~/JQueryScripts/ui/jquery.ui.datepicker.js")"></script>
<script type="text/javascript" src="#Url.Content("~/JQueryScripts/ui/i18n/jquery.ui.datepicker-nl.js")"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker').datepicker({
dateFormat: "dd-mm-yy",
minDate:0
});
});
</script>
#model Nullable<System.DateTime>
#if (Model.HasValue)
{
#Html.TextBox("", Model.Value.ToShortDateString(), new { #class = "datepicker" })
}
else
{
#Html.TextBox("", string.Empty, new { #class = "datepicker" })
}
I want as well as Client Side Validation as Server Side Validation. I realized this as the following:
Model: ( The model has a DataModel(dbml) which contains the Test class )
namespace MyProject.TestProject
{
[MetadataType(typeof(TestMetaData))]
public partial class Test
{
}
public class TestMetaData
{
[Required(ErrorMessage="Please enter a name.")]
[StringLength(50)]
public string Name { get; set; }
}
}
Controller is nothing special.
The View:
<% Html.EnableClientValidation(); %>
<% using (Ajax.BeginForm("Index", "Test", FormMethod.Post,
new AjaxOptions {}, new { enctype = "multipart/form-data" }))
{%>
<%= Html.AntiForgeryToken()%>
<fieldset>
<legend>Widget Omschrijving</legend>
<div>
<%= Html.LabelFor(Model => Model.Name) %>
<%= Html.TextBoxFor(Model => Model.Name) %>
<%= Html.ValidationMessageFor(Model => Model.Name) %>
</div>
</fieldset>
<div>
<input type="submit" value="Save" />
</div>
<% } %>
To make this all work I added also references to js files:
<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.1.min.js" type="text/javascript"></script>
Eventually it has to work, but it doesnt work 100%:
It does validates with no page refresh after pressing the button.
It also does "half" Client Side Validation. Only when you type some text into the textbox and then backspace the typed text. The Client Side Validation appears. But when I try this by tapping between controls there's no Client Side Validation.
Do I miss some reference or something? (I use Asp.Net MVC 2 RTM)
Change the order of the loaded javascript...
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<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>
Had the exact same problem and this cleared it up for me...
I thought I was missing something too, but I do know that the jQuery validation plug in doesn't react to mouseEnter/mouseLeave. According to the documentation for that plug in (at the plug in page - look for the section labeled "A few things to look for when playing around with the demo"):
Before a field is marked as invalid, the validation is lazy: Before submitting the form for the first time, the user can tab through fields without getting annoying messages - he won't get bugged before he had the chance to actually enter a correct value
I assume it's the same rule with MVC 2 client-side validation. I can't be sure of that because the documentation doesn't say anything but "it works on my machine" :).
I went with the jQuery validation route, which is supported in MVC Futures (note that the documentation for that is non-existent). To use it, you just need to replace the script tags for MicrosoftAjax.js, MicrosoftMvcAjax.js and MicrosoftMvcValidation.js files with these two tags:
<script src="/js/jquery.validate.js" type="text/javascript"></script>
<script src="/js/MicrosoftMvcJQueryValidation.js" type="text/javascript"></script>
replacing the path with yours.
I also found the need to upgrade to the latest version of jquery.validate.js from the developer's page, because we are using a later version of jQuery (1.4) here.
Hope that helps.
hm..., it's late to answer but try this:
<script src="<%= Url.Content("ScriptFile.js") %>" type="text/javascript"></script>
I have the following code for a simple jQuery UI dialog box. When I place this on a webpage, it works beautifully. However, If I call I insert this code dynamically onto a page using an AJAX function, it doesn't work and the dialog div just appears on the page. Is there any way to make it work in dynamically inserted code?
File DialogBox.html:
<script type="text/javascript">
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#dialog").dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>
This is the default dialog which is useful for displaying information. The
dialog window can be moved, resized and closed with the 'x' icon.
</p>
</div>
File index.html (calls DialogBox.html):
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax({
url: "DialogBox.html",
success: function(html){
$("#SpanID").html(html);
}
});
</script>
Does this work better for you?
$("#SpanID").load("DialogBox.html");
In addition to being shorter, it should also allow the loaded JavaScript to be run. More info here: http://docs.jquery.com/Ajax/load