添加时动态数据消失

Posted 2023-05-09

【中文标题】添加时动态数据消失

【英文标题】：Dynamic data disappearing on adding

【发布时间】：2017-09-17 10:50:37

【问题描述】：

我有一个添加外部用户的表单，默认情况下，其中 2 个字段不是必需的。但是，仅当填写其中一个字段时，它们才成为强制性的。单击应用按钮时，我的表单内容用于生成一个动态 div，该 div 将附加到“div.container”。但是，它只是在添加后立即消失。

这可能是什么原因？

代码如下：

var currentPageNo = 0; // Keep track of currently displayed page


// Select button that is descendant of userList
$('#userList .prev-btn').click(function() 
    userList(currentPageNo-10);
);
$('#userList .next-btn').click(function() 
    userList(currentPageNo+10);
);
$('#adminList .prev-btn').click(function() 
    adminList(currentPageNo-10);
);
$('#adminList .next-btn').click(function() 
    adminList(currentPageNo+10);
);

function userList(pageNo) 
    var resType="userList";
    createTable(resType,pageNo);


function adminList(pageNo) 
    var resType="adminList";
    createTable(resType,pageNo);


function createTable(resType, pageNo) 
    // Update global variable
    currentPageNo = pageNo; 
    // Set visibility of the correct "prev" button:
    $('#' + resType + ' .prev-btn').toggle(pageNo > 0);
    // Ask one record more than needed, to determine if there are more records after this page:
    $.getJSON("https://api.randomuser.me/?results=11&resType="+resType + "&pageIndex=" + pageNo, function(data) 
        var $table = $('#' + resType + ' table');
        $('tr:has(td)', $table).empty();
        // Check if there's an extra record which we do not display, 
        // but determines that there is a next page
        $('#' + resType + ' .next-btn').toggle(data.results.length > 10);
        // Slice results, so 11th record is not included:
        data.results.slice(0, 10).forEach(function (record, i)  // add second argument for numbering records
            var json = JSON.stringify(record);
            $table.append(
                $('<tr>').append(
                    $('<td>').append(
                        $('<input>').attr('type', 'checkbox')
                                    .addClass('selectRow')
                                    .val(json),
                        (i+1+pageNo) // display row number
                    ),
                    $('<td>').append(
                        $('<a>').attr('href', record.picture.thumbnail)
                                .addClass('imgurl')
                                .attr('target', '_blank')
                                .text(record.name.first)
                    ),
                    $('<td>').append(record.dob)
                )
            );
        );
        // Show the prev and/or buttons
        
        
    ).fail(function(error) 
        console.log("**********AJAX ERROR: " + error);
    );            


var savedData = []; // The objects as array, so to have an order.

function saveData()
    var errors = [];
    // Add selected to map
    $('input.selectRow:checked').each(function(count) 
        // Get the JSON that is stored as value for the checkbox
        var obj = JSON.parse($(this).val());
        // See if this URL was already collected (that's easy with Set)
        if (savedData.find(record => record.picture.thumbnail === obj.picture.thumbnail)) 
            errors.push(obj.name.first);
         else 
            // Append it
            savedData.push(obj);
        
    );
    refreshDisplay();
    if (errors.length) 
        alert('The following were already selected:\n' + errors.join('\n'));
    


function refreshDisplay() 
    $('.container').html('');
    savedData.forEach(function (obj) 
        // Reset container, and append collected data (use jQuery for appending)
        $('.container').append(
            $('<div>').addClass('parent').append(
                $('<label>').addClass('dataLabel').text('Name: '),
                obj.name.first + ' ' + obj.name.last,
                $('<br>'), // line-break between name & pic
                $('<img>').addClass('myLink').attr('src', obj.picture.thumbnail), $('<br>'),
                $('<label>').addClass('dataLabel').text('Date of birth: '),
                obj.dob, $('<br>'),
                $('<label>').addClass('dataLabel').text('Address: '), $('<br>'),
                obj.location.street, $('<br>'),
                obj.location.city + ' ' + obj.location.postcode, $('<br>'),
                obj.location.state, $('<br>'),
                $('<button>').addClass('removeMe').text('Delete'),
                $('<button>').addClass('top-btn').text('Swap with top'),
                $('<button>').addClass('down-btn').text('Swap with down')
            )	
        );
    )
    // Clear checkboxes:
    $('.selectRow').prop('checked', false);
    handleEvents();


function logSavedData()
    // Convert to JSON and log to console. You would instead post it
    // to some URL, or save it to localStorage.
    console.log(JSON.stringify(savedData, null, 2));


function getIndex(elem) 
    return $(elem).parent('.parent').index();


$(document).on('click', '.removeMe', function() 
    // Delete this from the saved Data
    savedData.splice(getIndex(this), 1);
    // And redisplay
    refreshDisplay();
);

/* Swapping the displayed articles in the result list */
$(document).on('click', ".down-btn", function() 
    var index = getIndex(this);
    // Swap in memory
    savedData.splice(index, 2, savedData[index+1], savedData[index]);
    // And redisplay
    refreshDisplay();
);

