This tutorial says:
Note that in a real app, you should generate the URL server-side (via Url.Action call) and pass it down, or use RouteJs rather than hard-coding it. This tutorial hard-codes it for simplicity.
I can't do this in the JS itself:
<CommentBox url="#Url.Action("Comments")" />,
... so what does it mean by "pass it down"?
Is that just another way of saying "define the URL inside a Razor csHtml file where using # is allowed," like this?
<script>
$.CommentsUrl = '#this.Url.Action("Comments", "Home")';
<script>
... or is there a better way?
Even when I do the latter, that doesn't help me get the URL into this piece of code:
ReactDOM.render(
<CommentBox url=??? />,
document.getElementById('content')
);
The following code is actually done in the cshtml razor page. It is rendering the CommentBox component to the content div
ReactDOM.render(
<CommentBox url=??? />,
document.getElementById('content')
);
Since it is in the cshtml you can do this:
<div id="content"></div>
<script type="text/javascript">
ReactDOM.render(
<CommentBox url='#Url.Action("Comments")' />,
document.getElementById('content')
);
</script>
If you are only including a js file then you would need to create a global javascript variable and use it:
CSHTML:
<div id="content"></div>
<script type="text/javascript">
var commentUrl = '#Url.Action("Comments")';
</script>
External JS:
ReactDOM.render(
<CommentBox url={commentUrl} />,
document.getElementById('content')
);
Related
I am attempting to implement this simple example. However, the Javascript isn't working (all the content is showing at all times, no tab 'switching' is occurring). All the JS files are hosted locally.
In my head content placeholder:
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script type="text/javascript">
// not working
$(document).ready(function () {
$("#tabs").tabs();
});
</script>
In my main body content placeholder:
<div id="tabs">
<ul>
<li>One</li>
<li>Dos</li>
<li>Drei</li>
</ul>
<div id="tabs-1">
<p>Blah blah blah.</p>
</div>
<div id="tabs-2">
<p>Blah some more.</p>
</div>
<div id="tabs-3">
<p>Blah again.</p>
</div>
</div>
So far from searching SO and wherever else Google has taken me, this is what I've found and tried (with results for each listed):
Wrap the jQuery code in $(document).ready(function () { // code here }); rather than a simple function ($(function() { $( "#tabs" ).tabs(); });). It doesn't work either way.
Instead of $("#tabs").tabs();, use $("#<%= tabs.ClientID %>").tabs(); so that .NET can get the ID of the html element. In addition to not working, this also produces the error: tabs does not exist in the current context.
Place the JavaScript in the same content placeholder as the #tabs div tags. Still doesn't work.
Add runat="server" to the #tabs div tag. Still doesn't work.
Delete the designer file, then right click on the aspx file and select "Convert to Web Application". This doesn't work because this is already a web application and there is no designer file.
I can't figure out what else to do to make it work.
UPDATE: I was asked to view my browser console logs and found the following:
One of the JS files is giving a HTTP/1.1 401 Unauthorized error. I noticed it was blocked and I unblocked it from the file system, but it still isn't working.
I think problem could be in path to the jquery scripts.
Try to check loading of resources in browser console, or you can try to include jquery from jquery server...
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
In default.aspx I have:
<form id="form1" runat="server">
<div>
<asp:Button ID="clikme" runat="server" Text="click me" />
</div>
</form>
In default.aspx I have:
clikme.Attributes.Add("OnClick", "javaScript: return myfunction();");
And in JScript1.js I have
function myFunction() {
alert('this is my function');
return false;
}
The above code does not work it shows 'Microsoft JScript runtime error: Object expected'. I can't figure out how to find a solution.
You are call function with wrong name myfunction() should be myFunction() as javascript is case sensitive. Also make sure you include the JScript1.js in the current aspx file. You can read this MSDN artile to learn how to include js file.
clikme.Attributes.Add("OnClick", "javaScript: return myFunction();");
To include js file
<script type="text/javascript" src="yourDirectorIfAny/JScript1.js" ></script>
try this
add
script type='text/javascript' language="javascript" to your js portion and place your function inside it..
try
clikme.Attributes.Add("OnClientClick", "javaScript: return myFunction();");
The best way is to give reference of javascript file on Aspx page itself as suggested by Adil. If you want to register some javascript methods in code behind then you can have a look at this example.
http://msdn.microsoft.com/en-us/library/system.web.ui.page.registerclientscriptblock.aspx
Something like below will helpfull..
string script = "myFunction();";
AjaxControlToolkit.ToolkitScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alert", script, true);
JScript is CASE SENSITIVE language.
clikme.Attributes.Add("OnClick", "javaScript: return myfunction();");
function myFunction() {
...
}
Check above lines. myFunction function must be equal.
<script type="text/javascript">
$(document).ready(function () {
$('input[name="time"]').ptTimeSelect();
});
</script>
the above script is working on this:
<input name="time" value="" /></td>
But not working on this...
<asp:TextBox ID="time" name='time' runat="server"></asp:TextBox>
Please use following code
<script type="text/javascript">
$(document).ready(function () {
var id='<%=time.clientid%>'
$('#'+id).ptTimeSelect();
});
</script>
and let me know if this does not work.
From what I remember of ASP.NET is that it modifies the ID and name of an element to ensure it's always unique. The end result of the <asp:TextBox> may be something like:
<input name="ctr_0102_time" />
The best bet is to check the element's source on the live page to determine what attributes it has. If it does have a random identifier then you should probably base it on a specific class:
<input class="time" />
<asp:TextBox CssClass="time"></asp:TextBox>
$('input.time') ...
The other thing that may cause this to break are post backs. Post backs in ASP.NET do not re-ready the document, they simply reload the page. Instead of using $(document).ready() use:
function pageLoad() { ... }
try this:
<script type="text/javascript">
$(document).ready(function () {
$('[id$=time]').ptTimeSelect();
});
</script>
I would like to know how to run a javascript function on page load.. in my asp.net page. I do not want to do it in from my .cs file OnLoad, I want to keep it in the aspx page if at all possible.
I am new to javascript so any ideas?
<html>
<head>
<script type="text/javascript">
function loadJavaScript()
{
// add code here
}
</script>
</head>
<body onload="loadJavaScript()">
<h1>Java script on load demo</h1>
</body>
</html>
There is a nice example here
or
<script type="text/javascript">
$(document).ready(
function() {
//your code here
});
</script>
Add an onload event to the body html element.
http://www.w3schools.com/jsref/event_body_onload.asp
You can use the HTML body onload event.
or
Use a javascript framework like jQuery and use the $(document).ready() event. .ready()
You can use the RegisterStartupScript to register your javascript snippets from the code behind:
http://msdn.microsoft.com/en-us/library/bb310408.aspx
How do you set a textbox value to the equivalent of DateTime.Now in Javascript? I tried these
$('#LastUpdatedTime').val('<%= System.DateTime.Now %>');
$('#LastUpdatedTime').val('<%= System.DateTime.Now.ToString() %>');
Both set the value to the literal string <%= System.DateTime... instead of the time.
Add a javascript function in the aspx which simply returns the server tag, then call this function from your .js file. i.e. in the ASPX add:
function GetTimeNow () { return '<%= System.DateTime.Now.ToString() %>';}
You can't put server tags in a javascript file.
You have to put the code in a file that is handled by the ASP.NET engine, e.g. your .aspx file.
(It's possible to configure the server so that the ASP.NET engine also handles .js files, but that's not a good solution. Javascript files are cached more extensively than regular pages, so it's not certain that the server executes the code each time the file is used.)
Do you have them inside <script> tags on the aspx page?
The aspx page should look something like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
//put your JAVASCRIPT here
$('#LastUpdatedTime').val('<%= System.DateTime.Now %>');
$('#LastUpdatedTime').val('<%= System.DateTime.Now.ToString() %>');
</script>
</form>
</body>
</html>
That code is fine. The problem is that your <%= System.DateTime.Now %> code is not being parsed as server side code. What's the rest of the page look like?
Edit:
Since it's in an external JS file, you could always rename the ".js" file to ".aspx" so that ASP.Net would start processing it. Then you'd just have to change your <script> tags to use the ".aspx" name instead.
The other option is to configure your server to send ".js" files through the ASP.Net handler.
How about writing out the time on the main .aspx page in the header
<script type="text/javascript">
var now = <%= System.DateTime.Now %>;
</script>
and then doing
$('#LastUpdatedTime').val(now);
You just need to make sure that you name things appropriately so that the JS in the external file gets the value from the global scope.