logo
down
shadow

Cycle through an HTML list with jinja and jQuery?


Cycle through an HTML list with jinja and jQuery?

By : barubie
Date : November 22 2020, 02:59 PM
should help you out cdvv7788 for pointing me in the right direction. I added the following to my HTML:
code :
<li class="{% if name == names[0]%}active{%else%}test{% endif %}">


Share : facebook icon twitter icon
Append list item to a for loop list in Jinja with jQuery

Append list item to a for loop list in Jinja with jQuery


By : anotherpersononearth
Date : March 29 2020, 07:55 AM
I wish this help you I figured it out! Here are the changes I made to make it work.
For the HTML:
code :
<ul class="list-stream" id="{{ some unique value you get from each    outer for loop }}">
success: function (response) {
$(".list-stream").append(response);
},
Jinja dipslay dictionary values in html by header from list

Jinja dipslay dictionary values in html by header from list


By : Max Lell
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further In Jinja2 (unlike for example Django template language) you can use methods with parameters, so you can use the dictionary .get method:
code :
{{ result.get(header) }}
Building a html table in jinja form dict of list

Building a html table in jinja form dict of list


By : kouami
Date : March 29 2020, 07:55 AM
I wish this helpful for you again @Alessandro.Vegna answer for the intuition of using if else statement.
It can be achieved according to this answer by using namespaces: in jinja 2.0
code :
<tbody>
                        {% for item, components_data in prices.items() %}
                        <tr>
                            <td rowspan="3">{{item[1]}}</td>
                            <td rowspan="3">{{item[0]}}</td>
                        </tr>
                            {% set time = namespace(first=False) %}
                            {% for sub_components, sub_comp_dat in components_data.items_data.items() %}
                             <tr>
                            <td>{{sub_components}}</td>
                            <td>{{ sub_comp_dat[0] }}</td>
                            <td>{{ sub_comp_dat[1] }}</td>
                            {% if not time.first %}
                                {% set time.first = True %}
                            <td rowspan="3">{{ components_data.price_labor }}</td>
                            <td rowspan="3">{{ components_data.total }}</td>
                        {% endif %}
                        </tr>
                        {% endfor %} {% endfor %}
                        <tr>
                            <td colspan="3" id='total-label'>Total</td>
                            <td colspan="4" id='total-value' text-align='right'>july</td>
                        </tr>
                    </tbody>
Cycle through 2D list with Jinja

Cycle through 2D list with Jinja


By : LionsPhil
Date : March 29 2020, 07:55 AM
Any of those help This is similar to pagination. First, you can create a simple pagination object to better assist with the proper page lookup for a new index, while also controlling the indices for the next page and previous page:
code :
import typing

class StudentList(typing.NamedTuple):
  name:str

class Pagination:
  def __init__(self, _num = 1):
     self.num = _num
     self.data = [['foo', 'bar'], ['baz', 'boo'], ['first', 'last']]
  @property
  def has_next(self):
     return self.num < len(self.data)
  @property
  def has_previous(self):
     return self.num > 0
  @property
  def next(self):
     return self.num + 1
  @property
  def previous(self):
     return self.num - 1
  def __iter__(self):
     for i in self.data[self.num-1]:
        yield StudentList(i)
<div class='student_class'>
 {%for student in lecture%} 
   <span class='student'>Name: {{student.name}}</span>
 {%endfor%}
 {%if lecture.has_previous%}
   <button id='previous_{{lecture.previous}}'>Previous</button>
 {%endif%}
 {%if lecture.has_next%}
   <button id='next_{{lecture.next}}'>Next</button>
 {%endif%}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
 $(document).ready(function() {
  $('button').click(function(event) {
   var result = event.target.id;
   $.ajax({
    url: "/update_page",
    type: "get",
    data: {results: result},
    success: function(response) {
    $("#pagination_results").html(response.html);
    },
    error: function(xhr) {
     $("#pagination_results").html('<p>Opps, something when wrong</p>');
    }
   });
  });
 });
