search

ahsanjr / jquery-datatables-editable

Automatically exported from code.google.com/p/jquery-datatables-editable
0 stars 0 forks source link

Add form does not show up properly if fired from a subsequent datatable (in a future event) #70

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. running loadtable.php produces a page with a selection box (options are 
various datatables picked from a mysql server)

Load Tasks Table
work      V Submit

(besides work, other tables are play, sleep etc.) At this point, no datatables 
is selected/shown.

2. selecting/submitting on work reveals the work datatable below it:

Load Tasks Table
work  V Submit

work
-- + Show 100 ▼ entries Add.. . Remove                
* taskid   state        owner       category
O 1    Today        Francis     productivity
O 55561    Active               Francis         requirement

etc.

3. Clicking on Add in the datatable  produces this form:
Add a new task x
Cancel Ok

i.e. missing other form details

What is the expected output? What do you see instead?

Clicking on Add should produce this form (this is from the same datatable but 
without the 1st selection box i.e. edg.php?Tablename=play:

 Add a new task x
state
Active  V
owner
Someone V
category(s)
requirement V
task
[text box]
taskdetails
[text box]

What version of the product are you using? On what operating system?
2.0.2

Please provide any additional information below.

The problem might be due to the way I'm doing the live setup i.e. not 
initializing the needed events that's in the datatable code? i.e. 

loadtable.php script:

<html> 
<head> 
  <!-- Reference the theme's stylesheet on the Google CDN -->
<link 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui
.css"
        type="text/css" rel="Stylesheet" />
<style type="text/css" media="screen">
            @import "/media/css/demo_page.css";
            @import "/media/css/demo_table_jui.css";
            @import "/media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
</style>

  <!-- Reference jQuery and jQuery UI from the CDN. Remember
       that the order of these two elements is important -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
        <script src="/js/jquery.validate.js" type="text/javascript"></script>
        <script src="/js/TESTjquery.dataTables.editable.js" type="text/javascript"></script>

  <script src="/js/jquery.form.js"></script>
 <script type="text/javascript">
    $(document).ready(function() {

    $('#myForm').live(
      "submit", 
      function(event) { // catch the form's submit event
        form = $(this);
  $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            //   alert("Thank you again for your comment!"); 
            $('#created').html(response); // update the DIV
        }
    });
                    event.preventDefault();

});

$('.dataTable tbody td img').live( 'click',
  function() { return false; })

    });   // jq doc ready
    </script>
</head>
<body>

<form  id="myForm" action="edg.php" method="GET" enctype="multipart/form-data">
<h3>Load Tasks Table<h3>
<h4>
<?php 

function select_menu($name, $options, $selected) {
    $list = '';
    foreach ($options as $value => $text) {
        $is_selected = $value == $selected ? ' selected="selected"' : '';
        $list .= "  <option value=\"$value\"$is_selected>$text</option>\n";

    }
    return "<select name='$name' id='$name'>\n$list</select>\n";
} 

require 'admin/connect.php';
$sql = "SELECT tablename FROM tasksmaster order by tablename";
$options = array(); 

$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
    $options[$row['tablename']] = $row['tablename']; 
//    $return = $row['tablename'];
//    echo "<option>" . $return . "</option>";
}
//$selected = $selectedTable; 
$selected = $selectedTable; 

echo select_menu('Tablename', $options, $selected); 

$_SESSION['Tablename'] = $selected;

//     echo "<option value='" .$selectedTable. "'selected = \"selected\" >" . 
$return . "</option>";
//echo "</select>";
//

?>

  <input type="submit" value=Submit name="submit" />
</form>

<div id="created">
</div>
</body>
</html>

Should I initialize the Add (click?) in the above? How? BTW, if the event does 
not need to show any form, it works i.e. the "Delete" works.

Thanks,
FRancis

Original issue reported on code.google.com by yfn...@gmail.com on 29 Sep 2011 at 9:28

GoogleCodeExporter commented 9 years ago 
Hi Francis,

Is there a change to give me some online example. It is hard to follow this 
example just by looking at the code?

Thanks,
Jovan

Original comment by joc...@gmail.com on 29 Sep 2011 at 9:51

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
Hi,

You will need to simplify your code, because some code that is not related to 
the DataTables clean this form. Once it is shown correctly, then I got blank 
form, and sometimes this blank form is duplicated however I cannot track what 
is causing this. I have tried to debug it bug I have got lost. Something in 
your code reloads table and clean the form.

It is not related directly to make editable plugin because it only calls 
$("#addNewRowForm").dialog('open') so there is something else in your code that 
clear the elements from your form.

Jovan

Original comment by joc...@gmail.com on 1 Oct 2011 at 10:16

GoogleCodeExporter commented 9 years ago 
OK, wilco.

Original comment by yfn...@gmail.com on 4 Oct 2011 at 2:34

GoogleCodeExporter commented 9 years ago 
I will close this issue. If you can find a problem that is directly related to 
this plugin please open the new one.

Thanks,
Jovan

Original comment by joc...@gmail.com on 6 Oct 2011 at 11:00