Masonry Images don't like the <div>

Masonry Images don't like the <div> - c#

So i am trying to create a gallery of photographs using Masonry. They may all be different sizes so i went with using % sizing instead to sort of let things pan out a bit cleaner. Now i wanted to add on info on top of the photo and also make things filterable.
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/Isotope/isotope.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/masonry.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/imagesloaded.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/jquery.min.js"></script>
<script>
$('.Gallery').masonry();
</script>
<style>
img {
max-width: 33%;
}
</style>
</head>
<body>
<div>
<p></p>
<div class="Gallery">
#foreach (var pic in Model)
{
<div class="photo-container">
<a href='#Url.Action("Details", "PhotoManagement", new { id =
pic.Id })'><img src="#pic.FilePath" typeof="image"
oncontextmenu="return false" /></a>
</div>
<script>
var $Gallery = $('.Gallery').isotope({
// options...
});
$Gallery.imagesLoaded().progress(function () {
$Gallery.isotope('layout'); });
</script>
}
</div>
</div>
</body>
Photo of the result
Any tips you guys have I would appreciate it! Also any criticisms or anything you would suggest i do to improve would also be great. I'm practicing around with c# and just trying to learn more about it all but stuff like this is frustrating to understand where i went wrong.
Side Note: i have also tried using append to append all the images and it didn't work either :(

HEAD
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/Isotope/jquery.min.js"></script>
<script src="~/Scripts/Isotope/isotope.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/masonry.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/imagesloaded.pkgd.min.js"></script>
<style>
.photo-container{
width: 320px;
margin: 5px;
float: left;
}
.photo-container img {
width: 100%;
display: block;
}
</style>
BODY
`
<div>
<p></p>
<div class="Gallery">
#foreach (var pic in Model)
{
<div class="photo-container">
<a href='#Url.Action("Details", "PhotoManagement", new { id =
pic.Id })'>
<img src="#pic.FilePath" typeof="image"
oncontextmenu="return false" />
</a>
</div>
}
<script>
$(document).ready(function () {
var $grid = $('.Gallery').isotope({
itemSelector: ".photo-container",
masonry: {
columnWidth: 33
}
});
$grid.imagesLoaded().progress(function () {
$grid.isotope('layout');
})
})
</script>
</div>
</div>`
A buddy went and helped me and we got it working with the following solution. If this helps anyone else down the line

Related

ASP.Net Core, My google chart won't display

Allright, so the issue I'm having is that my google chart wont display.I am fairly new to working with ASP.NET core applications, and I'm doing a school project.
This is an example that works. I am trying to display data from a list that get it's data from a database, but I don't seem to get it to work.
This hardcoded data works fine:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Data'],
['2004', 1000],
['2005', 1170],
['2006', 660],
['2007', 1030]
]);
var options = {
title: 'Temperature',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body class="container-fluid lead">
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
But when i try to replace the hardcoded data with a foreach-loop it won't display. The page is just blank. This is my drawChart() with a foreach-loop.
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Data'],
#foreach (var item in Model.measurementDataList)
{
<text>['#item.TimeStamp', #item.MeasuredValue],</text>
}
]);
I have displayed some data from the same database in a table. So the method I'm used to fill the list works. This is my method to getting the data from the database:
public List<MeasurementData> GetMeasurementData(string connectionString)
{
List<MeasurementData> measurementDataList = new List<MeasurementData>();
SqlConnection con = new SqlConnection(connectionString);
string sqlQuery = "SELECT Timestamp, MeasuredValue FROM MEASUREDATA";
SqlCommand cmd = new SqlCommand(sqlQuery, con);
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
MeasurementData measureParameter = new MeasurementData();
measureParameter.TimeStamp = dr["Timestamp"].ToString();
measureParameter.MeasuredValue = Convert.ToDouble(dr["MeasuredValue"]);
measurementDataList.Add(measureParameter);
}
return measurementDataList;
}
And here's the OnGet().
public void OnGet()
{
SensorConfig sensorConfig = new SensorConfig();
connectionString = _configuration.GetConnectionString("ConnectionString");
measurementDataList = sensorConfig.GetMeasurementData(connectionString);
}
view data source feature:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MonitorLog - MonitoringApplication</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" href="/">MonitoringApplication</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/MonitorLog">Monitor log</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/Privacy">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/SensorInformation">About Sensors</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Data'],
]);
var options = {
title: 'Temperature',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body class="container-fluid lead">
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - MonitoringApplication - Privacy
</div>
</footer>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/site.js?v=dLGP40S79Xnx6GqUthRF6NWvjvhQ1nOvdVSwaNcgG18"></script>
</body>
</html>

Here comes the mistake:
#foreach (var item in Model.measurementDataList)
{
<text>['#item.TimeStamp', #item.MeasuredValue],</text>
}
Because if you render C# in cshtml directly, ASP.NET Core will HTML encode your script.
To make your app run, consider changing the script to
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Data'],
#foreach (var item in Model.measurementDataList)
{
Html.Raw($"['{item.TimeStamp}', {item.MeasuredValue}],")
}
]);
While this may solve your issue, rendering your data with C# to HTML is not a good practice.
I strongly suggest you writing an API that returns your data and you can write pure javascript to get the data.
Like this:
$.get('/api/mychartdata', function(data) {
google.visualization.arrayToDataTable(data);
})
And the data is rendered as JSON from your ASP.NET Core Web API.
If you are not familiar with Web API, please read document here:
https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-3.1&tabs=visual-studio

Why wont my bootstrap DateTimePicker work?

I have used this in another MVC project of mine and the code works perfect when I run that program. I'm trying to use it in my new MVC application now and I cant get it to work with the same code. I've added all of the references to jQuery and bootstrap.
The text box shows up fine, along with the glyphicon for the datetimepicker and when I hover over it the mouse changes into the hand symbol. When I click the button nothing happens at that point. Here is what my code looks like for the datetimepicker:
<div class="form-group">
#Html.LabelFor(m => m.InterviewDate, new { #class = "col-sm-2 control-label" })
<div class="col-sm-3">
<div class='input-group date' id='datetimepicker1'>
#Html.TextBoxFor(m => m.InterviewDate, new { #class = "form-control" })
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<script type="text/javascript">
$(function () {
//$('.datepicker').datepicker({
// format: 'mm-dd-yyyy'
//});
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
</div>
My _Layout page references these at the top:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title Job Manager</title>
<link rel="stylesheet" href="~/Content/bootstrap.min.css">
<link rel="stylesheet" href="~/Content/bootstrap-theme.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="~/Content/jquery-ui.min.css">
<link rel="stylesheet" href="~/Content/jquery-ui.theme.min.css">
<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.min.css">
<style type="text/css">
body {
margin-top: 60px;
background: #d9edf7;
}
</style>
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="~/Scripts/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
</head>
And then references these at the bottom:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", false)
If I'm forgetting anything or you need more information please let me know. I appreciate any and all help!

how to get a confirmation popup to display using jquery and mvc 5?

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.

Why JCarousel does not add [data-jcarouselcontrol="true"] attribute to Next/Prev buttons?

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 :-)

Jquery bind events: blur, focus not working in mvc4

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");
}
})
});

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Masonry Images don't like the <div> - c#

Related

ASP.Net Core, My google chart won't display

Why wont my bootstrap DateTimePicker work?

how to get a confirmation popup to display using jquery and mvc 5?

Why JCarousel does not add [data-jcarouselcontrol="true"] attribute to Next/Prev buttons?

Jquery bind events: blur, focus not working in mvc4

Categories

Resources