</script>
</div>
<html>
  <body>
    <div id='pagination_results'>
      <div class='student_class'>
      {%for student in lecture%} 
        <span class='student'>Name: {{student.name}}</span>
      {%endfor%}
      {%if lecture.has_previous%}
        <button id='previous_{{lecture.previous}}'>Previous</button>
      {%endif%}
      {%if lecture.has_next%}
        <button id='next_{{lecture.next}}'>Next</button>
     {%endif%}
    </div>
    </div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function() {
   $('button').click(function(event) {
    var result = event.target.id;
    $.ajax({
      url: "/update_page",
      type: "get",
      data: {results: result},
      success: function(response) {
      $("#pagination_results").html(response.html);
     },
     error: function(xhr) {
      $("#pagination_results").html('<p>Opps, something when wrong</p>');
    }
   });
 });
});
</script>
</html>
@app.route('/', methods = ['GET'])
def home():
  return flask.render_template('main.html', lecture=Pagination())
import re
@app.route('/update_page')
def update_page():
  _r = flask.request.args.get('results')
  _l = Pagination(int(re.findall('\d+$', _r)[0]))
  return flask.jsonify({'html':flask.render_template('students_and_classes.html', lecture=_l)})
Django/python/static files/Jinja, How to concatenate string and jinja expression INSIDE jinja statement

Django/python/static files/Jinja, How to concatenate string and jinja expression INSIDE jinja statement


By : user3529786
Date : March 29 2020, 07:55 AM
With these it helps Default Django Template Language looks like Jinja but is not one - it has it's own filters and does not support all Jinja tags/filters.
Available options with Django built-in filters:
code :
src="{% static 'orders/img/'|add:pic.picture %}"
src="{% static 'orders/img/' %}{{ pic.picture }}"
{% get_static_prefix as STATIC_PREFIX %}
src="{{ STATIC_PREFIX }}orders/img/{{ pic.picture }}"
Related Posts Related Posts :
  • Check each paragraph contains any bold element with jQuery
  • Bootstrap- background image with content overlay
  • Owl carousel not getting responsive
  • Working with css before selector
  • How to make flowcover like image slider(jquery editing)
  • how to make ajax call onclick of checkbox
  • When fetching data from multiple JSON files with different number of data columns it returns undefined and breaks loop,
  • Send multiple value on manually triggered event jQuery
  • Creating an image element (modifying the DOM)
  • Not able to display properly the hyperlinks because style=display:none
  • jQuery $('img[alt]') vs. $('img').attr('alt')?
  • How do I make a Modal Dialog Box Auto Open after 2 seconds?
  • Adding only one title at a time to the table header in jquery
  • Matched set results relative to another selector
  • How to increase jqgrid header checkbox size
  • Compile directive within controller and return html to DataTable's render function
  • how to change each consecutive div order?
  • Replace submit button value with ASCII character
  • Make mmenu expand to the current url
  • Uncaught TypeError: "#submitRates".click is not a functio
  • ACF Tag It Field and createTag
  • Original filename in case of error in jQuery File Upload
  • jQuery Ajax triggering 2 events together from single click
  • jQuery UI draggable and sortable not working
  • jquery access dynamically generated form
  • Typeahead - Unable to use dynamically created array as source of data
  • Toggle other specific classes off when toggling one on
  • Changing aria-label for ascending and descending states on a sortable table with Jquery
  • Sending var with load jquery
  • How to wrap all siblings in one class after a class? (jQuery)
  • Appending an object to serialized form data
  • how to replace jquery to jquery mobile
  • jquery show/hide buttons on same row not showing pretty - causing half hight during animation?
  • <select> change event doesn't work
  • jQuery hover/click on desktop and mobile devices
  • Use Jquery and FormData to submit form fields and uploaded File to Spring MVC Controller in Spring Boot App
  • Is there a smart way to simplify these jquery codes?
  • JQuery File Upload middleware - Image versions not creating
  • How to increase cookies storage limit(4096) in chrome
  • div on translating increases page width
  • How do I set shipping value depending on select & checkbox
  • jQuery change active state of multiple elements on page when different categories are selected
  • rails jquery script does not work when clicking link
  • Array of JQuery Selectors
  • how can I target with jquery this element?
  • Display default date based on time in jquery datepicker
  • Changing date format before binding JSON data to a jquery template
  • How to use load and open in same div
  • How to make position fixed div scroll horizontally?
  • save state the list on page refresh
  • Change the value of many Divs on select of drop-down
  • Background-image transition not working
  • http request inside another http request success response not working in jquery
  • jQuery hover is not working when I use display:none property of my input
  • Limit jQuery toggle to only affect one accordion
  • Changing div values when dropdown is selected
  • How to replace a list of images with jQuery?
  • jQuery Clone / Copy Style attributes of first td of Table to another Tables's first td
  • Why my select only get the last value?
  • fullpage.js multiple onLeave and afterLoad events
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co