JQuery is not running - javascript

I am using master page and content page. In content page I am using following jquery code
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript">
$("document").ready(function() {
var y = $("#<%hid.ClientID%>").val();
});
</script>
</asp:Content>
<input type="hidden" id="hid" runat="server" />
When I run this code I am getting this error
Compiler Error Message: CS1002: ; expected
Line 167: #__w.Write("\").val();\r\n });\r\n </script>\r\n\r\n\r\n");
Any solution ?

It is an ASP.NET compiler error message. You're missing an = from your output tag. It should be:
<%=hid.ClientID%>

Not sure if this is your problem, but document does not have to be in quotes
$(document).ready(function() {

You could simply call
$(function() {
var y = $("#hid").val();
});
if your input has a static id.
You should verify your resulting HTML / JavaScript code and see what <%hid.ClientID%> outputs.

This is an ASP.NET parsing error. The problem lies in the following line:
$("#<%hid.ClientID%>").val();
You see, the <%= %>, not <% %>. So, it should look like this:
$("#<%= hid.ClientID %>").val();

Right code is
var y = $('#<%=hid.ClientID%>').val();
# Tells jquery that find a control with given ID and <%=hid.ClientID%> gives the exact ID. Only <%=hid.ClientID%> this will not work. '#<%=hid.ClientID%>' is the right code.

Related

jQuery in UpdatePanel in ASP.NET error

I have a JQuery script in a asp:Panel in an UpdatePanel which is in an ASP.NET page. This is the code.
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="ImagePanel">
<img id="photo" src="/Icons/Factory Layout.png" style="display:none"/>
<script type="text/javascript">
$(document).ready(function () {
var factoryImage = $("#photo");
factoryImage.attr("src",document.getElementById('<%= FactoryImageFileNameHF.ClientID %>').value);
factoryImage.show();
$('#photo').imgAreaSelect({
handles: true,
show: true,
onSelectEnd: function(img, selection) {
var X1 = document.getElementById('<%= X1HF.ClientID %>');
var Y1 = document.getElementById('<%= Y1HF.ClientID %>');
var X2 = document.getElementById('<%= X2HF.ClientID %>');
var Y2 = document.getElementById('<%= Y2HF.ClientID %>');
X1.value = selection.x1;
X2.value = selection.x2;
Y1.value = selection.y1;
Y2.value = selection.y2;
}
});
});
</script>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
I have the following link in the head of the web form.
<script type="text/javascript" src="/Scripts/jquery.imgareaselect.pack.js"></script>
I have the following errors
Uncaught ReferenceError: jQuery is not defined
at eval (eval at <anonymous> (jquery.imgareaselect.pack.js:1), <anonymous>:1:10852)
at jquery.imgareaselect.pack.js:1
FactoryLayoutSettings.aspx:543 Uncaught TypeError: $ is not a function
at FactoryLayoutSettings.aspx:555
(anonymous) # FactoryLayoutSettings.aspx:555
As I am new to jQuery I am not really sure of where the error is. Is it a result of the UpdatePanel because at the beginning the image shows and then on a postback it fails and I get the errors above? The underlined part of the code where it fails is $(document).ready(function (). Does anyone have any ideas?
Before the script tag you have mentioned you should also have another one script tag, in which you would refer to jQuery. As it seems you make use of jQuery but you haven't loaded the library, before you use it.
<script type="text/javascript" src="..."></script>
In the src ... should be replaced with the path to the jQuery.
The code you are using requires JQuery.
Add another script resource to your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You need to include JQuery before you actually use it.
First, create a required bundle for your jquery scripts you want on every page:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/js/required").Include(
"~/Scripts/jquery-2.0.2.js"));
//other bundles
}
Now include this bundle into your page-
<body>
#RenderBody()
#Scripts.Render("~/js/required") //Here add your jquery include
#RenderSection("scripts", false) //Here you add scripts at the bottom of the page
</body>
It should solve your issue.

Access a javascript variable in code behind

