Custom Button - Flask

lausellduane

Hi,

I have a to-do list web app using flask that pulls and send data to a mongodb. I'm trying to figure out a way to implement a add new record button using a custom button to go to the add_record route but I don't find a way to do this.

app.py

@app.route("/add_record/", methods=['GET', 'POST'])

//base.html

      $(document).ready(function() {
        $("#todo").DataTable({
          dom: 'Bfrtip',
          buttons: [
            {
                text: 'Add New',
                action: function ( e, dt, node, config ) {

                    #window.location = '/add_record/';    #I tried using this but it did not worked

                    });
                }
            },
            {
              extend: 'collection',
              text: 'Export',
              buttons: [
                  'copyHtml5',
                  'excelHtml5',
                  'csvHtml5',
                  'pdfHtml5',
                  'print'
              ]
            }
          ]
        });
      });

      $(document).ready(function() {
        $('input').addClass('form-control')
      });
  

wblakenc

When I try:

action: function ( e, dt, node, config ) {                  
                        
window.location = '/add_record/';
}

the page reloads as expected. It looks like you are doing this in python (I am not an expert) but do you need the # before window.location?

lausellduane

You are right I'm using python. No it doesn't I forgot to delete the # as I was trying to figure out how to highlight where the code location as I didn't know the triple back ticks trick sorry for that.

I know how to reference the flask route in a html a tag like the edit and delete buttons in my action column in the attached image.

I'm trying to implement this..

...in the Add New custom button so it looks neat like the Export button.

wblakenc

I am not 100% I follow what the issue is or what you are trying to do. It looks like when you click "Add Record" you want to direct the browser to a new screen for data entry, right? But instead, what is happening? The action event doesn't fire (i.e. the window does not change locations)?

lausellduane

Maybe using window is not the way to go i just saw someone using it like that in a thread here. I don't know if you are acquainted with flask but when you click the button its supposed send a request to the url route that contains my python add_record function and display a form for data entry like the one in the attached image. What i need to know is how to give the url route to the custom button like I did for the delete and edit buttons.

kthorngren

You have syntax errors in your code. Instead of using # for comments you should use //. I have the same problem as I use Python along with Datatables and mix up my comments all the time But it sounds like you already know this is wrong.

Aside from # you still have syntax issues. You have this for your buttons code:

          buttons: [
            {
                text: 'Add New',
                action: function ( e, dt, node, config ) {
 
                    #window.location = '/add_record/';    #I tried using this but it did not worked
 
                    });  <<< the }); are not needed here
                }
            },
            {
              extend: 'collection',
              text: 'Export',
              buttons: [
                  'copyHtml5',
                  'excelHtml5',
                  'csvHtml5',
                  'pdfHtml5',
                  'print'
              ]

Remove the line I highlighted and see if it works. There should be a console log message in your browser indicating this syntax error.

Kevin

lausellduane

Glad to know I'm not the only one that gets the comments mixed up
Unfortunately, It did not work. I think I'm gonna get better acquainted with how to reference a url in javascript.