Ajax jquery table data

@StudentJava · Регистрация: 24.01.2017

Author24 — интернет-сервис помощи студентам

Доброго дня, вопрос у меня такой, я имею таблицу получаемую из результатов запроса ajax таблица появляется, и даже данные добавляются в нее, но суть задания - при клике на строку - она должна исчезать. Она у меня, как вы поняли не исчезает, более того, у меня в html коде не отображаются добавленные данные...

Javascript

$.ajax({
                    type: "POST",
                    url:'/Main',
                    data: $("#mainForm").serialize(),
                    success: function(data){
                        var row = '<tr id = "hide"><a class="false"><th>'+ data.a +'</th><th>' +data.b + '</th><th>' + data.c + '</th>';
                        if (data.sqFirst == null){
                            row += '<a colspan="2">'+'discriminant is less than zero'+'</a></th><th>';
                        }else{
                            row +='<th>' + data.sqFirst +'</th><th>' +data.sqSecond+  '</th></tr>';
                        }
                        console.log(row);
                        $(row).appendTo("#myTable");
                        $("tr:nth-child(odd)").addClass("odd");
 
                    },
                    error: function(data){
                        alert("some problem");
                    }
                })
                ;

подскажите пожалуйста что я не так делаю.

Добавлено через 43 секунды
ах да, забыл скрипт для сокрытия строки

Javascript

<script type="text/javascript">
        $("a.false").click(function(e){
            $(".hide").hide();
            e.preventDefault();
        });
    </script>

@Уф · 06.03.2017, 09:53

Javascript

$('#myTable').on('click', "a.false", function(e){
            $(".hide").hide();
            e.preventDefault();
});

делигируй

@StudentJava · 06.03.2017, 10:23 **[ТС]**

Уф, да, спасибо но .. увы, у меня все таки ощущение, что это из за того... эм, что страница не видит разметку html я не знаю... эм, наверное это как то связанно с ajax

@Уф · 06.03.2017, 10:25

не понял, мой код работает или нет?

@StudentJava · 06.03.2017, 10:27 **[ТС]**

Уф, эм, нет

@Уф · 06.03.2017, 10:32

надо смотреть не "Просмотр кода страницы" а просто "Просмотреть код", что там?

Добавлено через 1 минуту
и что должна делать твоя ссылка? я вообще не вижу где элементы с классом hide

@StudentJava · 06.03.2017, 10:35 **[ТС]**

Уф, а... там все ок, строчки добавились, но увы они не скрываются при клике

Добавлено через 2 минуты
хм, куда то делся тег <a>

@StudentJava · 06.03.2017, 10:40 **[ТС]**

эм, я использую тут тег не для ссылки, а как идентификатор... хотя судя по вопросу... я лажаю?

@StudentJava · 06.03.2017, 10:46 **[ТС]**

да, наверное это была плохая идея. заменил тег a на p

@StudentJava · 06.03.2017, 10:49 **[ТС]**

заменил, но увы ... результат нулевой, чую - где то рядом успех... только не знаю в какую сторону за ним метнуться )

@Уф · 06.03.2017, 11:21

не айди хайд а класс хайд. и в разметке где у тебя она будет показываться если она вне тега ячейки?

Javascript