So here's what I'm trying to accomplish:
I have a client facing page that loads, and when that happens I automatically run a series of 4 quick tests, if any of those tests fail I update the HCresults variable.
.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script language="javascript" src="script/XmlHttp.js?vers=<%=VersionInfo %>" type="text/javascript"></script>
<script src="client_scripts/JQuery/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
var HCresults = "";
</script>
</asp:Content>
I want to access the value of HCresults after the page finishes loading from my code behind page. Is there a way to do this?
You can write a webmethod in your code behind;
pseudo code:
public static var HCresultsCS;
[webmethod]
public static void grabHCresults(var HCresultsfromJS)
{
HCresultsCS= HCresultsfromJS;
}
make an AJAX post to this webmethod with HCresults you're setting on a test failure as parameter;
Access the HCresultsCS from CS now. Check for nulls! I can't comment
This link might be helpful:
http://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx
Unfortunately not using JS, you can store the value in a hiddenfield however to retrieve in C#. Make sure that you set the attribute runat = "server" for the control. I should also mention you'll use element.value = value to assign the value.

Why I can't get the ClientContext by OM in JavaScript?

Here is what I did in my project:
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript">
alert("before");
//It can not work cause the LIST is in the subsite called "Service"
//var clientContext = SP.ClientContext.get_current();
var context =new SP.ClientContext("http://sp2010dev1:88/Service/");
alert(context );
</script>
</asp:Content>
But, the alert(context) can not execute ,when I check the concole it showed me TypeError: SP.ClientContext is not a constructor,that is to say there was something wrong with the initialization of ClientContext. Why? How can I get ClientContext? Or was it caused by the lacking of SP.js?
My Final Solution is : Add this statement to the masterpage: ,and then everything works good! May this can help you.
Instead of writing directly in the <script> blocks try to insert in the function and call that function on body load.
Another good way is call using the jquery
$(document).ready()(function(){
var context =new SP.ClientContext("http://sp2010dev1:88/Service/");
alert(context );
});
Try this once, even if it is not working then will try to find another solution.
Along with this as per steve suggestion, include first sp.js and perform remaining things.
Yes, it probably is because SP.js is not loaded. Try this:
<SharePoint:ScriptLink runat="server" Name="SP.js" Localizable="false" OnDemand="False" LoadAfterUI="True"></SharePoint:ScriptLink>
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(function () {
/* your code here */;
}, "sp.js");
</script>

ext.js is undefined

In my aspx page:
<script type="text/javascript">
Ext.onReady(function() {
Ext.get('mb1').on('click', function(e) {
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
});
function showResult() {
Ext.example.msg('test');
</script>
<div>
<asp:Button ID="mb1" runat="server" Text="Button" />
</div>
I got error message "ext is undefined". Can anyone help me?
You have to include the js file like
<script type="text/javascript" src="extjs.js"></script>
before using any of the functions.
you should download the extjs framework from the site itself and host it locally if you can. http://extjs.com
Is it possible that you used "ext" somewhere instead of "Ext" (wrong capitalization)?
you don't seem to be closing your functions with "}"
Once you get Ext working, you'll probably want to use the button's client ID instead of the code-behind ID:
...
Ext.get('<%=mb1.ClientID%>').on('click', function(e) {
...
Include below all three file in your file
ext-all.css,ext-base.js,ext-all-debug.js

How do I get Ajax form submissions to work in ASP.net MVC?

I'm very new to the AJAX and Javascript world and I'm trying to implement Scott Hanselman's example of form submission to update part of a page. I have copied his example almost word-for-word and I can't seem to get it to work. When I click the submit button the controller action is called successfully but the result is rendered in the browser as a new page, instead of updating just the span that I specified in the Ajax form.
Here is my view code:
<asp:Content ID="indexHead" ContentPlaceHolderID="head" runat="server">
<title>Home Page</title>
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<% using (Ajax.BeginForm("TestAction", new AjaxOptions { UpdateTargetId = "target" }))
{ %>
<%= Html.TextBox("TextBox")%>
<input type="submit" value="Submit" />
<span id="target" />
<% } %>
</asp:Content>
And my controller action:
public string TestAction(string TextBox)
{
return TextBox;
}
And I have included the following lines in the master page
<script src="../../Scripts/MicrosoftMvcAjax.debug.js"type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
But all it seems to do is call the action and render the result as a new page, instead of updating the target span. Here are some small screenshots to illustrate what's happening.
Screenshot 1 http://martindoms.com/scr1.JPG
Screenshot 2 http://martindoms.com/scr2.JPG
Any ideas?
You have the javascript include in your master page in the wrong order.
Reorder so that MicrosoftAjax.js is included first of the three and it will work.
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
Just throwing some ideas out there...
http://www.asp.net/learn/MVC/tutorial-33-cs.aspx
Your controller action is in a class defined like so?
public class MyController : Controller
Apparently the name of the class has to end with the word controller.

Categories