3 Replies - 270 Views - Last Post: 08 May 2017 - 11:05 PM

#1 daymaker  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 11-February 17

Page refreshing on trying to update object through bootstrap modal

Posted 08 May 2017 - 09:23 AM

I've a dynamic button to edit some data for an object. Now, once the data is updated successfully, I'm throwing an alert to the user, stating that it was successfully done.

It was working fine until I changed my code a little to ensure it doesn't throw the alert - updated successfully!, multiple times.

But now, the object is not getting updated.

How do I fix this part?

Please note that toolName and toolURL are the 2 fields in my form, which will become mandatory if any one of the fields is filled out.
The code can be accessed by clicking on the JSFiddle link below.

JSFiddle

Is This A Good Question/Topic? 0
  • +

Replies To: Page refreshing on trying to update object through bootstrap modal

#2 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6342
  • View blog
  • Posts: 25,595
  • Joined: 12-December 12

Re: Page refreshing on trying to update object through bootstrap modal

Posted 08 May 2017 - 10:19 AM

Please provide the relevant code directly here in the forum, between code tags, not just as an external link.

Also, what changed between the working version and non-working version?
Was This Post Helpful? 0
  • +
  • -

#3 daymaker  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 11-February 17

Re: Page refreshing on trying to update object through bootstrap modal

Posted 08 May 2017 - 09:30 PM

<html>
	<head>
		<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/3.2.0/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style>
			.box {
			  height: 100px;
			  background-color: skyblue;
			  border: 1px solid black;
			  margin-top: 5px;
			}
		</style>
	</head>
        <body>
		<div class="container">

		</div>

		<button id="createData">Create divs</button>
		<!-- Modal -->

		<div class="modal fade" id="updateData" tabindex="-1" role="dialog" aria-labelledby="update-data" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
			  <!-- Modal Header -->
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
			    <span aria-hidden="true">&times;</span>
			    <span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">Update Data</h4>
			  </div>
			  <form id="updateForm">
			  <!-- Modal Body -->
			    <div class="modal-body">
			      <div class="form-group">
			        <label class="col-sm-4 control-label" for="companyName">Company Name</label>
				    <div class="col-sm-8">
					  <input type="text" class="form-control" id="companyName" placeholder="Company Name" required />
				    </div>
			      </div>
			      <div class="form-group">
				    <label class="col-sm-4 control-label" for="companyUrl">Website</label>
				    <div class="col-sm-8">
					  <input type="url" class="form-control" id="companyUrl" placeholder="Company URL" required />
				    </div>
				  </div>
				   <div class="form-group">
				    <label class="col-sm-4 control-label" for="newToolName">Tool Name</label>
				    <div class="col-sm-8">
					  <input type="text" class="form-control" id="newToolName" />
				    </div>
				  </div>
				   <div class="form-group">
				    <label class="col-sm-4 control-label" for="newToolUrl">Tool URL</label>
				    <div class="col-sm-8">
					  <input type="url" class="form-control" id="newToolUrl" />
				    </div>
				  </div>
			    </div>
			<!-- Modal Footer -->
			    <div class="modal-footer">
			      <button type="button" class="btn btn-default" data-dismiss="modal">
				    Close
			      </button>
			      <button class="btn btn-primary">
				    Save changes
			      </button>
			    </div>
			  </form>
		    </div>
		  </div>
		</div>
              <script>
		var myData = [{
		  company: "ABC",
		  url: "www.abc.com",
		  type: "internal"
		}, {
		  company: "CDE",
		  url: "www.cde.com",
		  type: "internal"
		}, {
		  company: "DEF",
		  url: "www.def.com",
		  toolName: "reportTool",
		  toolURL: "http://www.toolURL.com",
		  type: "external"
		}, {
		  company: "EFG",
		  url: "www.efg.com",
		  type: "internal"
		}, {
		  company: "FGH",
		  url: "www.fgh.com",
		  type: "external"
		}];

		$('#createData').click(function() {
		  createDisplay();
		});
		
		function createDisplay() {
		  $('.container').empty();
		  myData.forEach(function(obj) {
		  $('.container').append(
			$('<div>').addClass('box').append(
			$('<label>').text('Company Website: '),
			$('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company),
			obj.type == 'external' ? $('<br /><button>').addClass('edit-btn').text('Edit').attr({'data-toggle':'modal', 'data-target':'#updateData'}) : ''
			)
		  )
		  });
		}
		
		var objIndex;
		$(document).ready(function(){
			objIndex = '';
			$(document).on('click', '.edit-btn', function(){
			   var objIndex = $(this).parents('.parent').index();
			   
				var $toolName = $('#newToolName');
				var $toolURL = $('#newToolUrl');
				var $toolInputs = $($toolName).add($toolURL);
			
				$toolInputs.on('change', function(e) {
			
				  var toolName = $toolName.val();
				  var toolURL = $toolURL.val();
			
				  $toolInputs.prop('required', toolName || toolURL);
				  
				});
			});

			$('#updateForm').submit(function(e){
				var toolName = $toolName.val()
				var toolURL = $toolURL.val()
				
				var toolFilled = !!toolName && !!toolURL;
				var toolUnfilled = !toolName && !toolURL;
					  
				if (toolFilled || toolUnfilled) {
					updateData(objIndex);
					return false;
				}
				return false;
			})
		});

		function updateData(index) {
		  companyName = $('#companyName').val();
		  companyUrl = $('#companyUrl').val();
		  toolName = $('#newToolName').val();
		  toolURL = $('#newToolUrl').val();
		  var upObj = {
			  company: companyName,
			  url: companyUrl,
			  toolName: toolName,
			  toolURL: toolURL,
			  type: 'external'
		  }
		  myData.splice(index, 1, upObj);
		  createDisplay();
		  alert("Data updated successfully!');
		}
	</script>
	</body>
	
</html>



View Postandrewsw, on 08 May 2017 - 10:19 AM, said:

Please provide the relevant code directly here in the forum, between code tags, not just as an external link.

Also, what changed between the working version and non-working version?


I've added the complete code in the snippet.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6342
  • View blog
  • Posts: 25,595
  • Joined: 12-December 12

Re: Page refreshing on trying to update object through bootstrap modal

Posted 08 May 2017 - 11:05 PM

You haven't confirmed what you changed.

Are there errors in your browser's console?

Look at the alert line. The quotes are mismatched, which will be indicated as an error (or errors) in your browser's console.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1