Web page reloads when modifying html table after AJAX Query

Question

Here is the thing. I'm making a webpage that shows a table whose data comes from an SQL Table. The way that I load the table is by adding this just before the end tag:

<script>
  fillTaskTable();
  console.log("All laoded");
</script>

And my header is this:

<head>

  <meta charset="UTF-8">
  <title>Vista principal</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  <link href="css/bootstrap-theme.min.css" rel="stylesheet">  
  <link href="css/thestyle.css" rel="stylesheet">
  <script src="js/js_tools.js"></script>
  <script src="js/js_index.js"></script>

</head>

Now the function that is called is in js_index.js and here is the code:

function fillTaskTable(){

  var form = {
    task_header:"task_table_header",
    task_body: "task_table_body",
    proyect_list: "proyect_box"
  }; 

  var search = document.getElementById("search_box").value;
  var proyect = document.getElementById("proyect_box").value;
  var status = document.getElementById("status_box").value;
  var msgid = "msg_cont";  

  console.log("STATUS: " + status);

  jQuery.ajax({
        type: "POST",
        url: 'db_access/get_proyect_and_task_data.php',
        dataType: 'json',
        data: {functionname: 'get_allowed_tasks', args: [search, proyect, status]},
        success: function (obj) {
                if (obj.error != ""){
                  postMessage(obj.error,true,msgid);
                }
                else{

                  //Se llena la lista de proyectos
                  var html = "<option></option>";
                  for (i = 0; i < obj.plist.length; i++){
                html = html + "<option>" + obj.plist[i] + "</option>";
                  }
                  document.getElementById(form.proyect_list).innerHTML = html;

                  //Se llena la tabla dependiendo de si se pueden ver las tareas de todos los usuarios o no.
                  if (obj.rights.view_all){

                //Se llena el header.
                var col_titles = ["Tarea","Usuario","Proyecto","Inicio","Actualización","Estado","%"];
                var header = "<tr>";
                for (i = 0; i < col_titles.length; i++){
                  header = header + "<th>" + col_titles[i] + "</th>";
                }
                header = header + "</tr>";

                document.getElementById(form.task_header).innerHTML = header;

                //Se llena el resto de la tabla.
                var table = "";
                var color = "";
                for (i = 0; i < obj.list.length; i++){
                  table = table + "<tr onclick='descRequest(" + obj.list[i].keyid  + ")' ondblclick='loadTaskForEdition(" + obj.list[i].keyid + ")'>";
                  table = table + "<td>"  + obj.list[i].name + "</td>";
                  table = table + "<td>"  + obj.list[i].user + "</td>";
                  table = table + "<td>"  + obj.list[i].proyect + "</td>";
                  table = table + "<td>"  + obj.list[i].start_date + "</td>";
                  table = table + "<td>"  + obj.list[i].update_date + "</td>";

                  if (obj.list[i].status == "Finalizada"){
                      color = "finalizado";
                  }
                  else if (obj.list[i].status == "Pendiente"){
                    color = "pendiente";
                  }
                  else{
                    color = "frenado";
                  }

                  table = table + "<td><b class='" + color + "'>"  + obj.list[i].status + "</b></td>";
                  table = table + "<td>"  + obj.list[i].percent + "</td>";
                  table = table + "</tr>";
                }

                document.getElementById(form.task_body).innerHTML = table;              
                  }
                  else{

                //Se llena el header.
                var col_titles = ["Tarea","Proyecto","Inicio","Actualización","Estado","%"];
                var header = "<tr>";
                for (i = 0; i < col_titles.length; i++){
                  header = header + "<th>" + col_titles[i] + "</th>";
                }
                header = header + "</tr>";

                document.getElementById(form.task_header).innerHTML = header;

                //Se llena el resto de la tabla.
                var table = "";
                for (i = 0; i < obj.list.length; i++){
                  table = table + "<tr onclick='descRequest(" + obj.list[i].keyid  + ")' ondblclick='loadTaskForEdition(" + obj.list[i].keyid + ")'>";
                  table = table + "<td>"  + obj.list[i].name + "</td>";
                  table = table + "<td>"  + obj.list[i].proyect + "</td>";
                  table = table + "<td>"  + obj.list[i].start_date + "</td>";
                  table = table + "<td>"  + obj.list[i].update_date + "</td>";

                  if (obj.list[i].status == "Finalizada"){
                      color = "finalizado";
                  }
                  else if (obj.list[i].status == "Pendiente"){
                    color = "pendiente";
                  }
                  else{
                    color = "frenado";
                  }

                  table = table + "<td><b class='" + color + "'>"  + obj.list[i].status + "</b></td>";
                  table = table + "<td>"  + obj.list[i].percent + "</td>";
                  table = table + "</tr>";
                }

                document.getElementById(form.task_body).innerHTML = table;

                  }

                  console.log("DEBUG: " + obj.dbug);

                }
            }           
        });   

}

