ASP.NET LinkButton OnClick Event Is Not Working On Home Page - asp.net-3.5

I have a user control that handles logging a user in to my site. This user control is placed in the upper right corner of all pages as a Quick Login Box. The problem I'm having is that on my production server, the LinkButton click events I have provided for logging in and reset are not firing the OnClick event after a postback. Its like it just forgets to do it.
Normally this wouldn't be such an issue to debug, except that it does not happen when running in debug on localhost (nor when running in release on localhost). It only seems to be occurring on my production server and only on my home page. If I try to login using the user control from any other page it works fine and the OnClick event runs as it normally should. I'm at my wits end here as I just don't know of anymore ways to debug this thing and every suggestion I've encountered on Google does not help. Below is the markup I'm using in my user control, any suggestions or help would be greatly appreciated. The LinkButton's "Login" and "Reset" do not work at all.
<asp:Panel ID="AnonPanel" runat="server" DefaultButton="Login">
<div id="welcome">
<span class="welcome">Welcome </span><span class="guest1">Guest!</span> <span>Login </span>|<span > Signup</span>
</div>
<div id="input_boxarea">
<div id="user_id">
<asp:TextBox ID="UserName" runat="server" CssClass="input_box1"></asp:TextBox>
</div>
<div id="password">
<asp:TextBox ID="Password" runat="server" TextMode="Password" CssClass="input_box1" size="16"></asp:TextBox>
</div>
</div>
<div id="remember">
<div id="reme">
<div id="reme1">
<asp:CheckBox ID="RememberMe" runat="server" />
</div>
<div id="reme2">Remember me</div>
</div>
<div id="loginbutton1"><span class="login"><asp:LinkButton ID="Login"
runat="server" CommandName="Login" onclick="Login_Click">Login</asp:LinkButton></span></div>
<div id="resetbutton1"><span class="login"><asp:LinkButton ID="Reset"
runat="server" onclick="Reset_Click">Reset</asp:LinkButton></span></div>
</div>
<asp:Panel ID="AdminPanel" runat="server" Visible="false">
<div id="welcome_loggedin">
<span class="welcome">Welcome </span><span class="guest1"><asp:LoginName ID="LoginName1" runat="server" />!</span><br />
<asp:HyperLink ID="MyAccountLink" CssClass="memberLink" runat="server" NavigateUrl="/my-account.html">My Account</asp:HyperLink><br />
<asp:HyperLink ID="MyLeaguesLink" CssClass="memberLink" runat="server" NavigateUrl="/my-leagues.html">My Leagues</asp:HyperLink><br />
<asp:HyperLink ID="AdminLink" CssClass="memberLink" runat="server" NavigateUrl="/admin/">Admin Area</asp:HyperLink><br />
<asp:HyperLink ID="IssueTrackerLink" CssClass="memberLink" runat="server" Target="_blank">Issue Tracker</asp:HyperLink><br />
<asp:HyperLink ID="Logout" CssClass="memberLink" runat="server" NavigateUrl="/logout.html">Logout</asp:HyperLink>
</div>
<asp:Panel ID="UserPanel" runat="server" Visible="false">
<div id="welcome_loggedin">
<span class="welcome">Welcome </span><span class="guest1"><asp:LoginName ID="LoginName2" runat="server" />!</span><br />
<asp:HyperLink ID="HyperLink1" CssClass="memberLink" runat="server" NavigateUrl="/my-account.html">My Account</asp:HyperLink><br />
<asp:HyperLink ID="HyperLink2" CssClass="memberLink" runat="server" NavigateUrl="/my-leagues.html">My Leagues</asp:HyperLink><br />
<asp:HyperLink ID="HyperLink3" CssClass="memberLink" runat="server" NavigateUrl="/logout.html">Logout</asp:HyperLink>
</div></asp:Panel>

try changing "causes validation" property to false and see if that makes a difference.

Could you temporarily perform some logging from those event handlers?
You could write to a .txt file on the web server. Or to the event log.
As the first line in the click event, write to the log. Then, perform the desired action (login, reset) in a try-catch block. Both the try and the catch write to the log again. If there's some weird exception happening, you can capture the details in your catch logging.
If you want to leave this temporary code in place, but don't want to perform logging unnecessarily, you could add a toggle in <appSettings> in your web.config file, so that you can turn the logging on and off.

