Call function created in view using javascript in the same view - javascript

I have created a view which contains both Javascript and functions as shown:
#functions
{
public int DaysInMonth(string Month)
{
//code to get the no of days in month;
}
}
I have drop down list that contains month..
Now I want to write code on dropdownlist's change event using jQuery which will call the above function.
<script type="text/javascript">
$(function () {
$('#Months').live('change', function () {
//code to call the above function
});
});
</script>
Here ('#Months') is the id of the dropdownlist..
Note: Both the above code snippets are in the same view (Index).
How can i link the above two code snippets??
Thank you..

#functions
{
public int DaysInMonth(string Month)
{
//code to get the no of days in month;
}
}
try like this
<script type="text/javascript">
#DaysInMonth(month);
</script>
it worked fine in my program.

Try this:
/*#cc_on #*/
<script type="text/javascript">
$(function () {
$('#Months').live('change', function () {
var monthSelected = $(this).val();
//code to call the above function
#DaysInMonth(monthSelected);
});
});
</script>
More info on this is at:
http://www.mikesdotnetting.com/Article/173/The-Difference-Between-#Helpers-and-#Functions-In-WebMatrix
Also have a look at this answer:
JavaScript Error: conditional compilation is turned off in MVC2 View

Related

How to call javascript function from ScriptManager.RegisterStartupScript?

I have the following javascript code:
<script type="text/javascript" language="javascript">
$(document).ready(
function () {
// THIS IS FOR HIDE ALL DETAILS ROW
$(".SUBDIV table tr:not(:first-child)").not("tr tr").hide();
$(".SUBDIV .btncolexp").click(function () {
$(this).closest('tr').next('tr').toggle();
//this is for change img of btncolexp button
if ($(this).attr('class').toString() == "btncolexp collapse") {
$(this).addClass('expand');
$(this).removeClass('collapse');
}
else {
$(this).removeClass('expand');
$(this).addClass('collapse');
}
});
function expand_all() {
$(this).closest('tr').next('tr').toggle();
};
});
</script>
I want to call expand_all function via code-behind .
I know I can use something like this, but it does not work and I don't understand used parameters:
ScriptManager.RegisterStartupScript(Me, GetType(String), "Error", "expand_all();", True)
Can you help me?
Because you have your expand_all function defined within anonymous $.ready event context. Put your code outside and it should work.
function expand_all(){
alert('test B');
}
$(document).ready(
function () {
// this won't work
function expand_all() {
alert('test A');
};
});
// will show test B
expand_all();
check this:
http://jsfiddle.net/jrrymg0g/
Your method expand_all only exists within the scope of the function inside $(document).ready(...), in order for you to call it from ScriptManager.RegisterStartupScript it needs to be at the window level, simply move that function outside the $(document).ready(...)
<script type="text/javascript" language="javascript">
$(document).ready(
function () {
....
});
function expand_all() {
$(this).closest('tr').next('tr').toggle();
};
</script>

Trouble calling JavaScript function on page load

I have a javascript function that i have named refreshProjects(), what it does is filter a dropdownlist depending on what was selected in a previous dropdownlist. But i need to also filter my list direcktly after the page has finishd loading.
I have tried using the code window.onload = refreshProjects(id) with no sucsses, but onload workes when i use window.onload = alert('This page has finished loading!'), so i know that part off the script works. So how do i call a javascript function on load, i thought that it would be simple but evrything i tried have failed.
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
window.onload = refreshProjects(id); <-- Problem
$("#ddCustomers").change(function () {
refreshProjects($(this).val());
});
function refreshProjects(id) {
var projects = $("#ddProjects");
$.get('#Url.Action("FilterProjects","TimeEntry")', { customerId: id },
function (result) {
// clear the dropdown
projects.empty();
//Add a deafult "null" value
$("#ddProjects").get(0).options[0] = new Option("[ - No project - ]", "-1");
// rebuild the dropdown
$.each(result, function (i, e) {
projects.append($('<option/>').text(e.Text).val(e.Value));
});
});
}</script>
}
This is for MVC 4.5.
Try changing window.onload = refreshProjects(id); to:
window.onload = function() { refreshProjects($("#ddCustomers").val()); };
Onload expects a callback function. You were directly executing refreshProjects() and setting the return value as the onload.
But since you seem to be using jQUery, you could do the following:
$(function() {
refreshProjects($("#ddCustomers").val());
});
This will execute refreshProjects when the document is ready (which actually is before window load).
You can also try to use the following:
$(document).ready(function () {
refreshProjects(id);
});
This should work aswell if you are using jQuery.

Javascript: Detect load in ascx page. Internet Explorer

