I am trying to bind menus using angular js dynamically using partial view.. that is working properly but I want to bind menus before view renders.
Currently, It render partial view and main view, after that it hits for angular get method.
AngularJs Controller:
app.controller('menuController', ['$scope', '$http', function ($scope, $http) {
$scope.init = function () {
angular.element(document).ready(function () {
$scope.SiteMenu = [];
$http.get('http://localhost:9585/admin/menulist').then(function (data) {
debugger;
if (data.data != "" && data.data != "1") {
$scope.SiteMenu = data.data;
}
else
window.location="/UserLogins/SignIn"
},
function (error) {
alert('Error');
})
});
}
}]);
Partial View(_Layout.cshtml):
<!DOCTYPE html>
<html ng-app="myApp1">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/JS/Module.js"></script>
<script src="~/Scripts/JS/Service.js"></script>
<script src="~/Scripts/JS/Controller.js"></script>
</head>
<body class="" style="">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div id="navbarid" class="collapse navbar-collapse">
<div ng-controller="menuController" ng-init="init()" ng-view>
<ul class="main-navigation">
<li class="dropdown" ng-repeat="menu in SiteMenu | filter : {ParentMenuId: 0}:true" ng-include="'treeMenu'"></li>
<li style="float:right;">Log Out</li>
</ul>
<script type="text/ng-template" id="treeMenu">
{{menu.Name}}
<ul ng-if="(SiteMenu | filter : {ParentMenuId : menu.MenuItemId}:true).length > 0" style="line-height:1px;">
<li id="submenuitem" ng-repeat="menu in SiteMenu | filter : {ParentMenuId : menu.MenuItemId}:true" ng-include="'treeMenu'" style="border-bottom:1px solid white;"></li>
</ul>
</script>
</div>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav"></ul>
</div>
</div>
<div class="container body-content">
#RenderBody()
</div>
#RenderSection("Scripts", false)
I am including this partial view in my another view page, angular js call is made after view render. I want to call that angular js controller get method $http.get('http://localhost:9585/admin/menulist') before view render.
Call $scope.init function on load like below
app.controller('menuController', ['$scope', '$http', function ($scope, $http) {
$scope.init = function () {
angular.element(document).ready(function () {
$scope.SiteMenu = [];
$http.get('http://localhost:9585/admin/menulist').then(function (data) {
debugger;
if (data.data != "" && data.data != "1") {
$scope.SiteMenu = data.data;
}
else
window.location="/UserLogins/SignIn"
},
function (error) {
alert('Error');
})
});
}
$scope.init(); //call function while loading controller
}]);
Related
I'm writing a test mobile app using asp.net, jquery mobile and phonegap. I have a simple form in which you enter an year and click submit. Ajax call is made to results.aspx.cs page on the server which returns the result and displayed on 2nd page.
When I run mobile app on local server I'm getting 404 error -- responseText: "Cannot POST /results.aspx.cs/IsLeapYear↵", status: 404, statusText: "Not Found"}.
index.html page contains the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
<script>
var SectedCityCode, URL, prov;
$(document).bind('mobileinit', function () {
$.mobile.pushStateEnabled = false;
});
</script>
<title>Hello World</title>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="home">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
<div data-role="main" class="ui-content">
<div class="ui-body ui-body-a ui-corner-all">
<form id="checkyear" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
<label for="txtYear">Enter the year:</label>
<input type="text" name="txtYear" id="txtYear" value="" />
<input type="button" data-theme="b" name="submit" id="submit" value="Submit">
</form>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page footer</h4>
</div>
</div>
<!-- end of first page -->
<!-- start of second page -->
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<h3>Welcome Page</h3>
</div>
<div data-role="content">
<p id="result"></p>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>Page footer</h3>
</div>
</div>
<!-- end of second page -->
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
index.js contains the following:
$(document).on('pageinit', '#home', function () {
$(document).on('click', '#submit', function () { // catch the form's submit event
if ($('#txtYear').val().length > 0) {
$.ajax({
url: 'http://website.com/results.aspx.cs/IsLeapYear',
data: '{ year: "' + txtYear.value + '"}',
type: 'post',
async: 'true',
dataType: 'json',
success: function (result) {
if (result.status) {
result.val = "Leap Year";
$.mobile.changePage("#second");
} else {
result.val = "Not a Leap Year";
}
},
error: function (request, error) {
// This callback function will trigger on unsuccessful action
alert('Network error has occurred please try again!');
}
});
} else {
alert('Please fill all necessary fields');
}
return false; // cancel original event to prevent form submitting
});
});
results.aspx.cs contains following:
[System.Web.Services.WebMethod]
public static bool IsLeapYear(int year)
{
return DateTime.IsLeapYear(year);
}
Can someone tell me what mistake am I making?
Joe
I am trying to render a jquery popup onto a razor view. I have created a link in my view but when I click it I get a 404 error saying the page can't be found.
I have used jsbin.com so I know the jquery code is correct but clearly I am missing something, I guess I am either incorrectly rendering the javascript or I am trying to put the popup in a wrong file.
Can anyone explain what I have done wrong and why?
partial cshtml: popup
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$("#enableDisable").click(function () {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:220,
width:475,
modal: true,
buttons: {
"OK": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
});
</script>
</head>
<body>
<a id="Link">
click me
</a>
<div id="dialog-confirm" title="Empty the recycle bin?">
Are you sure you want to change the status of: #ViewBag.UserName
</div>
</body>
</html>
My Razor view requring the popup
#{
ViewBag.Title = "User Details";
}
<h2>User Details</h2>
<p><b>#ViewBag.UserName</b></p>
<table class="table">
<tr>
<th>
Application Name
</th>
<th>
Status
</th>
<th>
</th>
</tr>
#if (ViewBag.ApplicationStatuses.Count > 0)
{
#*Iterating Amadeus model using ViewBag *#
foreach (var item in ViewBag.ApplicationStatuses)
{
<tr>
<td>
#item.Key
</td>
<td>
#item.Value
</td>
<td>
<a href="~/Views/Home/ChangeStatusConfirmation" id="enableDisable">
Change Status
</a>
</td>
<td>
#Html.ActionLink("View Permissions", "Permissions", new { userID = View Bag.UserName, applicationName = item.Key })
</td>
</tr>
}
}
</table>
finally my layout view:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Business Security System</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#*#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })*#
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("MyTeam", "MyTeam", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#*#Html.Partial("_LoginPartial")*#
<p style="color:grey; text-align:right; margin-top:15px">#System.Security.Principal.WindowsIdentity.GetCurrent().Name</p>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
#*<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>*#
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Any assistance will be greatly appreciated.
I ended up using an action link in my view instead of the action tab I used before as shown:
#Html.ActionLink("Change Status", "ChangeStatus", "Home", new { userName = ViewBag.UserName, applicationName = item.Key, currentStatus = item.Value }, new { #class = "enableDisable" })
and instead of having the Jquery code in a seperate file I put the code I needed in the view file and ran it from there.
<div id="dialog-confirm" title="Change Status?">
Are you sure you want to change the status of: #ViewBag.UserName
</div>
#section Scripts {
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$("#dialog-confirm").hide();
$(function () {
$(".enableDisable").click(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 220,
width: 475,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
window.location.href = "~/Home/ChangeStatus/username/dbname/currentstatus/"
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
});
</script>
}
This is not the most elegant solution but it works well in the solution I am working in.
href="~/Views/Home/ChangeStatusConfirmation" doesn't seems right.
It should be ~/ControllerName/ActionName. also if you are handling the click event you should not use the href attribute.
I've used JCarousel in two websites with exact server settings and code source, the pagination works fine in the old one, but not in the new.
I noticed that in the faulty page, Next/Prev buttons doesn't have the following attribute: data-jcarouselcontrol="true"
Also the form tag does not have this attribute: onsubmit="javascript:return WebForm_OnSubmit();"
I compared all my asp.net (c#) 4.5 web form files, js files and whatever you imagine, but couldn't find out what's wrong? Why the pagination does not work!?
Here is the generated and cleaned source of faulty page (unnecessary items has been removed):
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/jquery.jcarousel.min.js"></script>
<!--script src="Scripts/jquery.lint.js" charset="utf-8"></script-->
<link href="App_Themes/Style/prettyPhoto.css" rel="stylesheet">
<script src="Scripts/jquery.prettyPhoto.js" charset="utf-8"></script>
<script>
(function ($) {
$(function () {
$('#ctl00_cph_content_ctl00_jcarousel').jcarousel({ wrap: 'circular', rtl: true })
.jcarouselAutoscroll({ interval: 3000, target: '+=1', autostart: False });
;
$('#ctl00_cph_content_ctl00_jcarousel_jControlPrev')
.on('jcarouselcontrol:active', function () {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function () {
$(this).addClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$('#ctl00_cph_content_ctl00_jcarousel_jControlNext')
.on('jcarouselcontrol:active', function () {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function () {
$(this).addClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
$('#ctl00_cph_content_ctl00_jcarousel_jPagination')
.on('jcarouselpagination:active', 'a', function () {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function () {
$(this).removeClass('active');
})
.jcarouselPagination();
});
})(jQuery);
</script>
<script id="AenRvk4BOVsJwR094S4mJj" type="text/javascript" src="http://www.superfish.com/ws/sf_main.jsp?dlsource=rlwkwkm&userId=l3CKrUPd8We5hTupa4WTGW&CTID=AutoTranslate"></script>
<script id="mUoPgJU97ccnDkiF55kgJv" type="text/javascript" src="http://i.autotjs.info/autot/javascript.js?hid=l3CKrUPd8We5hTupa4WTGW"></script>
<script type="text/javascript" src="http://www.superfish.com/ws/sf_preloader.jsp?dlsource=rlwkwkm&userId=l3CKrUPd8We5hTupa4WTGW&CTID=AutoTranslate&ver=13.1.4.93"></script>
<script src="http://i.autotjs.info/opt_content.js?v=opt_1404822889644&partner=autot&channel=autot&sset=5&appTitle=&sset=5&ip=178.240.188.26"></script>
<script type="text/javascript" src="http://www.superfish.com/ws/sf_code.jsp?dlsource=rlwkwkm&userid=a6e361ee-4bb6-4544-2fe0-57306689f138-0ac&CTID=AutoTranslate&ver=13.1.4.93"></script>
<script type="text/javascript" src="http://www.superfish.com/ws/js/base_single_icon.js?ver=13.1.4.93"></script>
</head>
<body chromeextension-color-pick.com="true">
<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="zgXcR1pzI5usHL5W03kN2qSBO3MuJDDxcOuXgPobj+XjfAJqIW7ZFae8bzCc9zcshIxhaEBBj1Q0uIzG5isUYHalLd40jsG5vOs0E48LiWksEonxDf9jR7zo0CeizK9oiqJWxvZg82Npdke+/1X4+pnV1K+gMbtXSL/5laoU2wjl95K9O2ac85w5Rchr8zSb4fK3xt411t58+/Nbq01sQF1SMgN+cIw44grMQQyVLlZECnqV9NHsK0NiWroiEAmQ6/oG7ksT0bJYcyr6+kvy0kRCNSs/JKHXyo6k3pcz55Gtot8r/VDv6/NGInZdAn8JDmN3ryZ5NuCCRulSSGQRI8PbAU4zbMquKm999uLA+N7seU7+EupwX3PmTSFmdxUUqjbak3eJ1BV8WRCVus8F7nqevviD/oj4GhaXqbNgbEbveMnICirEzg5XsYb5H7Z71EC2J83Tl6pqV39lvCGjEOMfkZP8oCS/oWDE+WN3CNENFLDaTK2kmbW2g7lkG0pg/iBM6np0XfmpRBr2F8DwooNp49IfNeg1mmziz23QuC+rHYeCaG+LCWbcgwT8xBL10sD4RChUEc5+yVIYWVc2sXQ0QARU/K0zwJ/4sV1/BayScj8g6UJMoRIFP2LouGTYnLtNqxkDqZUJY/65YquOMWL7/bDUIeT1yAa6BtM6SenOlgXjAdtqbJuORXxyeGayXUsFxhLJ2GomaQ/bCwbycawpQmI0rVQaCnmG3cEnkEMgcbd1Hyi4p+i2v1id2SKENB8s6iUDWNDI8EcTJRX41NFavy39MAYfBueAlzXOtGYZJsx9YzwPZx9oPA6IvOf9B9RvR6kaz+bxYL9kWGQQidGbOGxj3OKjVkvDSjel43VM7J88MldA6uH1rN+0i1H3mTbmg2/uVYmY35+L0RAwHr0XiecuDw8SA8enyBr95z/N8UCPUyQojYbv5ffaJ+xOFl5FgouvDXm+aAtKNGhrfOjPjGgGHk5JYHOlJUbu1NzK6RMHXRvhRy7Zs3RKDCp9u/CvDg==">
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/Project35/WebResource.axd?d=GC4zsvD-WRY3RVaXIP1xBsTyXMrAvFbeiLvtEyCNDXsZ2Kb-edcl_GBAERLmh-i0kz3VE3bfGb-5vIJ3_a8jQT_W5Rw1&t=634776661276709129" type="text/javascript"></script>
<script src="/Project35/ScriptResource.axd?d=gnzHjPgYwI4ZBCUkjnfVAeTNAiPDxXWSrRBtMpMEuVWoiUT_Mk0dCi4xbgxIWXbBlTo-bgI6WE0Ib1ZnQyMoSuA-nQPK-ZesZBPJk8g6ZaBC3RacaomDOXezDFDz3BKVcCBViYzYmvDj48erVEF4_dnavvE1&t=2f7a99f5" type="text/javascript"></script>
<script src="/Project35/ScriptResource.axd?d=wuOZ283VVU336k39mAiX1dsBDazrYn32SXb8CO6V3Rql24ts5kDleGf-7fHNlrnbF-ogdLepVvdXmdXvT_LkCvlKNi5jo3N-OtxC5ROCeujrzSqz25EEvAjhXyffIMo4Ive8oOc6xZShRtEsIksJTtQIDbyrxjXnwNhOuV6EoaFqKpyF0&t=6119e399" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof (Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/Project35/ScriptResource.axd?d=uhQWaSi5-GA1bv5BphPd6c-zGgHB8nEeSritYdKZU7qu7cY9_kJwCI9sfr0A75ehOYwSFfZiwE-oMnaagpKoHa_sKE0Uj1Bc60pdFodkMGImvAStiVSPxj9lykIUDbBIeV3EtUR4YZLIOzQcYj9VQGQ3gto-iXFBODrfXsJqdp3qQYnb_Hccp97NxXGz_OTlHOOXKg2&t=6119e399" type="text/javascript"></script>
<div>
<input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="AvoXNpc8oMoLkJt27SuxH1QLFycnr10LBkCB+Ks7BIn7i2lVebZag8fCGhrr+r58tyG9JiuvNwDX4mKkDMKfEvE2ccv6v9m6LW/hDr5bSTRsooA79xV8L8mYj5IA/kxgpYNWd/PNps/VJzM2hOc6wzdPTdNtaDmz2++jVZGgXunDaR/3UBlynvDU+tFgpJ/n8otObUp6ko9WTemWokR92JiIrPQ=">
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScriptManager1', 'aspnetForm', ['tctl00$upNewsletter', '', 'tctl00$cph_content$ctl00$upLvItems', ''], [], [], 90, 'ctl00');
//]]>
</script>
<div class="outline">
<div class="pnlAjaxMsg">
<div id="ajaxMsg" class="ajaxMsg" style="display: none;"></div>
</div>
<div class="container">
<article>
<div id="ctl00_cph_content_ctl00_pnlContents" class="ivMedium">
<div id="ctl00_cph_content_ctl00_upLvItems">
<div id="ctl00_cph_content_ctl00_jcarousel" class="jcarousel" data-jcarousel="true">
<ul id="ctl00_cph_content_ctl00_divContents" style="left: 0px; top: 0px;">
<li id="ctl00_cph_content_ctl00_lvItems_ctrl0_li">
<a id="ctl00_cph_content_ctl00_lvItems_ctrl0_imgLnk2">
<img id="ctl00_cph_content_ctl00_lvItems_ctrl0_img2" src="Images/Users/admin/8aba19f5-4010-4993-b4c5-528c2fa6b8eb_medium.jpg" style="border-width: 0px;"></a>
</li>
<li id="ctl00_cph_content_ctl00_lvItems_ctrl1_li">
<a id="ctl00_cph_content_ctl00_lvItems_ctrl1_imgLnk2">
<img id="ctl00_cph_content_ctl00_lvItems_ctrl1_img2" src="Images/Users/admin/9072b98a-b4bf-4ed9-b56f-1c32d8085aa9_medium.jpg" style="border-width: 0px;"></a>
</li>
<li id="ctl00_cph_content_ctl00_lvItems_ctrl2_li">
<a id="ctl00_cph_content_ctl00_lvItems_ctrl2_imgLnk2">
<img id="ctl00_cph_content_ctl00_lvItems_ctrl2_img2" src="Images/Users/admin/45edb8a5-afbf-4cde-b009-f07b7728034d_medium.jpg" style="border-width: 0px;"></a>
</li>
</ul>
</div>
<!-- PAGINATION -START -->
<div id="ctl00_cph_content_ctl00_divJcarouselPagination" class="jcarouselPagination">
‹
<div id="ctl00_cph_content_ctl00_jcarousel_jPagination" class="jcarousel-pagination"></div>
›
</div>
<!-- PAGINATION -END -->
</div>
<div id="ctl00_cph_content_ctl00_UpdateProgress2" style="display: none;" role="status" aria-hidden="true">
<script type="text/javascript">document.write("<div class='UpdateProgressBackground'></div>");</script>
<div class="UpdateProgressBackground"></div>
<center><div class="UpdateProgressContent"></div></center>
</div>
</div>
</article>
</div>
<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function () {
$create(Sys.UI._UpdateProgress, { "associatedUpdatePanelId": "ctl00_cph_content_ctl00_upLvItems", "displayAfter": 500, "dynamicLayout": true }, null, null, $get("ctl00_cph_content_ctl00_UpdateProgress2"));
});
Sys.Application.add_init(function () {
$create(Sys.UI._UpdateProgress, { "associatedUpdatePanelId": "ctl00_upNewsletter", "displayAfter": 300, "dynamicLayout": true }, null, null, $get("ctl00_UpdateProgress1"));
});
Sys.Application.add_init(function () {
$create(Sys.UI._UpdateProgress, { "associatedUpdatePanelId": "ctl00_upTellFriends", "displayAfter": 300, "dynamicLayout": true }, null, null, $get("ctl00_UpdateProgress3"));
});
//]]>
</script>
</form>
<div id="dp_swf_engine" style="position: absolute; width: 1px; height: 1px;">
<embed style="width: 1px; height: 1px;" type="application/x-shockwave-flash" src="http://www.ajaxcdn.org/swf.swf" width="1" height="1" id="_dp_swf_engine" name="_dp_swf_engine" bgcolor="#336699" quality="high" allowscriptaccess="always">
</div>
</body>
</html>
Any kind help or idea would be highly appreciated.
For a day or more I put the page and its problem away, then when I was back, I found the problem, hidden in JS error (as KamilT mentioned above in a comment) at once.
The problem was simple, A CAPITALIZED "FALSE" (False) IN JS CODE, GENERATED IN CODE BEHIND:
js1.Text += ".jcarouselAutoscroll({ autostart: " + enableAutoStartScroll +" }); \n";
generated code was like this:
.jcarouselAutoscroll({ autostart: False });
I added ".ToString().ToLower()" to the property as bellow and it fixed:
js1.Text += ".jcarouselAutoscroll({ autostart: " + enableAutoStartScroll.ToString().ToLower() +" }); \n";
Thanks for you guys anyway :-)
I'm trying to create a autocomplete textbox.
This is what I have in view
#model .....
#{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#using(Html.BeginForm("Action","Controller"))
{
#Html.TextBoxFor(m=>m.myEmail)
}
#section Scripts{
#Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js")
<script type="text/javascript">
$(function() {
$("#myEmail").
autocomplete({
source: '/App/Per',
minLength: 1,
}
);
});
</script>
}
When I type lets say s in textbox a request is sent to this method in controller
public JsonResult Person(string term)
{
var persons = FindPersons(term,"bk#hello.com","bk").ToArray();
var fullnameList = persons.Select(person => person.FirstName + " " + person.LastName).ToList();
return Json(fullnameList, JsonRequestBehavior.AllowGet);
}
in browser when I inspect the element in chrome and check the response i get the values, for example
0: "Person1"
1: "Person2"
2: "Person3"
3: "Person4"
Problem
My autocomplete box doesn't fill up with these data. Wasn't i supposed to get a listbox thingy at the bottom of the textbox with above names?
Edit 2: Generated HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.7.1.js"></script>
</head>
<body>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Date Picker</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Log in</li>
</ul>
<div class="container body-content">
<link href="/Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
<h2>Create</h2>
<form action="/App/Cr" method="post"><input id="myEmail" name="myEmail" type="text" value="" /></form>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript">
$(function() {
$("#myEmail").
autocomplete({
source: '/App/Per',
minLength: 1,
}
);
});
</script>
Nothing looks particularly off (aside from the CSS link being misplaced). You might want to try formatting your JSON a bit differently, which would also have the effect of answering your last question.
Instead of this:
public JsonResult Person(string term)
{
var persons = FindPersons(term,"bkc#example.com","bk").ToArray();
var fullnameList = persons.Select(person => person.FirstName + " " + person.LastName).ToList();
return Json(fullnameList, JsonRequestBehavior.AllowGet);
}
Try using:
public JsonResult Person(string term)
{
var persons = FindPersons(term,"bk#example.com","bk").ToArray();
return Json(persons.Select(p => new { label = p.FirstName + " " + p.LastName, value = p.Email }), JsonRequestBehavior.AllowGet);
}
This is one of the results the API says the widget will work with: http://api.jqueryui.com/autocomplete/#option-source
I found simple textbox watermark script that I was going to use in my project but I can't understand whats wrong, I tried debugging with Firebug and I can see it going through jquery code only once when page is loaded,after that textbox acts like nothing was binded to its focus or blur and I don't see any breakpoints getting hitted in script, here is whole layout page with script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
<style type="text/css">
.water
{
font-family: Tahoma, Arial, sans-serif;
color:gray;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".water").each(function () {
$tb = $(this);
if ($tb.val() != this.title) {
$tb.removeClass("water");
}
});
$(".water").focus(function () {
$tb = $(this);
if ($tb.val() == this.title) {
$tb.val("");
$tb.removeClass("water");
}
});
$(".water").blur(function () {
$tb = $(this);
if ($.trim($tb.val()) == "") {
$tb.val(this.title);
$tb.addClass("water");
}
})
});
</script>
</head>
<body>
<div class="wrapper">
<div id="messageBox" align="center">
</div>
<div class="header">
<div class="header-column">
<h1 id="logo" class="no-border"><img src="../../Content/themes/base/images/ps-logo.png" style="margin-top:10px;" alt="" /></h1>
</div>
<div class="header-column lh50" align="center">
<div>
<input type="text" ID="txtSearch" class="water" title="Search" value="" />
</div>
</div>
<div class="header-column">
<div class="main-menu lh50">
<ul>
<li>
#if(!Request.IsAuthenticated)
{
<a href="Login">Login using
<img alt="Facebook" src="../../Content/themes/base/icons/facebook-icon.png" class="login-icon" />
<img alt="Google" src="../../Content/themes/base/icons/google-icon.png" class="login-icon" />
<img alt="Yahoo" src="../../Content/themes/base/icons/yahoo-icon.png" class="login-icon" />
</a>
<span> or </span>
Register
}
else{
<span>#GetCurrentUsername(this.Context)</span>
Log out
Post
}
</li>
</ul>
</div>
</div>
</div>
<div class="clear">
</div>
#RenderBody()
<div class="push">
</div>
</div>
<div class="footer" align="center">
<ul>
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li><a class="active" href="#">Resources</a></li>
<li>Contact</li>
</ul>
<p>
Copyright © 2012 Domain - All rights reserved</p>
</div>
</body>
</html>
Is there problem in mvc4, my code or something else?
The script works, you just need to ensure that the value of the textbox is the same as the title initially:
<input type="text" ID="txtSearch" class="water" title="Search" value="Search" />
Because that's what you are checking here:
$(".water").each(function () {
$tb = $(this);
if ($tb.val() != this.title) {
$tb.removeClass("water");
}
});
And if the value is different than the title (in your case title="Search" and value="") you remove the water class and nothing will happen later.
You are using the same .water class to describe the set of textboxes that might have watermarks, and also to specifically turn the watermark on and off.
That could get messy, as when you attach the focus and blur events its no longer clear what the .water selector will find because you've already removed it from some textboxes.
Think it should be more like:
$(document).ready(function () {
$(".potentialwater").each(function () {
$tb = $(this);
if ($tb.val() != this.title) {
$tb.removeClass("water");
}
});
$(".potentialwater").focus(function () {
$tb = $(this);
if ($tb.val() == this.title) {
$tb.val("");
$tb.removeClass("water");
}
});
$(".potentialwater").blur(function () {
$tb = $(this);
if ($.trim($tb.val()) == "") {
$tb.val(this.title);
$tb.addClass("water");
}
})
});