Related

Kendo Scrollview datasource binding with listview mvvm

Due to job constraints, I have to do this in MVVM. I'm trying to create a scrollview that has a listview inside it and sync up the two together when I click the next scrollview arrow. It will currently show the scrollview with the initial load of the listview, but clicking the next arrow does nothing. I even tried to attach to the events but it triggers nothing. Any help is great thanks.
<div id="scrollView" data-role="scrollview" data-content-height="100%" style="width: 500px; height: 100px; max-width: 100%" data-layout="flex" data-enable-pager="false" data-binding="datasource: responses">
<div data-role="listview" data-layout="flex" data-template="responseTemplate" data-bind="source: responses"></div>
</div>
I've tried multiple ways to do the datasource binding on the scrollview. The way it currently is, I get an error that says, "Scrollview widget doesn't support datasource binding".
Here is my template:
<script id="responseTemplate" type="text/html">
<div class="alternatingColor" style="text-align: center;">
<div style="width: 3em;">
<div>
<input type="radio" value="1" data-bind="attr: {name: inputName}, checked: AuditStaticQuestionAnswerId, enabled: canChangeResponse" />
</div>
<div>
<input type="radio" value="2" data-bind="attr: {name: inputName}, checked: AuditStaticQuestionAnswerId, enabled: canChangeResponse" />
</div>
<div data-bind="visible: IncludeNAChecked">
<input type="radio" value="3" data-bind="attr: {name: inputName}, checked: AuditStaticQuestionAnswerId, enabled: canChangeResponse" />
</div>
</div>
</div>
Before anyone suggests it, the script tag with type text/html works fine for a template. Also it's a requirement to use it. So, no x-kendo-template.
Here is a jsfiddle of the code https://jsfiddle.net/0jp6m38y/1/
Note: some of the js is a little different, but close enough to show you how I see it.

Bootstrap 5 img-fluid working on firefox but not chrome

So i was making a project tribute page and as i started to write the css i was first checking it with firefox device toolbar, but when i opened the same code on chrome the image that i had given a img-fluid class was taking up its original full width (1065px)
The div #content is inside a div with .container-fluid
this is how it looks on chrome
this is how it looks on firefox
<div id="content" class="container">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.webp" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
edit: okay so i started to add elements to a new file to see when the error would start to occur and it happened when I pasted the section that follows #Home which is #Bio.
I will edit the code so you can see the following section because i still dont know why it's causing the issue
/*I'll take away the css because none of it proved to be an issue*/
<div class="container-fluid">
<!-- there's a nav div here but it doesnt cause issues-->
<div class="container-fluid" id="content">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.png" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
<!--the #Bio has three .achivement elements but even if its just one and the figure element the issue occurs-->
<div id="Bio" class="container">
<div id="summary">
<h1>Her life</h1>
<div class="achivement">
<ul>
<li>The iconic writer got her start when she won Vogue's "Prix de Paris" contest and got a job opportunity in the magazine's
New York office as price for one month. Once there, she got a permanent position after writing a seminal article on self-respect on the fly after the reporter that was supposed to make the assignment failed to deliver a complete article. She worked at the famed magazine for years after that.</li>
</ul>
<blockquote cite="https://www.nytimes.com/1976/12/05/archives/why-i-write-why-i-write.html">
<p>
" Had I been blessed with even limited access to my own mind there would have been no reason to write. I write entirely to find out what I'm thinking, what I'm looking at, whot I see and what it means."
</p><cite>-- Joan Didion on her "Why I Write" article for the New York Times</cite>
</blockquote>
</div>
<figure>
<img src="images/tradlands-flickr.jpg" alt="joan didion in later years">
<figcaption>Didion by Irving Penn.</figcaption>
</figure>
</div>
</div>
</div>
</div>
Try adding the rule in your css file:
<style>
figure .img-fluid {
width: 100%;
}
</style>
I'm pretty sure it will work for you.
So after taking off and adding elements one-by-one I realized that an image on the section that followed the #Home div didn't have .img-fluid
I don't know why that wasn't an issue on firefox but I've tested the code on both browsers and it's working properly.

