I'm currently trying to to get an innerHTML from a twig variable using javascript. But I cannot access to it.
I created a calendar which is an array. And I pass it through my controller so I can use it with twig in my template.
Then I named a div where I render some cells from this array.
Using javascript I get the id from my div and use innerHTML method.
After that, I simply add a alertbox to check if my innerHTML is showed.
myPage.html.twig:
{% for day in calendrier %}
....
<div id="myId">{{day[2]}}</div>
...
{% endfor %}
javascript.js:
document.getElementById('myId').addEventListener('click', fn);
function fn(){ alert(this.innerHTML); };
I cannot access to this value.
I expected to get the day from this div. Let's say for example '14' or any number the user click on the calendar.
How may I process to reach {{ day[2] }} ?
Thank you for your replies.
Related
I am working on a Shopify app that uses a theme app extension to alter how the price is displayed based on the tags associated with that product. The following code achieves this effect on product pages by inserting these lines of liquid in the price . The if statement looks for a match on the product tags and displays either my code when there is a match or the straight price when there is not.
var x = document.querySelectorAll(".product-single__price");
var i;
for (i=0; i < x.length; i++) {
x[i].innerHTML = `
{%- if product.tags contains 'mytags' -%}
{% comment %} mycode {% endcomment %}
{%- else -%}
{{ product.price | money | strip_html }}
{%- endif -%}
`;
}
However, I cannot get this to work on collection pages. I'm assuming this is because the theme app extension's injection is occurring after the loop that displays the product grid and the product tags are no longer readable. Even if I assign the last product on the collection page with the tag to match, it doesn't display my code.
Is there a work around where I can pull the tags for each product and inject this code to each in the grid/list?
You should render all products in a collection into a Javascript data structure, because as you well know, Liquid renders first, creating a giant string of HTML. Inside this HTML Shopify is injecting your Liquid too in your Theme App Extension. So far so good?
Once the Liquid has been totally rendered, that is, the entire collection up to the limits of pagination are in the DOM would any Javascript execute. So it is at this point that you could iterate the DOM for rendered products, and use it. So you could do your querySelector on product prices, and do your logic based on the data you previously saved.
If you expect to be able to change prices on the fly in the Liquid phase, your logic has to be moved from JS to Liquid itself. In other words, when rendering a single product in the collection template, you alter the price then and there, based on logic you have at your disposal, like a tag or metafield.
I have an angular app which extracts data from a JSON file which populates the webpage via directive template for the user using ng-repeat.
When the page is initially loaded, the ID(from the json file) in (p) element is 1.
<p id="pollidholder" style ="display:none" ng-bind-html="item.id">{{item.id}}</p>
Once the user presses a button(Next, ng-click), the ID is updated 2 in the <p> element via a directive template. I am using the ID to register the users input.
In my back end Javascript (uservotedd.js), I am using
var pollidholder1 = document.getElementById('pollidholder').innerHTML;
to extract the ID from the <p> element.
However, the ID is not updated from 1 to 2 for the var pollidholder even though the <p> element is changed on the page itself.
How do I update my Javascript variable once the html <p> element has changed? Please help. I would like avoid major rewrite of my code. Note the Alert message is not update to reflect the change in ID when the user hits the submit button.
Please find the plunker example here https://embed.plnkr.co/3kIxhW2Iq5lKQm81csln/
Just don't use onclick in your html here:
<div class="simple-button" onlclick="idchange()" ng-click="change()" style ="font-size: 4vw ">Next</div>
Put all the code of idchange into the change function of the controller, and you will have access to all the variables you need. For example:
$scope.change = function() {
$scope.indexToShow = ($scope.indexToShow + 1) % $scope.items.length;
alert($scope.items[$scope.indexToShow].id);
}
Don't try to dodge angular's encapsulation, using onclick rather than ng-click will cause lots of confusion for beginners. Just use ng-click and you will be fine.
My problem is that I have several a tag and a javascript. When click the a tag, JavaScript works and get the tag value. It's okey but I want to assign this javascript variable to session or asp.net's variable. Because a href will goes another page and I need a href value. Also a href inside a SQL loop.
How will I do ? Is there another way without JavaScript ?
You should use QueryString. No need for any javascript.
Click
In you .net code:
var Id = int.Parse(Request.QueryString["id"]);
this is my javascript function :
<script>
function text() {
var i = new Array();
{% for content in table %}
i[{{content.id}}]= document.getElementById('checkbox{{content.id}}').checked;
{% endfor %}
return i;
}
</script>
as you can see I have some django template code in It. how to prevent caching of my script ?
I see this but It didn't solve my problem !
I'm not sure I've understood properly, but as far as I can tell this has nothing to do with caching: it is a matter of understanding when templates are rendered vs when scripts are executed.
This script is contained in a template. That template is rendered on the server side. Therefore, the script will be generated - and sent to the browser - with the values of content as they were at that point.
If you have an Ajax function which later updates something in the HTML page, this script will not care at all, because you have done nothing to update it - again, the values in the script were hard-coded when the template was sent to the browser.
You probably don't want to do it this way at all. Instead, you should find or define a parent element that contains all the checkboxes - a div or table row, for example - and then dynamically iterate through all descendants of that element to find the value of any checkboxes. You can then call this script from your Ajax function to update the values when the content changes.
I have a Django website that retrieves scores of various items. I would like to make the score appear when a user clicks on a link. The problem is, how do I create this functionality when all of my Jquery code is located in the head?
For example, I have the following code in my head:
$(document).ready(function() {
var $addedElem = $('<p>New Element</p>');
$('.display').one('click', function() {
$addedElem.hide().appendTo("#container").fadeIn("slow");
});
});
Where it defines addedElem, I would like it to add the "score" that the view gives to me. So, I would normally be doing this:
{{ score }}, but how would I add this to addedElem if I do not have access to it? I am using Django's templating system, so I only have access in the innermost body elements and not the head.
Base template have access to context of its inherited templates, {{ score }} will work. You should of course handle the situation when there is no score provided.
If you want this code only for a particular page, you can define {% block head_ext %}{% endblock %} in base template and override it in child template. It's ok to call $(document).ready() more than once.