如何将 toast 消息添加到提交按钮

Question

我正在尝试在 toast 上显示错误消息。我有一个带有提交按钮的表单，如下所示。我的 html 表格是：

file.html

<form method="post" enctype="multipart/form-data" >
    <div class="form-group">
      <label>Select Layer Type</label>
      <select class="form-control select2" style="width: 100%;">
       <option value="vector">Vector Layer</option>
      <option value="rasterfile">Raster Image</option>
      </select>
    </div>

    <div class="card-footer"> <button type="submit" class="btn btn-primary toastrDefaultError">Upload File</button></div>       
</form>

而js是

$(function () {
$('.select2').select2()
toastr.error('Error...') // I want to display msg from context instead 
    
})

表格动作是

menu.html

<li class="nav-item ">
  <a href="/fileupload/" class="nav-link">
    <i class="nav-icon fas fa-book"></i>
    <p> File Upload </p>
  </a>
</li>

我的python密码是

fileupload.py

def file_execution(request):
 try:
   #something processing
  except Exception as Er:
      print('Er:',Er)
      context['msg'] = 'Some error occured !!'

  return render(request,'file.html',context)

urls.py

path('fileupload/', fileupload.file_execution, name='fileupload'),

如果我将按钮类型更改为 type="button"，我将获得烤面包机。如何将 toastr 消息添加到我的 type="submit" 按钮标签。单击 menu.html 呈现 file.html 页面的 文件上传 菜单。我想在提交表单时在 toastr 中显示上下文消息

Answer 1

你做错了。在这里，您会在单击按钮时干杯......无论服务器回答什么。不管有没有要求。这不是你想做的。

$(function () {
    $('.toastrDefaultError').click(function() {
      toastr.error('Error...')
    });
})

<button type="submit" class="btn btn-primary toastrDefaultError">Upload File</button>

更改表格以删除吐司

<form method="post" enctype="multipart/form-data" >
    <div class="form-group">
      <label>Select Layer Type</label>
      <select class="form-control select2" style="width: 100%;">
       <option value="vector">Vector Layer</option>
      <option value="rasterfile">Raster Image</option>
      </select>
    </div>

    <div class="card-footer">
      <button type="submit" class="btn btn-primary">Upload File</button>
    </div>       
</form>

在提交时，服务器完成他的工作并给出相同的页面，带有成功消息或错误消息。我把两者都放在了示例中，但没有编写代码。

<form method="post" enctype="multipart/form-data" >
    <div class="form-group">
      <label>Select Layer Type</label>
      <select class="form-control select2" style="width: 100%;">
       <option value="vector">Vector Layer</option>
      <option value="rasterfile">Raster Image</option>
      </select>
    </div>

    <div class="card-footer">
      <button type="submit" class="btn btn-primary">Upload File</button>
    </div>
    <p class='errorMsg'>There is an error</p>
    <p class='successMsg'>There is an error</p>
</form>

验证一切正常，然后使用此 JS

$(function () {
    //Find every errorMsg on the page and toast them
    $('.errorMsg').each( e => {
      const txt = $(e).text();
      toastr.error(txt)
    })
    //Find every successMsg on the page and toast them
    $('.successMsg').each( s => {
      const txt = $(s).text();
      toastr.tost(txt)
    })
})

如何将 toast 消息添加到提交按钮

How to add toast message to a submit button

javascript

jquery

jquery-plugins

toast

toastr