I have a dropdown that will trigger the ChangeGraph javascript function. In Chrome/Firefox, when my partial view (.ascx) is loaded, I get the hello alert. This is not the case in IE. Any ideas on how to solve this. Basically I can't initiate a javascript function once the ascx page is written using "$('#GraphForm').html(data);"
From my Index.aspx:
<div id="GraphForm"></div>
Javascript:
function ChangeGraph(displayTypeId) {
$('#GraphForm').html("");
$.get('/Dashboard/GetGraphForm', { id: displayTypeId }, function(data) {
$('#GraphForm').html(data);
});
}
Controller:
public PartialViewResult GetGraphForm(int id)
{
//... Build Model (removed)
return PartialView("EnergyConsumedFormView"/* , model */);
}
EnergyConsumedFormView.ascx Javascript:
<script type="text/javascript">
$(document).ready(function() {
alert('hello');
});
</script>
I'm new to javascript so the answer wasn't obvious until I figured it out. Know it seems REAL obvious. Just call the function if you don't care if the document is ready...
<script type="text/javascript">
alert('hello');
</script>

The javascript code from server side is not working in asp.net?

i am developing an Asp.net application when i call javascript function from codebehind i found that for example:
click event not fired
i have a javascript function that fill the dropdown list with items using ajax but when page loaded i found dropdown list empty
i am using RegisterClientScriptBlock to execute the javascript code
so is there any solution for these problems?
code snippet:
code behind:
ClientScript.RegisterClientScriptBlock(this.GetType(), "ClientBlock", javacode.ToString());
this what in javacode variable :
<script type="text/javascript">
<!--
function ExecuteScript()
{
$("#divGender input").click();
GetDMspecifyList(5);
$("cp1_drpDMSpecify").removeAttr('disabled');
$("cp1_drpDMSpecify option:selected").val(4);
$("#divFamily input").click();
}
</script>
// -->
this the function used to fill dropdown list but it is not working
function GetDMspecifyList(DMID) {
$("#DMLoader").show();
$.getJSON('FillDropDownLists.aspx?DMTypeID=' + DMID, function (types) {
$.each(types, function () {
$("#cp1_drpDMSpecify").append($("<option></option>").val(this['DMTypeCode']).html(this['DMTypeName']));
});
$("#DMLoader").hide();
$("#DMSpecify_span").show();
$("#cp1_hdDMType").val($("#cp1_drpDMSpecify").val());
$("#cp1_drpDMSpecify").removeAttr('disabled');
});
}
First of all the function "ExecuteScript()" is lacking it's closing curly brace "}".
Also, is the ExecuteScript() function called anywhere?
EDIT
You could try something similar to the code below :
<script type="text/javascript">
<!--
function ExecuteScript() {
$("#divGender input").click();
GetDMspecifyList(5, function() {
$("cp1_drpDMSpecify").removeAttr('disabled');
$("cp1_drpDMSpecify option:selected").val(4);
$("#divFamily input").click();
});
}
function GetDMspecifyList(DMID, callback) {
$("#DMLoader").show();
$.getJSON('FillDropDownLists.aspx?DMTypeID=' + DMID, function (types) {
$.each(types, function () {
$("#cp1_drpDMSpecify").append($("<option></option>").val(this['DMTypeCode']).html(this['DMTypeName']));
});
$("#DMLoader").hide();
$("#DMSpecify_span").show();
$("#cp1_hdDMType").val($("#cp1_drpDMSpecify").val());
$("#cp1_drpDMSpecify").removeAttr('disabled');
callback();
});
}
$(function() { ExecuteScript(); });
// -->
</script>

Js javascript code problem

Hi i have a problem with my js code. So, i include in 'head' in my site, script
var Engine;
jQuery
(
function($)
{
Engine =
{
utils :
{
site : function(id)
{
$('#content').html('<strong>Please wait..</strong>').load('engine.php',{'site':id},function()
{
os = {adres:'drugi'};
history.pushState(os,'s',ts);
}
);
},
topnav : function()
{
$('div li').bind('click',function()
{
Engine.utils.site($(this).attr('rel'));
unbind('click',false);
}
);
}
}
};
Engine.utils.topnav();
}
);
Now i want call included script in index.php
<script language="JavaScript" type="text/javascript">
Engine.utils.site(1);
</script>
And here is a problem above code doesn't works.
But if i click on any 'li' element Engine.utils.site work's correctly.
Please help me i try fix it a few days.
Sory for my bad english
Have you tried putting the call in a ready function?
<script language="JavaScript" type="text/javascript">
$(function() {
Engine.utils.site(1);
});
</script>
This happens because of closure. Your object Engine is not visible outside anonymous function

Categories