CODEWITHSUNDEEP
javascriptphpjquery
herondale
herondale

Reputation: 789

Input value not getting picked up in jQuery?

header.php

 <div id="rename-content" class="hide">
    <form class="popover-form">
      <div class="popover-form-content">
        <div class="material-input-group stretched">
          <input type="text" placehold="Title" id="new-row-name">
        </div>
      </div>

      <div class="popover-footer pull-right">
        <button type="button" class="btn btn-default flat close-popover">Cancel</button>
        <button type="button" class="btn btn-default flat rename-row">Rename</button>   
      </div>
    </form>
  </div>

footer.php In $(document).ready()

        $('.edit-row-lbl').popover({
          title: "Rename Row",
          content: function(){
            return $("#rename-content").html();
          },
          html: true,
          placement: 'bottom',
          trigger: 'manual'
        });

        $('.edit-col-lbl, .edit-row-lbl').click(function()
        {
            if ($(this).hasClass('edit-col-lbl') )
            {
                to_rename = 'col';
                col_id_to_rename = $(this).data('col-id');
                $('.edit-col-lbl').popover('show');
            }
            else
            {
                to_rename = 'row';
                row_id_to_rename = $(this).data('row-id');
                $('.edit-row-lbl').popover('show');
            }

            $('.edit-col-lbl, .edit-row-lbl').not(this).popover('hide');
        });

        $('body').off().on('click', '.rename-row', function() 
        {
          var new_row_name = $('#new-row-name').val();

          console.log('Rename row clicked!');  
          console.log('New row name: ' + new_row_name);
          console.log('Row id to rename: ' + row_id_to_rename);

          $.ajax({
            type  : 'POST',
            url   : base_url + 'row/renameRow',
            data  : {
              'row_id' : row_id_to_rename,
              'row_name' : new_row_name
            },
            success: function(message) 
            {
              if (message == 'success') 
              {
                console.log('Renaming successful');
                window.location = window.location;
              }
              else
              {
                console.log('Error >> ' + message);
              }
            },
            error: function(xhr, error) 
            {
              console.log(xhr.responseText);
              console.log(error);
            }
          });
        });

In the console, the messages show up except that the row name is blank. I'm not getting any errors, just that the input is not getting picked up. When I try to print the value length it comes up as 1.

Upvotes: 0

Views: 1226

Answers (3)

herondale
herondale

Reputation: 789

I just had to do this:

new_row_name = $('.popover #new-row-name').val();

bind it to the class. Now it picks up the value. Thanks for the help!

Upvotes: 2

artemisian
artemisian

Reputation: 3106

The input is being picked up is just that the value is the empty string. 

<input type="text" placehold="Title" id="new-row-name">

If it would be not found in your console you would have seen 'New row name: undefined

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $('.edit-col-lbl, .edit-row-lbl').click(function()
        {
            if ($(this).hasClass('edit-col-lbl') )
            {
                to_rename = 'col';
                col_id_to_rename = $(this).data('col-id');
                $('.edit-col-lbl').popover('show');
            }
            else
            {
                to_rename = 'row';
                row_id_to_rename = $(this).data('row-id');
                $('.edit-row-lbl').popover('show');
            }

            $('.edit-col-lbl, .edit-row-lbl').not(this).popover('hide');
        });

        $('body').off().on('click', '.rename-row', function() 
        {
          var new_row_name = $('#new-row-name').val();

          console.log('Rename row clicked!');  
          console.log('New row name: ' + new_row_name);
                    
        });
});
</script>
</head>
<body>

<div id="rename-content" class="hide">
    <form class="popover-form">
      <div class="popover-form-content">
        <div class="material-input-group stretched">
          <input type="text" placehold="Title" id="new-row-name">
        </div>
      </div>

      <div class="popover-footer pull-right">
        <button type="button" class="btn btn-default flat close-popover">Cancel</button>
        <button type="button" class="btn btn-default flat rename-row">Rename</button>   
      </div>
    </form>
  </div>

</body>
</html>

Upvotes: 0

Taufik Nur Rahmanda
Taufik Nur Rahmanda

Reputation: 1969

It's because you have variable 'row_id_to_rename' that is unknown inside your $('body') on click function.

You have to declare that variable at the top, outside of those functions:

$(document).ready(function() {
    var row_id_to_rename; // <- put here!
    $('.edit-row-lbl').popover({
        ...
    });
    $('.edit-col-lbl, .edit-row-lbl').click(function() {
        ...
    });
    $('body').off().on('click', '.rename-row', function() {
        ...
    });
});

Upvotes: 0

Related Questions