1 2	success: function(data){ var row = '<tr class = "hide"><td><a class="false">hide</a></td>...

и в коде тогда уж

Javascript

<script type="text/javascript">
        $("a.false").click(function(e){
            $(this).parent().parent().hide();
            e.preventDefault();
        });
    </script>

@StudentJava · 06.03.2017, 11:29 **[ТС]**

Уф, угу, согласен с тегом а я чего то совсем не подумал.... сейчас у меня такой вариант

Javascript

1	var row = '<p class="false"><tr class = "hide"><th>'+ data.a +'</th><th>' +data.b + '</th><th>' + data.c ....

так лучше эм.. с логической точки зрения?

@Уф · 06.03.2017, 11:43

нет. у тебя ошибочная разметка, зачем ты абзац пихаешь в таблицу, а потом в него строку? в таблице должны быть только tr внутри которых td а там уже внутри любое содержимое

@StudentJava · 06.03.2017, 11:55 **[ТС]**

ну, в общем я тупой....не получается ( уже заполнил табличку от руки... все равно не получается

PHP/HTML

<div id = "main">
 
  <div class = "arithmetic">
    <form id = "mainForm" action="/Main" method="post">
      <script>check()</script>
      <p>Please input your coeff.</p>
      <input type="text" class="text" id = "a" name= "a" placeholder="a" >
      x<sup>2</sup> +
      <input type="text" class="text" id = "b" name= "b" placeholder="b" >
      x +
      <input type="text" class="text"  id ="c" name= "c" placeholder="c" >
      = 0
      <p><input type="submit" class="Button" id="myButton" id = "myButton" value="Enter"></p>
    </form>
  </div>
 
  <div class  = "result">
    <script type="text/javascript">
        $("p.false").click(function(e){
            alert("ee");//try test but have no result
            $(this).parent().parent().hide();
            e.preventDefault();
        });
    </script>
 
    <table id="myTable" frame="void" cellpadding="10" border="1" width="150%">
    <caption>Table results of request</caption>
      <tr>
        <th>coeff x<sup>2</sup></th>
        <th>coeff x</th>
        <th>free coeff</th>
        <th>first sq</th>
        <th>second sq</th>
      </tr>
      <p class="false"><tr class = "hide"><th>1.0</th><th>2.0</th><th>3.0</th><th colspan="2">discriminant is less than zero</th></tr></p>
      <p class="false"><tr class = "hide"><th>2.0</th><th>3.0</th><th>4.0</th><th colspan="2">discriminant is less than zero</th></tr></p>
      <p class="false"><tr class = "hide"><th>1.0</th><th>2.0</th><th>3.0</th><th colspan="2">discriminant is less than zero</th></tr></p>
      <p class="false"><tr class = "hide"><th>2.0</th><th>3.0</th><th>4.0</th><th colspan="2">discriminant is less than zero</th></tr></p>
    </table>
  </div>
 
</div>
 
</body>
</html>

Добавлено через 35 секунд
Уф, да?... ммм, оке, сейчас

Добавлено через 45 секунд
ну, я тогда вообще могу отказаться от тегов p и а в принципе то они.. вроде как мне и совсем тут не нужны

Добавлено через 9 минут
Уф, а так? правда все равно не работает

PHP/HTML

<div class  = "result">
    <script type="text/javascript">
        $("tr.hide").click(function(e){
            alert("ee");
            $(this).parent().parent().hide();
            e.preventDefault();
        });
    </script>
 
    <table id="myTable" frame="void" cellpadding="10" border="1" width="150%">
    <caption>Table results of request</caption>
      <tr>
        <td>coeff x<sup>2</sup></td>
        <td>coeff x</td>
        <td>free coeff</td>
        <td>first sq</td>
        <td>second sq</td>
      </tr>
      <tr class = "hide"><td>2.0</td><td>3.0</td><td>4.0</td><td colspan="2">discriminant is less than zero</td></tr>
      <tr class = "hide"><td>1.0</td><td>2.0</td><td>3.0</td><td colspan="2">discriminant is less than zero</td></tr>
      <tr class = "hide"><td>33.0</td><td>33.0</td><td>33.0</td><td colspan="2">discriminant is less than zero</td></tr>
    </table>
  </div>

@Уф · 06.03.2017, 11:55

PHP/HTML

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id = "main">
 
  <div class = "arithmetic">
    <form id = "mainForm" action="/Main" method="post">
      <p>Please input your coeff.</p>
      <input type="text" class="text" id = "a" name= "a" placeholder="a" >
      x<sup>2</sup> +
      <input type="text" class="text" id = "b" name= "b" placeholder="b" >
      x +
      <input type="text" class="text"  id ="c" name= "c" placeholder="c" >
      = 0
      <p><input type="submit" class="Button" id="myButton" id = "myButton" value="Enter"></p>
    </form>
  </div>
 
  <div class  = "result">
<script type="text/javascript">
$(document).ready(function() { //код надо писать ниже элементов, или заворачивать в documnetr ready
    $('#myTable').on('click', "p.false", function(e){
                $(this).parent().parent().hide();
                e.preventDefault();
    })
});
</script>
 
    <table id="myTable" frame="void" cellpadding="10" border="1" width="150%">
    <caption>Table results of request</caption>
      <tr>
        <th>hide</th>
        <th>coeff x<sup>2</sup></th>
        <th>coeff x</th>
        <th>free coeff</th>
        <th>first sq</th>
        <th>second sq</th>
      </tr>
      <tr class = "hide"><td><p class="false">hide</p><td>1.0</td><td>2.0</td><td>3.0</td><td colspan="2">discriminant is less than zero</td></tr>
      <tr class = "hide"><td><p class="false">hide</p><td>2.0</td><td>3.0</td><td>4.0</td><td colspan="2">discriminant is less than zero</td></tr>
      <tr class = "hide"><td><p class="false">hide</p><td>1.0</td><td>2.0</td><td>3.0</td><td colspan="2">discriminant is less than zero</td></tr>
      <tr class = "hide"><td><p class="false">hide</p><td>2.0</td><td>3.0</td><td>4.0</td><td colspan="2">discriminant is less than zero</td></tr>
    </table>
  </div>
 
</div>
 
</body>
</html>

@StudentJava · 06.03.2017, 12:23 **[ТС]**

Уф, я конечно Вас достал, понимаю, меня бы я то же достал ...

PHP/HTML

<div class  = "result">
    <script type="text/javascript">
        $(document).ready(function() {
            $("tr.hide").click(function(e){
                alert("ee");
                $(this).parent().parent().hide();
                e.preventDefault();
            });
        });
    </script>
 
    <table id="myTable" frame="void" cellpadding="10" border="1" width="150%">
    <caption>Table results of request</caption>
      <tr>
        <td>coeff x<sup>2</sup></td>
        <td>coeff x</td>
        <td>free coeff</td>
        <td>first sq</td>
        <td>second sq</td>
      </tr>
      <tr class = "hide"><td>2.0</td><td>3.0</td><td>4.0</td><td colspan="2">discriminant is less than zero</td></tr>
      <tr class = "hide"><td>1.0</td><td>2.0</td><td>3.0</td><td colspan="2">discriminant is less than zero</td></tr>
      <tr class = "hide"><td>33.0</td><td>33.0</td><td>33.0</td><td colspan="2">discriminant is less than zero</td></tr>
    </table>
  </div>
 
</div>

очень красиво! и даже пропадает, не я правда не знал про $(document).ready(function() { //код надо писать ниже элементов, или заворачивать в documnetr ready
только теперь у меня пропадает (Наконец то хоть что то у меня пропадает!!!) вся таблица.. а надо то только одной поле - которое выбрал

Добавлено через 3 минуты
не поле! а строка должна, а то неправильно написал то

Добавлено через 18 минут
Уф,
спасибо тебе большое! Дорогой человек )))

Javascript

<script type="text/javascript">
        $(document).ready(function() {
            $('#myTable').on('click', "tr.hide", function(e){
                $(this).closest("tr").remove();
                $("tr:nth-child(odd)").addClass("odd");
                e.preventDefault();
            });
        });
    </script>

спасло мир )