$(document).on('click', ".top-btn", function() 
    var index = getIndex(this);
    // Swap in memory
    savedData.splice(index-1, 2, savedData[index], savedData[index-1]);
    // And redisplay
    refreshDisplay();
);
    
/* Disable top & down buttons for the first and the last article respectively in the result list */
function handleEvents() 
    $(".top-btn, .down-btn").prop("disabled", false).show();
    $(".parent:first").find(".top-btn").prop("disabled", true).hide();
    $(".parent:last").find(".down-btn").prop("disabled", true).hide();


$(document).ready(function()
    $('#showExtForm-btn').click(function()
        $('#extUser').toggle();
    );
	
	var $dob = $('#dob');
	var $myImg = $('#myImg');
	var $formData = $($dob).add($myImg);
	
	$formData.on('change', function(e) 

	  var dob = $dob.val();
	  var myImg = $myImg.val();
	  
	  $formData.prop('required', dob || myImg);
	  
	);
	
    $("#extUserForm").submit(function(e)
        var dob = $dob.val();
		var myImg = $myImg.val();
		
		var dataFilled = !!dob && !!myImg;
		var dataUnfilled = !dob && !myImg;
			  
		if (toolFilled || toolUnfilled) 
			addExtUser();
			return true;
		
		return false;
   );
);

function addExtUser() 
    var extObj = 
        name: 
            title: "mr", // No ladies? :-)
            first: $("#name").val(),
            // Last name ?
        ,
        dob: $("#dob").val(),
        picture: 
            thumbnail: $("#myImg").val()
        ,
        location:  // maybe also ask for this info?
        
    ;
    savedData.push(extObj);
    refreshDisplay(); // Will show some undefined stuff (location...)

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#userList" onclick="userList(0)">User List</button>
<button class="btn btn-primary btn-sm" onclick="logSavedData()">Get Saved Data</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#adminList" onclick="adminList(0)">User Admin</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#extUser">Open External Form</button>

  <div class="modal fade" id="userList" role="dialog">
    <div class="modal-dialog modal-lg">
    
      
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">User List</h4>
        </div>
        <div class="modal-body">
          <div class="table-responsive">
              <table class="table table-bordered table-hover" id="datatable">
                <tr>
                    <th>Select</th>
                    <th>Name</th>
                    <th>DOB</th>
                </tr>
            </table>
          </div>
          <div class="row">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button>
            </div>

            <div class="col-sm-4">
                <button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button>
            </div>
        </div>
            <hr/>
        <div class="row">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button>
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button>
            </div>
        </div>
        <br />
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="adminList" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Admin List</h4>
        </div>
        <div class="modal-body">
          <div class="table-responsive">
              <table class="table table-bordered table-hover" id="datatable">
                <tr>
                    <th>Select</th>
                    <th>Name</th>
                    <th>DOB</th>
                </tr>
            </table>
          </div>
          <div class="row">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button>
            </div>

            <div class="col-sm-4">
                <button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button>
            </div>
        </div>
            <hr/>
        <div class="row">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button>
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button>
            </div>
        </div>
        <br />
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="extUser" role="dialog">
    <div class="modal-dialog modal-lg">
    
      <!-- External User-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add External User</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" id="extUserForm">
            <div class="form-group">
              <label class="control-label col-sm-3" for="name">Name:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="name" name="name" required>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-3" for="myImg">Image:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="myImg" name="myImg">
              </div>
            </div>
                                            
            <div class="form-group">
              <label class="control-label col-sm-3" for="dob">DOB:</label>
              <div class="col-sm-8">
                <input type="date" class="form-control" id="dob" name="dob">
              </div>
            </div>
            <hr />
            <div class="form-group">        
              <div class="col-sm-offset-3 col-sm-3">
                <button class="btn btn-primary btn-sm">Submit</button>
              </div>
              <div class="col-sm-3">
                <button type="reset" class="btn btn-primary btn-sm">Reset</button>
              </div>
              <div class="col-sm-3">
                <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button>
              </div>
            </div>
          </form>
        </div> 
      </div>
    </div>
  </div>

<div class="container"></div>

【问题讨论】：

如果您希望有人调试这么多代码，您至少应该确保您的 sn-p 确实重现了问题。

是的，抱歉...下次我会保留它...

【参考方案1】：

主要问题在于您拥有的$("#extUserForm").submit 回调：

return true;

这将使默认的表单提交效果生效，即页面将导航到表单的 action 属性，或者如果没有（如您的情况），页面将重新加载。这就是为什么您会在页面重新加载之前短暂地看到页面上的条目，并且一切都从头开始。

所以，你必须坚持：

return false;

注意：变量名不匹配：dataFilled 与 toolFilled 不同，...与 dataUnfilled 相同。

【讨论】：

我需要帮助来快速提问。你能看看吗？ ***.com/questions/43537688/…