The page loads just fine. But now I want to add a search function. Which I figure I can do by simply changing the query that returns the table data. I tested the queries in console and they worked just fine. So I implmented it. But when I try it. It seem that the new table is loaded and then the page instantly reloads to its default (show all entries). I think this is what is happening for several reasons. First one of the filters is a select html object. I select something. And the when I click on the filter option the selection goes back to default (the first option), sencondly I added a console log when I first call the function at the end of the page and I get that message all the time (Should get it only once). And finally when I click the back button I get the table with the results correctly filtered. So My conclusion is that after the changes are made to the html table the page relaods. I've tested this beahaviour in both Chromiumn and Iceweasel and it is the same. So I know I'm doing somtheing wrong but I can't figure out what.

EDIT: At request I'm adding the html code for the filter bar:

      <div class="row">
    <div class="container-fluid">
        <div class="panel panel-info">
          <div class="panel-heading">
        <h1 class="panel-title"><b>Opciones de búsqueda en tarea</b></h1>
          </div>
          <div class="panel-body">
        <form class="form-inline">

          <input type="text" class="form-control" id="search_box" placeholder="Buscar en el Nombre o Descripción">

<!--          Fijarse acá para implementar la busqueda
          http://stackoverflow.com/questions/8982341/how-to-implement-the-an-effective-search-algorithm-when-using-php-and-a-mysql-da-->

          <div class="form-group">
             <label for="proyect_box"> Para el proyecto: </label>
             <select class="form-control" id="proyect_box">          
             </select>
          </div>          

          <div class="form-group">
             <label for="status_box"> Con el estado: </label>
             <select class="form-control" id="status_box">
            <option></option>
            <option>Pendiente</option>
            <option>Finalizada</option>
            <option>Frenada</option>             
             </select>
          </div>          

          <button class="btn btn-primary" onclick="fillTaskTable()"><b>Filtrar</b></button>

        </form>   
          </div>
        </div>
      </div>      
      </div>

When I filter? It is a onclick for a button: <button class="btn btn-primary" onclick="fillTaskTable()"><b>Filtrar</b></button> — aarelovich
– aarelovich, Commented Sep 22, 2014 at 10:58
is that a submit button? are you sure that no form submit happens? — Vipin CP
– Vipin CP, Commented Sep 22, 2014 at 10:59
Done. Technically there is no submit. I only use the bootstrap classes for aesthetic purposes. — aarelovich
– aarelovich, Commented Sep 22, 2014 at 11:04
Suggestion: If you are going to use jQuery at all, you should use it for the rest of your code too (and shorten it a lot): e.g. document.getElementById("search_box").value becomes $('#search_box').val() — iCollect.it Ltd
– iCollect.it Ltd, Commented Sep 22, 2014 at 11:10

aarelovich · Accepted Answer · 2014-09-22 15:04:57Z

0

Well I found the problem. And it was thanks to the comments that I received.

Everything started working as soon as I commented these two lines in the html code for the navigation bar:

<form class="form-inline">
</form>

Basically I can't call it a form, for whatever reason, but it behaves as expected when this is commented.

I was using this becuase I used it other webpages to get the look of all the elements in the same line. However I replaced the form for div and everything looked the same and now it works. Hopes this helps someone.

edited Sep 22, 2014 at 15:04

answered Sep 22, 2014 at 14:54

aarelovich

5,62415 gold badges70 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moob · Accepted Answer · 2014-09-22 15:13:24Z

0

The form is submitting when you click the button. (This is why your solution of removing the form element also works.)

You could update your function to prevent the form submission. Either by preventing the default event behaviour (event.preventDefault()) or by having your method return false. This example has both:

function fillTaskTable(event){
    event.preventDefault();
    /* do some stuff */
    return false;
};

answered Sep 22, 2014 at 15:13

Moob

16.5k1 gold badge40 silver badges54 bronze badges

1 Comment

aarelovich Over a year ago

Thanks. for the alternatives. But since I did not actually want a form (just the aesthetics) changing it to div seems better solution in this case.

Collectives™ on Stack Overflow

Web page reloads when modifying html table after AJAX Query

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related