FLASK Template Rendering

I am encountering an issue with refreshing the page, specifically when I click the button that is meant to filter data using an ajax script. The problem arises when the IF condition does not work and prevents rendering of the template. Below is a snippet of the code:

Python

def viewchallenges():
        categories = Categories.query.all()
        if request.method=='POST':
                 category_id=Categories.query.filter_by(category=request.form['name']).first()
                 check=Challenge.query.filter_by(categorie_id=category_id.id).order_by(Challenge.timestamp.desc()).all()
                 if  not check:
                     flash(_('not found'))
                 else:
                     page = request.args.get('page', 1, type=int)
                     posts = Challenge.query.filter_by(categorie_id=category_id.id).order_by(Challenge.timestamp.desc()).paginate(
                         page, current_app.config['POSTS_PER_PAGE'], False)
                     next_url = url_for('main.viewchallenges', page=posts.next_num) \
                         if posts.has_next else None
                     prev_url = url_for('main.viewchallenges', page=posts.prev_num) \
                         if posts.has_prev else None
                     return render_template('viewChallanges.html', title=_('View Challenge'), posts=posts.items, next_url=next_url, prev_url=prev_url,categories=categories)
        page = request.args.get('page', 1, type=int)
        posts =Challenge.query.order_by(Challenge.timestamp.desc()).paginate(
                page,current_app.config['POSTS_PER_PAGE'], False)
        next_url = url_for('main.viewchallenges', page=posts.next_num) \
        if posts.has_next else None
        prev_url = url_for('main.viewchallenges', page=posts.prev_num) \
        if posts.has_prev else None
        return render_template('viewChallanges.html', title=_('View Challenge'), posts=posts.items, next_url=next_url, prev_url=prev_url,categories=categories)

HTML

{% for item_category in categories %}
                  <button class="btn btn-secondary fby_category">{{item_category.category}}</button>
              {% endfor %}

AJAX

 $('.fby_category').click(function(e) {
    var url = "{{ url_for('main.viewchallenges') }}";
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: url,
        data: {
            'name': $(this).text()
        },
     });
   });

Answer №1

If you're looking to display a new template, which essentially means presenting the user with a different webpage, you can achieve this without the need for JavaScript. Simply utilize multiple forms.

{% for item_category in categories %}
    <form action="{{ url_for('main.viewchallenges') }}" method="post">
        <input type="submit" name="{{item_category.category}}<" value="{{item_category.category}}" />
{% endfor %}
</form>

Simpler, right?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to organize and sort mysql data without disrupting operations?

I've been searching for information on this topic but haven't been able to find a tutorial that explains exactly what program to use. I have a MySQL database with expenses data. What I need is for the system to automatically categorize a new ex ...

Place a fresh banner on top of the Ionicon icon

I recently started using Ionicons from and I am not too familiar with css. My question is, can a banner that says 'new' be overlaid on the top right corner of the Icon? Is there a simple or standard method to achieve this? (whether it's an ...

Utilizing ReactRouter via CDN without needing npm

As someone new to React, I have been practicing by directly incorporating the react.js and react-dom.js files along with browser.min.js for JavaScript transformation into my HTML page. Now, I am looking to utilize react-router and have added the ReactRoute ...

HTML5 Cache Manifest functions on http but not on https environments

Today, my usual internet search skills seem to be failing me so I'll ask here... I have a django application running on apache using wsgi. Currently, I am trying to make it work offline. I have set up the Cache Manifest file in django with the correc ...

Is there a way to update components in Angular without affecting the current URL?

I want to update a component without changing the URL. For example, I have a component called register. When I visit my website at www.myweb.com, I would like to register by clicking on sign up. How can I display the register component without altering the ...

Retrieve PHP variable from a PHP CSS file

I'm facing an issue where I am unable to retrieve a PHP variable from a CSS file that is loaded in this manner from my index.php: <link href="css/style.php" rel="stylesheet"> Within the style.php file, the code looks like this: <?php heade ...

Using jQuery to locate the dimensions of an image and then adjusting the height and width of a div using

I'm currently working on a project where I need jQuery to determine the size of each image (approximately 8-10 images per page) within an Owl Carousel. However, every time I check in the developer tools, all I see is width: 0px, height: 0px Here&apos ...

Issue with setting active class on current html page using Bootstrap 5 and Flask

I am currently developing a flask web application and I am focusing on customizing the navigation bar. Utilizing bootstrap 5 for styling purposes, I am attempting to apply the 'active' class when a specific navbar page is clicked with the followi ...

Is it possible to access forms and input fields in an AngularJS script without having to pass them from the HTML code?

Seeking a solution for input field validation, I have written code where input field states are passed from HTML to a script through a function. However, my goal is to directly retrieve the values in the script without passing them from the HTML when calli ...

Concentrate on user input in PHP programming

My goal is to create a PHP validation form where errors are displayed correctly every time. However, I am encountering an issue with setting focus on the input field with an error if one occurs. I have variables like $rut_error, $first_name_error, $last_na ...

Is there a way to expand my image width-wise without affecting its height upon hover?

.film{ text-align: center; width: 234px; min-height: 311px; position: relative; z-index: 1; overflow: hidden; } .poster{ width: 234px; height: 311px; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; ...

Is the integer value included in the linear progression?

I have a unique setup where each time the user clicks a 'Done' button, 20 is added to a base number, x (..-40,-20,0,20,40,60..). This updated value of x is then saved in a database and displayed in real-time using Ajax. However, I am facing a ch ...

Exploring the different ways to compare data with the load() method

I am faced with a coding dilemma. I have two pages: data.php and index.html. The data.php page contains a single value (let's say 99), while the index.html page uses jQuery to dynamically load the data from data.php into a div called "data" every 2 se ...

Positioning divs in CSS can be achieved similarly to how table cells are structured in HTML

Once again today, I came across a familiar issue with CSS layouts. I want to have 5 divs in a horizontal row, each with different widths: 1: 60px, 2: 30%, 3: 40px, 4: *, 5: 100px Back in the day, tables were the way to go for layouts, but now they are c ...

``Can you help me with a tutorial for positioning text in front of an image using bootstrap?

How can I align text next to an image using Bootstrap? Here's an example of what I'm trying to achieve: this This is the code I currently have: <div id="picture"> <img src="img/preview.jpg"> </div&g ...

Dealing with the infuriating combo of Internet Explorer, Bootstrap, and Respond.js

Currently, I am in the process of reimagining my unfinished website using the Racket programming language instead of PHP, which I have grown to not enjoy. The challenge lies in the fact that I cannot simply copy and paste HTML code; Racket utilizes S-expr ...

Tips for ensuring a background image remains at the bottom of a webpage, covering the entire height

Is there a way to ensure all my pages have a consistent background like the one on my homepage? For instance, if you look at this page, you'll notice that the background doesn't match. Please let me know if you need me to provide the code, but yo ...

Minimizing the distance between radio label rows

I'm working on a radio button with a label spanning two lines, but the whitespace between the lines is too much. I need to reduce it. Here's my code example: <label for="reg-promo"> <input type="radio" name="promotion" id="registerPr ...

Shift a div towards the right edge of the navigation bar

**I am looking to reposition the Navbar_icon div to be on the right side of the navbar. The Navbar_icon contains icons for search, help, and sign in. ** Current layout of the navbar is shown in the image below: <https://i.sstatic.net/GGvBa.png> REA ...

Transmitting information securely and remotely between two online platforms

I own two websites and another at When a user clicks on something on example1.com, I want it to trigger a popup from example2.com. Then, I need to send some data back to example1.com using GET parameters and be able to detect it using jQuery or JavaScrip ...