How to maintain scroll position when submitting on toggle buttons - one form per toggle button - ajax

`I've been searching a lot, and I think the answer to my task is a call to an AJAX function. I'm using classic ASP. Please have in mind that I'm a total newbie. I really need someone to take my hand and tell me what to do. The examples I've found so far doesn't keep the same position on the website on submit. The idea is to press the toggle button (on/off) and save immidiately. That part is working perfectly. But when you have a lot of toggle buttons, and the submit gets you to the top of the page, you have a lot of scrolling down to do after every submit
The folowing is working just fine; either it's on or off. No need to do anything, but to press the toggle button. But if you are way down the webpage, you go way up to the top of the page, and you need to scroll way down to continue where you left off. This is where I want the page to be steady as a rock: Don't do anything on submit. Don't move up, don't move down. Stay put. I hope someone can help.
<%
If Request("mode") = "msgfromadmin" Then
Dim dato10, vUser10
dato10 = Day(Date) & "/" & Month(Date) & "/" & Year(Date) & " " & Time()
vUser10 = SQLEncode(Session("username"))
If Request.Form("msgfromadmin") = Lcase("on") Then
msgfromadmin = 1
Else
msgfromadmin = 0
End If
SQL = Conn.Execute("UPDATE usersettings SET msgfromadmin = " & msgfromadmin & " WHERE username = '" & SQLEncode(Session("username")) & "'")
Response.Redirect("/profile/mysettings/")
End If
%>
<head>
<style>
.switch{position:relative;display:inline-block;width:3.43em;height:1.75em;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;}
.slider:before{position:absolute;content:"";height:1.26em;width:1.26em;left:0.25em;bottom:0.25em;background-color:white;-webkit-transition: .4s;transition:.4s;}
input:checked + .slider{background-color:#4d72ff;}input:focus + .slider{box-shadow: 0 0 0.063em #c4cbe7;}
input:checked + .slider:before{-webkit-transform:translateX(1.625em);-ms-transform:translateX(1.625em);transform:translateX(1.625em);}
.slider.round{border-radius:2.125em;}.slider
.round:before{border-radius:50%;}
</style>
</head>
<html>
<body>
<form name="msgfromadmin" action="/profile/mysettings/" method="post">
<input type="hidden" name="mode" value="msgfromadmin">
<div class="col-12 form-group row mt-4">
<div class="col-1 form-group text-center">
<label class="switch">
<input type="checkbox" name="msgfromadmin" onChange="this.form.submit();"<% If RSchosenSetting("msgfromadmin") = 1 Then %> checked<% End If %>>
<span class="slider"></span>
</label>
</div>
<div class="col-11 form-group">
Send a mail when there's a message from admin
</div>
</div>
</form>
</body>
</html>

Is it something like this you want??
You will have to obviously do the database connections etc on the submitpage.asp
I added the loop to the text and slider to generate a page that is longer.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>msgfromadmin</title>
</head>
<style>
.switch{position:relative;display:inline-block;width:3.43em;height:1.75em;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;}
.slider:before{position:absolute;content:"";height:1.26em;width:1.26em;left:0.25em;bottom:0.25em;background-color:white;-webkit-transition: .4s;transition:.4s;}
input:checked + .slider{background-color:#4d72ff;}input:focus + .slider{box-shadow: 0 0 0.063em #c4cbe7;}
input:checked + .slider:before{-webkit-transform:translateX(1.625em);-ms-transform:translateX(1.625em);transform:translateX(1.625em);}
.slider.round{border-radius:2.125em;}.slider
.round:before{border-radius:50%;}
</style>
</head>
<html>
<body>
<form name="msgfromadmin" action="msgfromadmin.asp" method="post">
<input type="hidden" name="mode" value="msgfromadmin">
<div class="col-12 form-group row mt-4">
<%for i = 1 to 100 %>
<div class="col-1 form-group text-center">
<label class="switch">
<input type="checkbox" name="msgfromadmin<%= i %>" id="msgfromadmin<%= i %>" onChange="loadXMLDoc('<%= i%>','message <%= i%> from admin')" <% If request("msgfromadmin" & i) = "on" Then %> checked<% End If %>>
<span class="slider"></span>
</label>
</div>
<div class="col-11 form-group" id=adminmessage<%=i%>>
Send a mail when there's a message from admin
</div>
<% next %>
</div>
</form>
<script>
function loadXMLDoc(incoming, incoming2) {
var demoChecked = document.getElementById("msgfromadmin"+ incoming).checked;
if (demoChecked == true) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("adminmessage"+incoming).innerHTML = this.responseText;
}
};
xhttp.open("post", "SubmitPage.asp?msgfromadmin="+ incoming +"&message="+incoming2, true);
xhttp.send();
document.getElementById("adminmessage"+incoming).innerHTML = "Mail sent to admin";
} else {
document.getElementById("adminmessage"+incoming).innerHTML = "Send a mail when there's a message from admin";
}
}
</script>
</body>
</html>
and the SubmitPage.asp
<%
If Request("msgfromadmin") <> "" then
Dim dato10, vUser10
dato10 = Day(Date) & "/" & Month(Date) & "/" & Year(Date) & " " & Time()
response.write "Mail sent to admin at " & dato10
' vUser10 = SQLEncode(Session("username"))
' SQL = Conn.Execute("UPDATE usersettings SET msgfromadmin = " & msgfromadmin & " WHERE username = '" & SQLEncode(Session("username")) & "'")
End If
%>

Related

When I click back and forward Buton of browser all of my dynamically created PartialView get disappered

I can create multiple Partialviews in my view
Create.cshtml
#model Opto.Models.Recipe
....
<div id="Far" class="tab-pane active card-body">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row form-group">
<div class="col">
<div class="text-left" dir="ltr">
<partial name="RecipeFarSighted.cshtml" Model="Model.FarSighted" />
</div>
<hr />
<div class="text-center" dir="rtl">
<div id="FarSightedBillsSection">
#*FarSightedBills will be created here by javascript*#
</div>
<a onclick="AddBill('far')" style="cursor:pointer"><img src="~/images/Plus.png" width="25" height="25" /></a>
<br /><br />
#if (!Model.FarSighted.Share)
{
<div class="form-group row form-check">
<label class="form-check-label col">
<input asp-for="FarSighted.Share" type="checkbox"> عدم دریافت عینک
</label>
</div>
}
</div>
</div>
</div>
<br />
</div>
...
#section Scripts{
<script>
var farIndex = 0;
var farRealCount = 0;
function AddBill(type)
{
tag = "<div id='farSightedBill" + farIndex + "' ><a onclick=\"RemovePartial('far'," + farIndex + ")\" style='cursor: pointer'><img src='/images/Minus.png' width='25' height='25' /></a><h4><a onclick=\"$('#farSighted" + farIndex + "').collapse('toggle')\" style='cursor: pointer' data-target='#farSighted" + farIndex + "' id='farBillTitle" + farIndex + "' > عینک دائمی " + (farRealCount + 1) + "</a ></h4 > <br /><div class='collapse' id='farSighted" + farIndex + "'></div></div > ";
$.get('/Glasses/DisplayFarBill?index=' + farIndex +
'&packFactor=' + '#(Model.FarSighted?.PackFactor)' + '&lenseCover=' + '#(Model.FarSighted?.LenseCover)',
function (partial) {
$('#FarSightedBillsSection').append(tag);
$('#farSighted' + farIndex).append(partial);
$('#farSighted' + farIndex).collapse('show');
//aaa(farIndex);
farIndex++;
farRealCount++
});
}
</script>
}
when I click the Back button of the browser and then forward, all my partial views will be disappeared. how can I solve this?
and when I go to submit action method in the controller for validation and there are some errors in it, when it goes back to view there are no parts in it, what should I do?
Firstly,the Back and Forward button is used for navigating through visited Web pages.And it may uses BFCache,it will cache the whole page including jquery(Source code).And the partial view you added will not shown after Back,Forward click is because it is added by jquery.jquery will change the html code,but will not change the source code.When you click Back,Forward button,browser will reload the Source code,and render it to html code.If you want to show the partial view,you can only add them directly like this in your code:
<div class="text-left" dir="ltr">
<partial name="RecipeFarSighted.cshtml" Model="Model.FarSighted" />
</div>

Object Doesn't support this method

I am getting a
Object doesn't support this method
when I click the start button. It says the line is;
<input type="button" name="btnStart" id="btnStart" value="Start" onclick="Start_Button">
I believe it actually may be somewhere in my vbscript. When I click on the start button it depending on whether the strPath is entered and the checkbox is checked it should run the program to install, or tell me that I need to enter the strPath or check a box.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tombstone USD #1 - Software Installer</title>
<HTA:APPLICATION
APPLICATIONNAME = "Software Installer"
ICON = "images\districtlogo.ico"
ID = "NAME"
BORDER = "thick"
CAPTION = "yes"
SHOWINTASKBAR = "yes"
SINGLEINSTANCE = "yes"
SYSMENU = "yes"
WINDOWSTATE="normal"
SCROLL = "no"
VERSION = "1.0"
INNERBORDER = "yes"
SELECTION = "yes"
MAXIMIZEBUTTON = "no"
MINIMIZEBUTTON = "no"
NAVIGABLE = "no"
CONTEXTMENU = "yes"
BORDERSTYLE = "normal"
/>
<script type="text/javascript">
<!--Resolution//-->
window.resizeTo(600,750);
</script>
<script language="VBScript">
Sub Start_Button()
Dim strAnswer,strPath, objNetwork
Set objNetwork = CreateObject("WScript.Network")
strAnswer = ""
strPath=""
If chkEset.Checked Then strAnswer = "Eset"
'If strPath is empty then nothing was checked.
If strPath = "" Then
Window.Alert "Please input Path location!"
End If
'If strAnswer is empty then nothing was checked.
If strAnswer = "" Then
Window.Alert "Please Make an Selection!"
Exit Sub
End If
Window.Alert "Done!"
End Sub
</script>
</head>
<body style="background-color:#E6E6FA">
<center>
<img src="images\districtlogo.png" alt="Logo" height="100" width="100"/>
<h1>Software Installer</h1>
</center>
<form name="MainMenu" action="" method="">
<label for="sPath">Drive Letter or File Path:</label><input type="text" size="60" id="sPath" name="sPath"></td>
<br />
<label for="Eset">ESet AntiVirus</label></td><input type="checkbox" id="Eset" name="chkEset">
<br />
<input type="button" name="btnStart" id="btnStart" value="Start" onclick="Start_Button">
<br />
<input type="reset" value="Reset">
</form>
</body>
</html>
I'm currently just trying to get this run with the one program. This is a proof of concept test.
Ok, since I figured it out I thought I would add the completed script below. All this does is check to see if the strPath is filled in and if the checkbox is checked. Next step is to get it to run a program that corresponds to the checkbox.
The way I fixed it was by changing the <input type="button" name="btnStart" id="btnStart" value="Start" onclick="Start_Button"> to <input type="button" name="btnStart" id="btnStart" value="Start" onclick="Start_Button()">.
I also realized that the Form wasn't actually assigning the values to the script and created TheForm value and assigned it to the MainMenu form. I then had to add that value to all the existing values.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tombstone USD #1 - Software Installer</title>
<HTA:APPLICATION
APPLICATIONNAME = "Software Installer"
ICON = "images\districtlogo.ico"
ID = "NAME"
BORDER = "thick"
CAPTION = "yes"
SHOWINTASKBAR = "yes"
SINGLEINSTANCE = "yes"
SYSMENU = "yes"
WINDOWSTATE="normal"
SCROLL = "no"
VERSION = "1.0"
INNERBORDER = "yes"
SELECTION = "yes"
MAXIMIZEBUTTON = "no"
MINIMIZEBUTTON = "no"
NAVIGABLE = "no"
CONTEXTMENU = "yes"
BORDERSTYLE = "normal"
/>
<script type="text/javascript">
<!--Resolution//-->
window.resizeTo(600,750);
</script>
<script language="VBScript">
Sub Start_Button()
Dim strAnswer,strPath, objNetwork,TheForm
Set objNetwork = CreateObject("WScript.Network")
Set TheForm = Document.MainMenu
strAnswer = ""
strPath = ""
If TheForm.chkEset.Checked Then strAnswer = "Eset"
'If strPath is empty then nothing was checked.
If TheForm.strPath = "" Then
Window.Alert "Please input Path location!"
Exit Sub
End If
'If strAnswer is empty then nothing was checked.
If strAnswer = "" Then
Window.Alert "Please Make an Selection!"
Exit Sub
End If
Window.Alert "Done!"
End Sub
</script>
</head>
<body style="background-color:#E6E6FA">
<center>
<img src="images\districtlogo.png" alt="Logo" height="100" width="100"/>
<h1>Software Installer</h1>
</center>
<form name="MainMenu" action="" method="">
<label for="Path">Drive Letter or File Path:</label><input type="text" size="60" id="Path" name="strPath"></td>
<br />
<label for="Eset">ESet AntiVirus</label></td><input type="checkbox" id="Eset" name="chkEset">
<br />
<input type="button" name="btnStart" id="btnStart" value="Start" onclick="Start_Button()">
<br />
<input type="reset" value="Reset">
</form>
</body>
</html>

Sinatra / Rails : How to pass user input between views

I've been looking for a bit and can't find or rather very well understand what to do, I'm sure its quite simple I'm just very new to Ruby and web apps, this one is in Sinatra for simplicity. I'd like to pass the #multiplication_table variable as well as the things the user puts into the inputs to the next results page so I can see if they put in the answers correctly but dont know how to, I think I know how to do this with a form_for but I dont know how to do that with already having a for loop.
This is my web.rb file
# web.rb
require 'sinatra'
def create_table(number)
possibles = [1,2,3,4,5,6,7,8,9,10,11,12]
int_set = possibles.shuffle
result = []
#answer_list = []
while int_set.length > 0
random_int = int_set[0]
string = (number.to_s + " x " + random_int.to_s)
int_set.delete(random_int)
if (random_int.to_s).length == 1
string += " = ______"
else
string += " = ______"
end
result << string
#answer_list << random_int.to_i * number.to_i
end
return result
end
get '/' do
#greeting = "Hi! Enter a number to generate a quick test."
erb :index
end
post '/results' do
erb :results
#multiplication_table
end
post '/' do
#multiplication_table = create_table(params[:int_to_generate])
#answers = #answer_list
erb :multiplication_table_page
end
and this is my multiplication_table_page.erb
<!-- multiplication_table_page.erb -->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css">
</head>
<style>
h1 {text-align:center;}
p {text-align:center;}
.form-group {float: right; width: 100%;}
input {float: right;}
#submitall{width:100%;}
</style>
<body>
<div class="container">
<h1>Here is your table! Good luck.</h1>
<form action ="/results" method="POST" class="form-inline">
<% counter = 0 %>
<% #multiplication_table.each do |equation| %>
<input type="text" name = <%= "user_answer" + counter.to_s %> class="form-control">
<h2> <%= equation %> </h2>
<% counter += 1 %>
<% end %>
<p> </p>
<input id=submitall type="submit" class = "btn btn-primary">
</form>
<p> </p>
<p>Put another number in for another table</p>
<form action ="/" method="POST" class="form-inline">
<div class = "form-group">
<input type="submit" class = "btn btn-primary">
<input type="text" name ="int_to_generate" class="form-control">
</div>
</form>
<% #answers.each do |answer| %>
<p> <%= answer %> </p>
<% end %>
</div>
</body>
</html>

Uploading a text file via POST method

I've been working on this problem for about a month now. I've seen dozens of web pages on the POST method and I just can't figure out how to use it.
I have this HTML form that posts data and a file up to a web site. this HTML form works great:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sample Post Request</title>
</head>
<body>
<form action="https://xxx.xxx.com//trackit/file/upload"
method="post" enctype="multipart/form-data">
<div>
<p>
File Name<select name="name">
<option value="" disabled="disabled" selected="selected">Select file name</option>
<option value="Customer">Customer</option>
<option value="Shipment">Shipment</option>
</select>
</p>
<p>
File Date:<input type="text" name="date"> format : YYYYMMDD
</p>
<p>
Upload File: <input type="file" name="file" />
</p>
</div>
<input type="submit" value="Upload It" />
</form>
</body>
</html>
However, I'm trying to automate this so I don't have to use the form. Here is what I have so far:
OPTION EXPLICIT
DIM sFile, sURL, sDate, sName, objStream
'File Type
sName = "Shipment"
'File Date YYYYMMDD
sDate = "20150717"
' File we are uploading
sFile = "C:\shipment.txt"
sBoundary = "|-O-|"
Set objStream = CreateObject("ADODB.Stream")
objStream.Type = adTypeText
objStream.Mode = adModeReadWrite
objStream.Open
objStream.LoadFromFile sFile
'Sending the data over HTTP Post
Set objHttp = CreateObject("MSXML2.XMLHTTP")
objHttp.Open "POST", "https://xxx.xxx.com//trackit/file/upload", False
objHttp.SetRequestHeader "Content-Type", "multipart/form-data; boundary=" + sBoundary
objHttp.Send "name=" + sName
objHttp.Send "date=" + sDate
Any help will be appreciated.

Getting a response from Cfajaximport / ajax with coldfusion

I've searched a number of the previous responses, but none of them have helped me. I'm actually extrapolating on another script I found earlier.... but I'm not sure how to capture the response in AJAX. I was guessing that handleResponse would just capture whatever is outputted on checkdomain.cfm, but I can't seem to make that happen so I can output it. So in the example below, somehow the person who developed this script was able to get back AVAILABLE from checkdomain.cfm, but I can't figure out how to do that.
Thanks in advance!
<head>
...
<cfajaximport />
...
<script>
function handleResponse(s) {
if(s == "AVAILABLE") {
//rewrite span
var domainspan = document.getElementById('DomainStatus');
var newcontent = "Available To Register :)";
domainspan.innerHTML = newcontent;
var loadingspan = document.getElementById('frmGO');
var newcontent = "<input name='' value='GO!' class='search_domain_go' type='submit' />";
loadingspan.innerHTML = newcontent;
} else {
//rewrite span
var domainspan = document.getElementById('DomainStatus');
var newcontent = "Unavailable To Register :(";
domainspan.innerHTML = newcontent;
var loadingspan = document.getElementById('frmGO');
var newcontent = "<input name='' value='GO!' class='search_domain_go' type='submit' />";
loadingspan.innerHTML = newcontent;
}
}
function CheckDomain() {
var loadingspan = document.getElementById('frmGO');
var newcontent = "<input name='' type='image' class='search_domain_go' src='images/ajax-loader.gif' alt='' />";
loadingspan.innerHTML = newcontent;
ColdFusion.Ajax.submitForm('frmDomainCheck','checkdomain.cfm',handleResponse);
}
</script>
...
</head>
<body>
...
<div class="search_domain">
<div class="search_domain_form">
Search Your Domain Here<br />
<form method="post" action="" onSubmit="CheckDomain();return false;" id="frmDomainCheck">
<input class="search_domain" name="frmURL" id="frmURL" value="Please enter your domain name here..." onfocus="if(this.value == 'Please enter your domain name here...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Please enter your domain name here...';}" type="text" />
<span id="frmGO"><input name="" value="GO!" class="search_domain_go" type="submit" /></span>
<form>
</div><!-- /# end search form -->
<div class="domain_features">
<ul>
<li><span id="DomainStatus">Type in the domain and click 'GO' to check its availability.</span></li>
</ul>
</div>
</div>
...
</body>
I used your code and then added the following for checkdomain.cfm
<cfoutput>AVAILABLE</cfoutput>
It worked just fine. In your handleResponse function, put an alert(s); statement at the top to see just what you're getting back from checkdomain.

Resources