I'm trying to use AlpineJS to update the displayed data from localStorage every time I click a button.
I have two buttons that use setItem to update the value in localStorage.
This all works, but I can't figure out how to use AlpineJS to update the displayed data (using getItem) when the button is clicked.
When the button is clicked, the value in localStorage does change, but I have to reload the page to update the data on FE.
Could someone give me some advice on how to solve this using AlpineJS?
CodePen
CodePen link
I'm new to AlpineJS and I've tried the documentation, but I really don't know how to grasp it.
Thank you in advance for any tips
Your approach is not working because localStorage is not reactive, so you need a page reload to see the mutated state. Everything you do on the frontend should utilize reactive Alpine.js variables and use a watcher to sync the state of these variables with the localStorage. Furthermore Alpine.js provides a localStorage plugin, so you don't even have to sync them manually just put a $persist() to the respective variables:
<!-- Alpine Plugins -->
<script defer src="https://unpkg.com/#alpinejs/persist#3.x.x/dist/cdn.min.js"></script>
<!-- Alpine Core -->
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
<div x-data="{ name: $persist('') }">
<button #click="name = 'Link'">Set name to Link</button>
<button #click="name = 'Zelda'">Set name to Zelda</button>
<div x-text='`Selected name: ${name}`'></div>
</div>
Related
link to my web application: https://malekmekdashi.github.io/work_day_scheduler/
link to my github repo: https://github.com/malekmekdashi/work_day_scheduler
I cannot seem to solve this issue that I'm having. My goal is that whenever I refresh the page after inputting some values in the text box, the values will remain on the page along with local storage. However, I am unable to do so. If someone can be so kind as to help me solve this issue, I would greatly appreciate it. Here is a little example of the code that I'm working with
HTML:
<div class="row time-block" id="1">
<div class="col-md-1 hour" id="1">9am</div>
<textarea class="col-md-10 description" id="inputValue"></textarea>
<button class="saveBtn col-md-1"><i class="fa fa-save"></i></button>
</div>
Javascript:
$('.saveBtn').on('click', function() {
var inputValue = $(this).siblings('.description').val();
localStorage.setItem("inputValue", inputValue);
});
$('inputValue .description').val(localStorage.getItem('inputValue'));
Your selector is wrong in two ways.
Like in the comments already said: Your return will be an array. You have multiple ids inputValue with class description.
You want to select id inputValue, which means you need to use #inputValue. Also you need to combine them by leaving out the whitespace otherwise you search for childrens. Correct jQuery would be $('#inputValue.description')
I'm trying to wrap my head around how to wire up a simple button in BigCommerce Stencil. I've been using this platform for about 24 hours now, so any help you can give is MUCH appreciated!! I haven't used Handlebars.js or jQuery in a few years so I'm pretty rusty.
I'm using the Cornerstone Theme.
What I'm looking to do is:
Click a button
Array of objects sent to my JS function
JS Function adds all the items in the array to the cart.
I feel like this shouldn't be that hard, but where I am getting stuck is.
Getting data that is available in the HTML to be available to my function.
handleButtons() {
$('#add-all-to-cart').on('click', (event) => this.addAllItemsToCart(event));
$('#remove-all-from-cart').on('click', (event) => this.removeAllFromCart(event));
}
//I want to supply {{category.products}} from the HTML
addAllItemsToCart(e) {
console.log('Adding all items to cart');
}
removeAllFromCart(e) {
console.log('Removing all items from cart');
}
And on the HTML side, I have
//This seems to be the way other buttons were made in the Theme
<input id='add-all-to-cart'
data-wait-message="{{lang 'products.adding_to_cart'}}"
class="button button--small"
type="submit"
value="{{lang 'products.add_all_to_cart'}}" />
<input
id="remove-all-from-cart"
data-wait-message="{{lang 'products.adding_to_cart'}}"
class="button button--small"
type="submit"
value="{{lang 'products.remove_all_from_cart'}}" />
The technically correct way of doing this would be to utilize the inject helper. This passes data through to the JS Context within the theme JavaScript files. Assuming you are in a file with access to this context (such as category.js), you could use the following code.
In your HTML: {{inject "categoryProducts" category.products}}
In your JS: console.log(this.context.categoryProducts);
I am using intercooler.js in a django project.
http://intercoolerjs.org
<div id=right_side>
<form ic-post-to="{% url 'update-task-ajax' %}" ic-target="#right_side">
[...]
</form>
</div>
The form itself gets reloaded in the div #right-side after the first (working) use and after that intercooler is not working anymore. How to fix this?
Update:
Looks like i have to use
Intercooler.ready(func(elt))
http://intercoolerjs.org/reference.html
But i'm stuck how to use it properly.
I don't see anything wrong about this, the form should keep submitting and targeting #right_side each time, unless you are replacing it somehow. I don't see why Intercooler.ready() is necessary, given the code. Can you clarify what are trying to accomplish?
I'm availabe on the gitter chat for intercooler to help:
https://gitter.im/intercooler-js/Lobby
i am creating a web app in which i am using angularjs for database conectivity
here is my code
<div ng-repeat="x in sonvinrpm">
<input type="Text" ng-model="venuemobile" value="{{x.venuemobile}}" ng-init="venuemobile='{{venuemobile}}'"
</div>
<button ng-click="updfunction()">update</button>
on my page load my textbox fetching particular venuemobile from my database(1234567890) if i edit the venuemobile and press update the value of venuemobile should be updated
but i am facing the error
missing parameter: venuemobile
and i found out this error is appearing because i am using repeater,
when i remove repeater and enter into textbox manually then my database is updating properly,
previously i used ng-repeater for my dropdownlist and table(because there are multiple data not single data) in this case i need only one value from database, what should i use instead of ng-repeat
You do not have to call a function to update a $scope variable, since angular uses two way data binding by default, the updated value will be bound to scope. Anyway your HTML should be
<input type="Text" ng-model="venuemobile" value="{{venuemobile}}" ng-init="venuemobile='{{venuemobile}}'"
</div>
I am using a picklist in visualforce page, through apex:inputField in a form. I am saving that value in custom object. And that value is being saved in object. But when I will open that record in the same form (visualforce page). When the form is being loaded that saved value was there. but when the form has been loaded, the value become null and --None-- was selected.
I tried to use javascript with alert, but it was showing that right value. I couldn't find out the issue.
I have used below code:
<apex:pageBlockSectionItem id="Menopausal_StatusItem">
<apex:outputText value="Menopausal Status:" />
<apex:outputPanel >
<apex:inputField value="{!msd.AgeVal__c}" id="ageValId" label="" style="display:none;"/>
<apex:inputField value="{!msd.Menopausal_Status__c}" id="Menopausal_Status" required="true"/>
</apex:outputPanel>
</apex:pageBlockSectionItem>
<!--<script>
alert('{!msd.Menopausal_Status__c}');
alert(document.getElementById('pageId:formId:pageBlockId:pageBlockSectionId:Menopausal_StatusItem:Menopausal_Status').value);
</script>
-->
This is a dependent picklist (msd.Menopausal_Status_c) and the controlling pick list is msd.AgeVal_c.
Please help me. Thanks in advance.
I think this has to do with the dependent pick lists. Do you have a value in AgeVal__c? If not, Menopausal_Status__c might not be correctly rendered when loading it in the Visualforce page.
You could verify this by temporarily making the controlling pick list visibility, to check its content.