I have a long list of links in my website's menu. I show the first three links per default, and I have a "Show/hide" button for the rest of the links.
I would like to be able to change the default value (show or hide) according to the visitor's preference.
--> So the default value is "hide" to start with. If the visitor clicks "show" and then clicks a link, I want the next page to be "show" per default. If he then clicks hide, default is "hide".
Below is my menu. 1-2-3 are always shown, 4-5-6 are shown or hidden.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<div class="liste-cachee">
<div class="quotecontent">
<div style="display: none;">
<li>4</li>
<li>5</li>
<li>6</li>
</div>
</div>
</div>
<input type="button" value="Plus / Moins" onclick="if (
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != 'block') {
sendMenuDisplay('block');
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'block';
} else {
sendMenuDisplay('none');
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; }" />
</ul>
My question is: How can I save what the visitor choses (show or hide), put it in a $_POST variable and use it as the default value on the next page?
Thanks for your time and help
You could POST or PUT the value and put in a cookie or a session attribute for use in subsequent pages. You could also POST or PUT the value using ajax and put the value in a cookie or session attribute for later use. You could also store the value in a database and use across user-sessions.
Related
I have to show a link(Products) in the header after user login to the application. It fail to display the link at first but if I refresh the page the link appears and it logout from the application. The problem is, initially the session variable(LoginID) were I'm using to check in the condition is null, after I refresh the page the appropriate value sets in the same. The three separate page are link in the header page, the form in login page and the codebehind in the Login.asp page. Please suggest me what I'm missing here.
header.asp
Dim qcVisible, LoginID
LoginID=Session("LoginID")
if Session("LoginID")="invaliduser" or Session("LoginID")="" Then
qcVisible = "none"
else
qcVisible = "block"
end if
<div class="menu">
<ul class="clearfix">
<li class="active">Home</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
Mylogin.asp(Form)
<!--#include file="header.asp"-->
Session("LoginID")="validuser"
<form name="MyForm" method="post" action="Login.asp" id="loginform">
<fieldset>
<div class="field">
<input type="text" name="LoginID" placeholder="User ID" id="LoginID" />
</div>
<div class="field">
<input type="password" name="PWD" placeholder="Password" id="PWD" />
</div>
<div class="field">
<button class="field_bt" type="submit" form="loginform" name="submit1">Sign In</button>
</div>
</fieldset>
</form>
Login.asp
Login(Request.Form("LoginID"),Request.Form("PWD"))
Function Login(LoginID,Password)
Dim objRS,strSQL
Set objRS=Server.CreateObject ("ADODB.Recordset")
`strSQL = Query
objRS.Open strSQL,objconn
If not objRs.Eof and not objRS.Bof then
dim muser
muser = Mid(objRS("user_password"),1,3)
dim mpass
mpass = Mid(Password,1,3)
If trim(muser)= trim(mpass) Then
Login=True
Session("LoginID")=LoginID
Session("Password")=Password
Else
Login=False
End If
End If
objRS.Close
Exit Function
End Function
<div class="maincontent">
<object id="obj" data="Mylogin.asp" type="text/html"></object>
</div>
Before Login
After login and refresh the page, its logout and the link shows.
Any help would be appreciated. Thanks.
Edited
Based on the member suggestion I tried the following
'If Request.Form.Count > 0 Then(Another Way)
If Request.ServerVariables("REQUEST_METHOD") = "POST" Then
if Session("LoginID")="invaliduser" or Session("LoginID")="" Then
qcVisible = "none"
else
qcVisible = "block"
end if
End If
There are a couple things wrong with your approach:
Session("LoginID") should either have no value (logged out) or a value (logged in).
You are tasking the clientside of hiding the link which can be defeated by looking in the browser's DevTools or source code.
To solve these issues:
#1: Only set Session("LoginID") when a log in is successful.
#2: Your Product-check should look like this to only generate the HTML if the user is logged in (remeber that the session should ONLY have a value if logged in):
<% If Session("LoginID") <> "" Then %><li>Products</li><% End If %>
in your code you set the visible to none if the loginID is empty string when you first load the page what do you think it is??:
if Session("LoginID")="invaliduser" or Session("LoginID")="" Then
qcVisible = "none"
Then later on you go:
<li>Products</li>
it is equilvalent to going:
<li>Products</li>
Before you actually refresh the page or login....
Instead you might want to try:
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
//Do your styles in here
}else{
qcVisible = "block";
}
Usually when you load a webpage a GET request is sent, and if you refresh it or click submit the request you specified on your form will be sent in your case POST, so when the user did not enter anything you want to display product hence it will be in the else statement..... Otherwise you want to check if it is valid or not... :)
I have a dropdown which has select2 class. On clicking the arrow in drop down, I get below code activated in DOM which has the values Reason1 and Reason2 in the dropdown. I want to iterate on the available values and select the desired option.
Using each function, I am able to itearte on the array and get the available values, but I am unable to perform cy.click() on the same to get the value selected. I am not getting any error and code is running fine but the click in not happening (neither on div , li nor span tag)
`<ul class="select2-results">
<li class="select2-results-dept-0 select2-result select2-result-selectable">
<div class="select2-result-label">
<span class="select2-match"></span>
Reason1
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable">
<div class="select2-result-label">
<span class="select2-match"></span>
Reason2
</div>
</li>
</ul>`
Given below is my code
cy.get('#select2-drop > .select2-results').find('li').each(($el,index,$list) => {
let option = $el.find('div').text()
if(option=='Reason2')
{
$el.find('div').click()
}
})
If I add $el.find('div').css('background-color','yellow') in the if condition, elements background color is getting changed to yellow but click is not happening.
Can anyone please help on this.
Thanks!
you can use these command if you want to select the second one
cy.get('#select2-drop > .select2-results')
.type("{downarrow}")
.type("{downarrow}")
.type("{enter}")
#model IEnumerable<FacetValue>
<ul>
#foreach (var association in Model)
{
<li>
**#Html.CheckBox("association",association.IsSelected) #Html.Label("association", association.Text)**
#if (association.IsSelected == true)
{
<input type="checkbox" id="association" class="left" value="#association.Text" checked="checked"/>
}
else
{
<input type="checkbox" id="association" class="left" value="#association.Text"/>
}
<label>#association.Text</label>
</li>
}
</ul>
I am using the code that starts with #if vs the #htmlCheckBox.
1. The layout is messed up
2. It doesn't display is messed up and displays check box in one place and text in another place.
3. a hidden value is generated for every check box.
Now the question is how can I display the the contents how I want without the #if else logic.
There is no need to reinvent the wheel.
Here is a very good post to look:
Asp.net MVC Multiple check-boxes in an array
If it still does not cover your scenario then look at this pre-existing discussions:
Discussion 1, Discussion 2
To bind complex objects, we need to provide an index for each item to insure correct postback. That's why we need to change IEnumerable<> to IList<> (or you can created another variable and populated it with Model.ToList()). Than we need to change foreach() to for(), so Html.CheckBoxFor can correctly create IDs and NAMEs that will insure correct postback.
#model IList<FacetValue>
<ul>
#for (int i = 0; i < Model.Count(); i++)
{
<li>
#Html.LabelFor(model => model.Model[i].IsSelected, Model[i].Text)
#Html.CheckBoxFor(model => model.Model[i].IsSelected)
</li>
}
</ul>
you can customize your extension method of Check box with property additional Visible, and in the creating of checkbox , you pass the value of visible
Hi there I have an error when I submit the following form:
<div id="tabs">
<ul>
<li>Project Details</li>
<li>Project Attachments</li>
<li><a href="#Url.Action("Members", "ProjectNetwork", new { IsTab = true })">Project
Network</a></li>
<li>Bulleting Board</li>
<li>Bids Received</li>
</ul>
</div>
<div id="LowerButton">
#Html.Hidden("MainStatus", #Model.Status)
#using (#Html.BeginForm("Dashboard", "Dashboard"))
{
<button type="button" id="MakeComment">
Make a Comment
</button>
<input type="submit" id="GoDashBoard" value="Return to Project List" />
}
</div>
When I press the button "GoDashBoard", The method "Dashboard" in the controller "Dashboard" is not reached. Instead the following error appears:
It tells me that a model property is beign sent to the server. However, there are no model properties inside the dashboard form.. unless I'm sending many forms at the same time. But I dont think thats possible right? Do you guys have any idea of why is trying to set a model property when I'm not actually sending any?
Update:
this is the input of the dashboard action:
public ActionResult Dashboard(int page = 1)
{
var user = (User)Session["User"];
if (user != null)
{...
}}
the input is a default integer. However, I saw the trace of the calls and its submiting another form which is not related to the one im using:
That form is inside of one of the ajax tabs. I dont understand how one form submits another form and they are not nested. Anyone knows a good workaround? because im thinking of receiving both forms in both actions and make some validations.
I solved it by removing the form "Dashboard" and instead adding an invisible link. The button would reference the invisible link:
#*#using (#Html.BeginForm("Dashboard", "Dashboard"))
{ *#
<button type="button" id="MakeComment">
Make a Comment
</button>
<button name="button" type="button" onclick="document.location.href=$('#GoDashBoard').attr('href')">Return to Project List</button>
<a id="GoDashBoard" href="#Url.Action("Dashboard", "Dashboard")" style="display:none;"></a>
#*<input type="submit" id="GoDashBoard" value="Return to Project List" />*#
#* }*#
SHORT DESCRIPTION:
For example we have two pages. The second page contain block which filled via AJAX. This is a big block and contain tabs(5 pieces) and each tab have handler(click event). On the first page we have a link which open the second page. I want to do the following: when user clicks on link on the first page then open second page and execute handler attached to a specific tab.
How can I do this?
MORE DETAILS:
I have page which contain schedules of event:
<div id="content">
<div class="section">
<div id="listInfoBlock" class="list_infoBlock">
</div>
<!-- .list_infoBlock-->
</div>
<!-- .section-->
</div>
The listInfoBlock filled via AJAX:
function loadEventList(id, tab) {
$('#listInfoBlock').load('/BaseEvent/EventList?period=' + id+"&tab="+tab, function () {
//the some actions
});
}
When listInfoBlock is filled it contain info about event and schedules:
<table class="time_table" cellspacing="0">
<tbody>
<tr>
<td>
PlaceName
</td>
<td class="time_list">
<ul>
<li>
19:00
</li>
</ul>
</td>
</tr>
</tbody>
</table>
When a user click on a time(a tag) then loads a second page. This is the second page contain details info about event and block called Publication. This is a big block which contain tabs(5) load via AJAX. When user click on tab called "Schedule" then via AJAX loads schedule of event. The user selects time and the hall plan is shown to him. The user has to do a lot of unnecessary actions.
I want to do the following: when user clicks on time on the first page then load second page, make the Schedule tab as active and load hall plan.
How to do such things?
Thanks and sorry for my english.
You can look at the anchors. That is, on the first page append some anchor to the url (e.g. $('#listInfoBlock').load('/BaseEvent/EventList?period=' + id+"&tab="+tab+"#ScheduleTab"), and on the second page in the onLoad event check for anchor (location.hash) and make the required tab active if it is equals to ScheduleTab.