how to sessionstorage slider value - javascript

here are my code,
`<script src="main.js"></script>
<script type="text/javascript">
wwr_start();
function onSliderChanged(slider) {
wwr_req(`SET/TRACK/${slider.id}/VOL/${slider.value}`);
<label class="drx"> Stax </label>
<input class= "raa" type=range min=0 max=3 value=1 step=any id="3" oninput="onSliderChanged(this)">
by the way, i excluded my css style code.to give you brief explanation of my code, it's volume controller for my digital audio mixer. "id" in range input represent track number of my mixer so can't really change to something else. So i would like my last slider value (the slider position) to be remained where it was even when i refresh the page. i treid to use sessionstorage but couldn't really figure out how. i googled, and researched a little of how to use, it seems like i have to use json stringfy option to store slider value to sessionstorage and load out when it's refreshed.
can anyone help me out please? i'm pretty new at coding and kind of running out of time to study from scratch
i tried to use sessionstorage but couldn't figur eout

Write into sessionStorage :
sessionStorage.slide = JSON.stringify(this.slide))
, the slide is the key you set into session storage.
Catch at local :
let final = JSON.parse(sessionStorage.slide), you can get the key from session storage, then set it as a variable final to execute the following things.
The content as mentioned above is a simple concept which not use your actual code to demonstrate, so please do not copy the code directly for your project :)

Related

jQuery Select Box Redirections

I'm having a bit of a mare with jQuery and I was hoping someone could clarify some bits for me. I'm under no illusion any of this is elegant or optimal, and I have NEVER got on with Javascript in any form so please don't judge me too harshly!
Basically, I've got a Wordpress plugin that works very well for most things I want it to do. The main thing is that it offers the ability to select the delivery method from the Woocommerce product menu page. But I've been asked for the available menu options to be filtered by delivery method and I can't see a way of doing this live on the page, so what I've come up with is a "simpler" solution. I'm intending to set up three different page implementations of the menu, one for each of the delivery options (deliver, pick up and eat in), each with categories filtered via shortcode for that delivery method. When the page loads I've got jQuery setting the default option for the dropdown to match that page and then whenever the dropdown is changed from this option it can trigger a redirect to one of the other relevant pages.
I know this is a messy way of doing it, but I have no idea how or even if I could filter the products on the menu any other way, but if someone has a suggestion I'd love to hear it!
Anyway, I've got this partially working. I can set the dropdown default on page load easily enough, and I've managed to get an if statement kind of working, but it only seems to work for the first option and no others. I also can briefly see ifelse undefined in the console before the page changes on a redirect. I've also tried to use a variable, but whenever I've tried using it in the if condition checks it just comes up as undefined or null even though I can view it on the previous line like this:
jQuery("#fdoe_delivery_dropdown").on("change",function(){//Getting Value
var selValue = $("#fdoe_delivery_dropdown").val();
console.log ("Variable delivery method is - " + selValue);
Obviously, I know a variable would be a better way to go, but because I can't get it to work (and I know it's me being dumb but I just gave up on it), here's what I've got so far:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
//Set opening delivery method for "Delivery" page
jQuery("#fdoe_delivery_dropdown").val("delivery").change();
//Check initial delivery method
console.log ("Opening delivery method is - " + jQuery('#fdoe_delivery_dropdown').val());
if($("#fdoe_delivery_dropdown option:selected").val() == "pickup") {
//Log success to console and redirect
console.log ("New delivery method is - " + jQuery('#fdoe_delivery_dropdown').val());
window.location.replace("{site_url}/pickup/"); }
elseif($("#fdoe_delivery_dropdown option:selected").val() == "eatin") {
//Log success to console and redirect
console.log ("New delivery method is - " + jQuery('#fdoe_delivery_dropdown').val());
window.location.replace("{site_url}/eatin/"); }
});
});
</script>
HTML:
<select id="fdoe_delivery_dropdown" class="form-control input-lg"><option value="pickup" selected="">Pick Up</option><option value="delivery">Delivery</option></select>
Note: I have used the WordPress variable {site_url} instead of publishing the website on here, I have no idea if this would actually work in the jQuery, but it would be much better to use a dynamic URL like this rather than a hard-coded one, so if anyone knows the best way of doing that as well it'd be great to know.
As I've said, this script partially works and I've had to put it in a HTML block on the individual pages to get it to trigger at present. So if anyone could help me tidy this up, point out the millions of ways I'm going wrong and help me get this working fully, it would be MASSIVELY appreciated!
Thanks in advance!
I think you want to achieve redirect based on the select option. check below code.
$('#fdoe_delivery_dropdown').on('change', function(){
window.location = 'https://exmaple.com/'+$(this).val();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="fdoe_delivery_dropdown" class="form-control input-lg">
<option value="pickup" selected="">Pick Up</option>
<option value="delivery">Delivery</option
</select>

How can I load a sound by input value using javascript?

In the first, I use Firefox. I have code for a HTML spectrum, but I can't load sound from a textbox using input's id and javascript.
This is input:
<input type="text" id="song" value="first.mp3"></input>
And this is a part of javascript's code, the other part is for making spectrum:
var song = document.getElementById('song').value;
loadSound(song.value);
If I use directly values without input, for example loadSound("first.mp3");, code work, sound is loaded and it starts to play.
This is my full code, but doesn't run on jsfiddle.net because there is no sound for import: https://jsfiddle.net/77js54b4/.
But how can I make a load sound from input textbox?
It looks like you're using value twice in your example...
var song = document.getElementById('song').value;
loadSound(song.value);
If document.getElementById('song').value = "song.mp3", then loadSound(song); should work according to what you mentioned.

Controls Webpage with Knockout: Visible changes not saved

Trying to edit a website with Excel VBA. The edits appear to work, but when I use the save button, nothing is saved. Why isn't updated data, which is visible on the screen, being saved?
This code opens a web page in internet explorer, navigates where I want, fills out data, all which show on the screen, using various methods, such as:
For Each objElement In objElementColl
ExtractedName = objElement.outerHTML
If InStr(ExtractedName, "NewPermit") > 0 Then
objElement.Checked = True
and
Set DropDown = objHTML.getElementById("ProjectFile-AccreditedCertifierId")
DropDown.selectedIndex = 1
or
objHTML.getElementsByName(ElementName)(0).Value = ValueCheck
All work and changes appear on the screen. I click save by using:
Set objElementColl = objHTML.getElementsByClassName("btn")
For Each objElement In objElementColl
ExtractedName = objElement.outerHTML
If InStr(ExtractedName, "click: save, enable:") > 0 Then
objElement.Click
ExtractedName = 1
Exit For
End If
Next
Which runs. The issue is it doesn't save the changes from the three pieces above.
What I have tried
Pause my code and manually click save (same issue)
Pause my code, manually change a checkbox and run the code to save (does save the manual change, but not the coded ones
Pause the code and manually change a box and manually save (only manually changed box is saved)
From above, it appears my save click works, but although the boxes are visibly changed and filled out using the code, there is a gap between the visible and the background.
Some HTML source code. Is what Chrome shows me when Inspecting an element I am changing:
<fieldset>
<legend>Proposal</legend>
<div class="col-xs-12 col-sm-8 col-md-6">
<div class="row">
<div class="col-xs-2 form-group">
<label for="ProjectFile_ProposalLot">Lot</label><input class="form-control" data-bind="textInput: ProjectFile().ProposalLot" maxlength="100" name="ProjectFile-ProposalLot" type="text" />
</div>
<div class="col-xs-2 form-group" data-bind="visible: ProjectFile().StateId() != 7 && ProjectFile().StateId() != 5">
<label data-bind="text: ProjectFile().ProposalDpLabel()"></label>
<input class="form-control" data-bind="textInput: ProjectFile().ProposalDp" maxlength="100" name="ProjectFile-ProposalDp" type="text" />
</div>
I searched the source code for the page. I believe this might be important, but I am not a HTML coder. I have shortened it a bit
var ProjectFileEditViewModel=(function(){__extends(ProjectFileEditViewModel,ViewModel.Model);function ProjectFileEditViewModel(){ProjectFileEditViewModel.__super__.constructor.apply(this,arguments);};ProjectFileEditViewModel.prototype.fields=function(){return {"Id":new ViewModel.NumberField(0),"StateId":new ViewModel.NumberField(0),"DefaultOfficeAddressId":new ViewModel.ObservableField(),"Name":new ViewModel.ObservableField(),"ExistingApprovalDate":new ViewModel.DateField("DD/MM/YYYY"),"ProjectClosed":new ViewModel.ObservableField(),"ProposalAddress":new ViewModel.ObservableChildField(exports.AddressViewModel,this),"Zoning":new ViewModel.ObservableField(),"ProposalLot":new return ProjectFileEditViewModel;})();if(exports.ProjectFileEditViewModel==null)exports.ProjectFileEditViewModel=ProjectFileEditViewModel;
There is also this:
Buildaform.model=new Buildaform.ProjectPageViewModel({ ... ,"ProposalLot":null .... }
I think this last one has something to do with it. I do not know if I can change it.
I cannot release the website address or source code publicly.
As the regarding web site can not be shared, I can come up with a just set of hints to try out:
If the web site would implement a simple (pure) HTML form to send the POST request, your solution would be fine. But looking at the HTML you shared
<label data-bind="text: ProjectFile().ProposalDpLabel()"></label>
the data-bind is already suggesting that the data is getting collected/sent by a library. (E.g. Knockout is using that attribute). This library might now collect the data somewhere, and it might get triggered by a "click" or a "key" event in JavaScript. The collected information can then be stored in a hidden DOM element as suggested by GCSDC or directly in a JavaScript variable.
What I would suggest now is to find out which JavaScript framework is used on this page by inspecting the HTML source. At some point there should be a
<script src="<fancy js framework>.js"></script>
tag in the HTML, which should give you the name of the framework. (There can actually be multiple tags of this kind, including custom JavaScript files. These tags do not have to be at the beginning of the HTML document, and can be scattered all over it, so you might have to search for script in the HTML document. One of them should be the main framework, which is sending the request. If you are not sure which one it would be, you have to google all of them and find out.)
Then, research how the the POST (maybe Ajax) request is sent in the JavaScript code on this page, with help from the documentation of the Framework. And then, send the request by executing custom JavaScript from VBA on this page; how this could be done is shown in this post.
Alternatively, you could try to trigger a click (or key) event on the form inputs to make the framework believe you actually typed it in; how this could be done is shown in this post, but this might not work in all cases.
Per your comment that:
Pause my code, manually change a checkbox and run the code to save
(does save the manual change, but not the coded ones
It seems that the problem is with the code setting form controls and not with the code clicking the save button.
This seems to be a problem not related to VBA but with the behaviour of knockout - see this SO post. The pertinent comment is:
Your problem is that ko subscribes on the click event inside the checked binding:
The questioner in that post is having a similar problem to you - they are trying to check a checkbox (to change the view) but it is not updating either the viewmodel, or the underlying model itself. Knockout is a MVVM framework.
The give-away in your question is that your manual changes commit because you perform a click-and-change when performing the action via point-and-click in the browser, but your programmatic method only does the change to the form control, but not the click first.
So, how to solve this via VBA automation through IE?
Based on the solution in the post I referenced above, plus the method here I will hazard the code below as a possible solution, but please note it is untested ...
Basically you need to 'click' on the form element you want to change - and then update the control value. Hopefully the 'clicking' bit will mean that the knockout viewmodel updates per the 'change', and from there, the model data will be written to the database (or whatever):
Your checkbox example:
If InStr(ExtractedName, "NewPermit") > 0 Then
// hopefully this will get knockout to apply the required binding before your change the value
objElement.Click
objElement.Checked = True
Your dropdown example:
Set DropDown = objHTML.getElementById("ProjectFile-AccreditedCertifierId")
// hopefully this will get knockout to apply the required binding before your change the value
Dropdown.Click
DropDown.selectedIndex = 1
Hope that helps - quite the 3-pipe problem! Good luck.

input file - change text button of data-button-text

I'm using this angular file upload (nervgh/angular-file-upload) in my angular app. It works very well and I have no problems with the uploads.
I have one problem with one button, this is the button exaple code:
<input filestyle="" type="file" data-button-text="Single"
data-class-button="btn btn-default" data-classinput="form-control inline"
nv-file-select="" uploader="form.uploader" class="form-control"/>
I would like to set data-button-text with one variable since my app has 3 different languages.
Something like this: data-button-text="form.variable-text" (or some kind of variable) instead a string like data-button-text="Single"
At the moment, I'm not able to change that text by any variable. I tried a lot of times with differents ways without any success. I can't use angular curly braces or controller variables. At least, I dont know how to do it.
Any help? Any Ideas?
Thanks.
Jorge.
I think the property you are searching is "data-buttontext" instead of "data-button-text".
Tell me on friday at the office meeting if it worked.

Hiding Password field content from users

I'd like to know if its possible for me to do something from the following :
1) Replace the source code visible in view source , with an image , or nothing at all.
2) Hide the value attribute of <inpt type="password" ....> tag , so that the password entered by the user is not visible to anyone .
Thanks in advance.
You can minify your HTML to make it slightly unreadable, but it's trivial to unminify it. You can't do anything further to "remove" or "hide" it.
You mean to hide the value attribute after the user types something in, or to hide the value sent from the server? If the former, you could use JavaScript to extract the value as it's typed into some variable and replace the value with gibberish. If the latter, then the obvious answer is to not send that value.
View source is a representation of static HTML, so if you create any element dynamically, it will not be displayed in view source.
Note: These fields will still be accessible using dev tools.
Following is a sample code:
JSFiddle
function submit() {
var uName = document.getElementById("txtUserName").value;
var uPass = document.getElementById("txtUserPass").value;
console.log(uName, uPass);
}
function addPasswordField() {
var passInput = "<input type='password' id='txtUserPass' />";
document.getElementById("content").innerHTML += passInput;
}
(function() {
addPasswordField();
})()
<div id="content">
<input type="text" id="txtUserName">
</div>
<button onclick="submit()">submit</button>
There is no way to hide source code in a browser since that is how these things are built. The web is an open platform and developers working with the web need to have the view source functionality while working on their project(s). May I ask why you feel the need to hide the source code and the password?
To answer the first question: No. This is how browsers are designed and there are lots of other ways to request the page to see the source. For example, you could use Fiddler to see the traffic passing between the server and the browser.
As for the second question...why are you trying to hide the password?
Using the password input type will prevent anyone from seeing the password on the screen. so I assume this is to stop the data being viewed in transit?
If you want to secure your connection between the client and the server, you should consider using a secure (https) connection. Thanks to LetsEncrypt this is free, so it is no longer a costly option.

Categories