Make a component linkable or not based on the dialog

I have a component and want to give authors the option in the dialog to add a link path. If this link path is filled in, then I want the component wrapper to be an <a> tag. If it's not filled in, I want it to remain a <div>
<div class="section" data-sly-test="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Is there a cleaner way to do this than creating two separate build outs of the whole component with a data-sly-test switch? I've struggled on a lot of examples like this where the wrapping tag/div is changed by the dialog. Looking for something similar to how data-sly-element behaves on the <h2> within my code here.
There are multiple ways to achieve what you are trying to do.
Using data-sly-element and data-sly-attribute
data-sly-attribute doesn't add the attribute to the tag if the value of the attribute is empty/null. Hence, it can be used as shown below to replace the anchor tag with a div if the path is unavailable.
<a class="section" data-sly-attribute.href="${properties.path}" data-sly-element="${properties.path ? 'a' : 'div'}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Using data-sly-unwrap
Unwrap only removes the containing tag and doesn't remove all the inner tags. Hence, this can be used as shown below.
<div class="section" data-sly-unwrap="${properties.path}">
<a href="${properties.path}" class="section" data-sly-unwrap="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
</div>
Using data-sly-template and data-sly-call
This is similar to what you have initially written, but instead of duplicating the entire inner HTML, it can be moved to a template and called twice.
<div class="section" data-sly-test="${!properties.path}">
<sly data-sly-call="${tpl}"></sly>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<sly data-sly-call="${tpl}"></sly>
</a>
<!--/* The template */-->
<template data-sly-template.tpl="">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</template>
For more information on HTL Block statements, refer this official doc.

How to add button handler in Scala Play framework?

I'm using scala play framework + scala template engine for front end. How can I add button handler? I need to call some function when clicking on it.
<body>
<p>Database interface<br />
<textarea style="margin: 0px; height: 193px; width: 533px;" cols="40" name="comment" rows="3"></textarea>
</p>
<p><input type="submit" value="Select" /> <input type="submit" value="Insert" /> <input type="submit" value="Update" /></p>
</body>
There is no special button handlers. You can write it in Javascript or plain HTML. The only trick thing is to get a link the server function. You can get the link automatically by reverse routing.
For example you have the route
GET /count controllers.CountController.count
Then you can get the link by calling controllers.routes.CountController.count in your code.
In the template engine, link:
Count
Plain HTML button:
<form action="#controllers.routes.CountController.count">
<input type="submit" value="HTML only" />
</form>
Button with Javascript:
<input type="submit" onclick="location.href='#controllers.routes.CountController.count';" value="Javascript" />
If you need some special thing on the client side to process then you need to write your own code in Javascript.
There's nothing in Scala/Play/Twirl that would handle button clicks, the simplest approach would be to use jQuery .click()

My HTML5 form displays inline and without line breaks

I'm doing this HTML5 form, but when I check it on the browser (running it locally) it displays the label next to the input space next to le label and so.
heres the code:
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" placeholder="Ingresa tu Nombre" required />
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Ingresa tu e-mail " required />
<label for="message">Mensage:</label>
<textarea id="message" placeholder="Ingresa tu Mensaje" required></textarea>
<input type="submit" value="Envia tu mensage" >
</form>
should I use <br />? I already checked on other web pages and they dont use it
thank you.
As Kolink pointed out, the form displays inline as all the elements inside it are inline.
You shouldn't be using <br/> or <p> as they are not intended for that purpose (You shouldn't be using a toothbrush to clean a toilet). Better use a <ul> with <li> for each field. This makes sense as the form is nothing but a list of fields.
The mark-up would be like this:
<form>
<ul>
<li>
<label for="something">some label</label>
<input id="something" />
</li>
</ul>
</form>
Alternatively, you can go ahead and use <div> as well (but not <p>).
Well, <label> is inline, <input> is inline, <textarea> is inline...
If all your elements are inline, of course your overall form will be.
Try using the <br /> tag, or maybe <p>...</p>.
Kolink is correct. Another way to address this is to add
display: block;
to all input and label elements using CSS.