@Уф · 06.03.2017, 12:31

все разобрался? или что-то еще?

@StudentJava · 06.03.2017, 12:35 **[ТС]**

Уф, нет, осталось только сказать еще раз спасибо - и отправить положительных эмоций в космос )))

@Уф · 06.03.2017, 12:36

Javascript

1	$(this).parent().parent().hide();

Смысл этой конструкции, что ты жмешь по тегу <a> на который указывает внутри события переменная $(this), потом с помощью parent() ты два раза поднимаешься наверх, т.е. сначала это будет тэг ячейки td и еще раз на верх это тег tr строки в которой стоит этот элемент.
Если ты обработчик вешаешь на строку, то и closest не надо использовать, должно работать просто

Javascript

1	$(this).remove();

@StudentJava · 06.03.2017, 13:01 **[ТС]**

Уф, ооооо, спасибо, шиикарное объяснение.
да проверил с

Javascript

1	$(this).remove();

тоже работает

Добавлено через 14 минут
Уф, не, я не шучу, но у меня опть трабла... я хз, что я такого сделал, но в файле check.js

Javascript

/**
 * Created by dima on 03.03.17.
 */
function check(){
    $(document).ready(function() {
        var globalIsValid = false;
 
        $(".arithmetic").on("keypress keyup blur",function (e) {
            $(this).val($(this).val().replace(/[^0-9,-\.]/g,''));
            if ((e.which != 46 || $(this).val().indexOf('.') != -1) && (e.which < 48 || e.which > 108) && (e.which > 110) ) {
                event.preventDefault();
            }
        });
 
        $('#myButton').click(function(e) {
            var isValid = true;
            $('input[type="text"]').each(function() {
                if ($.trim($(this).val()) == '') {
                    isValid = false;
                    $(this).css({
                        "border": "1px solid red",
                        "background": "#FFCECE"
                    });
                }
                else {
                    $(this).css({
                        "border": "",
                        "background": ""
                    });
                    isValid = true;
                }
            });
            if (isValid == false){
                e.preventDefault();
            }
            globalIsValid = isValid;
        });
 
        $( "#mainForm" ).submit(function(e) {
 
            e.preventDefault();
 
            if (globalIsValid){
 
                $.ajax({
                    type: "POST",
                    url:'/Main',
                    data: $("#mainForm").serialize(),
                    success: function(data){
                        var row = '<tr class = "hide"><td>'+ data.a +'</td><td>' +data.b + '</td><td>' + data.c + '</td>';
                        if (data.sqFirst == null){
                            row += '<td colspan="2">'+'discriminant is less than zero'+'</td></tr>';
                        }else{
                            row +='<td>' + data.sqFirst +'</td><td>' +data.sqSecond+  '</td></tr>';
                        }
                        console.log(row);
                        $(row).appendTo("#myTable");
                        $("tr:nth-child(odd)").addClass("odd");
 
                    },
                    error: function(data){
                        alert("some problem");
                    }
                })
                ;
 
                $("#mainForm").trigger("reset");//form clear after submitting
            }
        });
    });
}

