How to clear the # from the url after loading ajax?

Question

Goal I'm trying to edit in a modal. Once I click save, I want the changes to save to the db, modal to close and display results on the same page.

Results The current code Opens the modal, saves the data in the db, closes the modal, refreshes the page, in a nutshell it does what I need.

**Challenge When the results refresh, the URL adds a # at the end which messes with my side panel making all links open up. This is what it looks like http://127.0.0.1:8000/todolists# **

Here is what my code looks like

Controller

public function editTodo(request $request){
   $todo = Todo::find ($request->id);
   $todo->item = $request->item;
   $todo->description = $request->description;
   $todo->save();
   return response()->json($todo);
 }

View is an index page and javacript is at the bottom of the page, for simplicity, I've broken down the code in 3 sections (HTML table, HTML Modal, and JavaScript).

View - HTML Table

<div class="row">
  <div class="table table-responsive">
    <table class="table table-bordered" id="table">
      <tr>
        <th width="150px">No</th>
        <th>item</th>
        <th>description</th>
        <th>Create At</th>
        <th class="text-center" width="150px">
          <a href="#" class="create-modal btn btn-success btn-sm">
            <i class="glyphicon glyphicon-plus"></i>
          </a>
        </th>
      </tr>
      {{ csrf_field() }}
      <?php  $no=1; ?>
      @foreach ($todo as $value)
        <tr class="post{{$value->id}}">
          <td>{{ $no++ }}</td>
          <td>{{ $value->item}}</td>
          <td>{{ $value->description }}</td>
          <td>{{ $value->created_at }}</td>
          <td>
            <a href="#" class="show-modal btn btn-info btn-sm" data-id="{{$value->id}}" data-item="{{$value->item}}" data-description="{{$value->description}}">
              <i class="fa fa-eye"></i>
            </a>
            <a href="#" class="edit-modal btn btn-warning btn-sm" data-id="{{$value->id}}" data-item="{{$value->item}}" data-description="{{$value->description}}">
              <i class="glyphicon glyphicon-pencil"></i>
            </a>
            <a href="#" class="delete-modal btn btn-danger btn-sm" data-id="{{$value->id}}" data-item="{{$value->item}}" data-description="{{$value->description}}">
              <i class="glyphicon glyphicon-trash"></i>
            </a>
          </td>
        </tr>
      @endforeach
    </table>
  </div>

View - HTML Blade

<div id="myModal"class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="modal">
          <div class="form-group">
            <label class="control-label col-sm-2"for="id">ID</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="fid" disabled>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2"for="item">item</label>
            <div class="col-sm-10">
            <input type="name" class="form-control" id="t">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2"for="description">description</label>
            <div class="col-sm-10">
            <textarea type="name" class="form-control" id="b"></textarea>
            </div>
          </div>
        </form>

View - JavaScript

$(document).on('click', '.edit-modal', function() {
$('#footer_action_button').text(" Update Post");
$('#footer_action_button').addClass('glyphicon-check');
$('#footer_action_button').removeClass('glyphicon-trash');
$('.actionBtn').addClass('btn-success');
$('.actionBtn').removeClass('btn-danger');
$('.actionBtn').addClass('edit');
$('.modal-title').text('Post Edit');
$('.deleteContent').hide();
$('.form-horizontal').show();
$('#fid').val($(this).data('id'));
$('#t').val($(this).data('item'));
$('#b').val($(this).data('description'));
$('#myModal').modal('show');
});

$('.modal-footer').on('click', '.edit', function() {
  $.ajax({
    type: 'POST',
    url: '/editTodo',
    data: {
'_token': $('input[name=_token]').val(),
'id': $("#fid").val(),
'item': $('#t').val(),
'description': $('#b').val()
    },
success: function(data) {
      $('.item' + data.id).replaceWith(" "+
      "<tr class='post" + data.id + "'>"+
      "<td>" + data.id + "</td>"+
      "<td>" + data.item + "</td>"+
      "<td>" + data.description + "</td>"+
      "<td>" + data.created_at + "</td>"+
      "<td><button class='show-modal btn btn-info btn-sm' data-id='" + data.id + "' data-item='" + data.item + "' data-description='" + data.description + "'><span class='fa fa-eye'></span></button> <button class='edit-modal btn btn-warning btn-sm' data-id='" + data.id + "' data-item='" + data.item + "' data-description='" + data.description + "'><span class='glyphicon glyphicon-pencil'></span></button> <button class='delete-modal btn btn-danger btn-sm' data-id='" + data.id + "' data-item='" + data.item + "' data-description='" + data.description + "'><span class='glyphicon glyphicon-trash'></span></button></td>"+
      "</tr>");
      location.reload();
    }
  });

});

Answer 1

If you don't want to navigate to the URL #, then don't link to it:

<a href="#"

Either:

Write Unobtrusive JavaScript and:

• Link to a URL where the equivalent of the Ajax handling will be done entirely by server-side code
• Use event.preventDefault to prevent navigation if the JS is successful

Or:

• Use a <button type="button"> and not a link

Answer 2

I have got similar problem when I used auto refresh element in the page. Resolve it like this:

Change from:

<a href="#"

to

<a href="javascript:void(0)"

What does “javascript:void(0)” mean?