у меня была часть кода

Javascript

 $(".arithmetic").on("keypress keyup blur",function (e) {
            $(this).val($(this).val().replace(/[^0-9,-\.]/g,''));
            if ((e.which != 46 || $(this).val().indexOf('.') != -1) && (e.which < 48 || e.which > 108) && (e.which > 110) ) {
                event.preventDefault();
            }
        });

которая достаточно успешно позволяла мне запрещать к вводу все кроме цифр, и я добавил еще чтоб он позволял вводить знак минус... и теперь оно не работает, можно навскидку сказать что не так?

Добавлено через 4 минуты
нееее, все разобрался ))) вводятся только русские буквы все ок. ещше раз спасибо большое )

@StudentJava 0 / 0 / 0 Регистрация: 24.01.2017 Сообщений: 37
	06.03.2017, 10:23 [ТС]	3
	Уф, да, спасибо но .. увы, у меня все таки ощущение, что это из за того... эм, что страница не видит разметку html я не знаю... эм, наверное это как то связанно с ajax Миниатюры 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	06.03.2017, 10:25	4
	не понял, мой код работает или нет? 0

@StudentJava 0 / 0 / 0 Регистрация: 24.01.2017 Сообщений: 37
	06.03.2017, 10:27 [ТС]	5
	Уф, эм, нет 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	06.03.2017, 10:32	6
	надо смотреть не "Просмотр кода страницы" а просто "Просмотреть код", что там? Добавлено через 1 минуту и что должна делать твоя ссылка? я вообще не вижу где элементы с классом hide 1

@StudentJava 0 / 0 / 0 Регистрация: 24.01.2017 Сообщений: 37
	06.03.2017, 10:35 [ТС]	7
	Уф, а... там все ок, строчки добавились, но увы они не скрываются при клике Добавлено через 2 минуты хм, куда то делся тег <a> 0

@StudentJava 0 / 0 / 0 Регистрация: 24.01.2017 Сообщений: 37
	06.03.2017, 10:40 [ТС]	8
	эм, я использую тут тег не для ссылки, а как идентификатор... хотя судя по вопросу... я лажаю? Миниатюры 0

@StudentJava 0 / 0 / 0 Регистрация: 24.01.2017 Сообщений: 37
	06.03.2017, 10:46 [ТС]	9
	да, наверное это была плохая идея. заменил тег a на p 0

@StudentJava 0 / 0 / 0 Регистрация: 24.01.2017 Сообщений: 37
	06.03.2017, 10:49 [ТС]	10
	заменил, но увы ... результат нулевой, чую - где то рядом успех... только не знаю в какую сторону за ним метнуться ) Миниатюры 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	06.03.2017, 11:43	13
	нет. у тебя ошибочная разметка, зачем ты абзац пихаешь в таблицу, а потом в него строку? в таблице должны быть только tr внутри которых td а там уже внутри любое содержимое 1

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	06.03.2017, 12:31	17
	все разобрался? или что-то еще? 1

@StudentJava 0 / 0 / 0 Регистрация: 24.01.2017 Сообщений: 37
	06.03.2017, 12:35 [ТС]	18
	Уф, нет, осталось только сказать еще раз спасибо - и отправить положительных эмоций в космос ))) 0