【问题标题】:How to add functions in Bootstrap modal - Laravel如何在 Bootstrap 模态中添加函数 - Laravel
【发布时间】:2013-06-04 23:17:22
【问题描述】:

我目前正在使用 Laravel 框架开发一个系统。不过,我对 MVC 架构还不是很熟悉。

在开发系统时,我遇到了一个与此引导模式相关的问题,该模式中包含一个表单。我想将函数放入其中,以便可以将其提交到数据库。

我遵循了几个教程,但没有提出解决方案,因为它们都使用 pages 而不是 modals

所以,这里是模态的 HTML:

<div class="modal hide fade" id="linkSettings">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Add New Link</h3>
  </div>

  <div class="modal-body">
      <div class="control-group">
      <label class="control-label" for="focusedInput">Add A Link:</label>
      <div class="controls">
        <textarea class="autogrow"></textarea>
      </div>
      </div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

这是上述模态的Javascript:

$('.btn-settingLink').click(function(e){
    e.preventDefault();
    $('#linkSettings').modal('show');
});

现在,如何将函数放入控制器中,以便每当用户按下保存更改按钮时,它将&lt;textarea&gt; 中的值存储到数据库中?与Javascript代码有什么关系吗?我是否需要在表单中使用{{Form::open('main/addLink','POST')}} 将其值传递给控制器​​和模型?

基本上,我想要的只是通过使用模态来拥有 CRUD 功能。

【问题讨论】:

    标签: php javascript laravel laravel-3


    【解决方案1】:

    首先你需要创建一个带有路由的表单......

    <form method="post" action="{{URL::to('Link/addlink')}}>
    

    或者像你上面展示的那样,用你的 Blade {{Form}} ...无论哪种方式

    那么你的 textarea 需要一个 id 和 name

    <textarea id="mytext" name="mytext"></textarea>
    

    所以你的 HTML 变成了……

    <form method="post" action="{{URL::to('Link/addlink')}}>
      <div class="modal-body">
          <div class="control-group">
          <label class="control-label" for="focusedInput">Add A Link:</label>
          <div class="controls">
            <textarea id="mytext" name="mytext" class="autogrow"></textarea>
          </div>
          </div>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <input type="submit" id="submit" name="submit" class="btn btn-primary">Save changes</input>
      </div>
    </form>
    

    然后在您的链接控制器中...或您实际发送此表单的任何地方..不知道您的控制器被命名为:)

    public function addlink(){
    
    $input = Input::all();
    //whatever validation you wanna do, with error handling etc...not gonna provide that,            thats up to you
    
    $yourmodel = New Model;
    $yourmodel->text = $input['mytext'];
    $yourmodel->save();
    
    Return Redirect::back();
    
     }
    

    编辑(用于 Ajax)

    将此脚本添加到页面底部...

    <script>
    $(document).ready(function(){
    
    $('input#submit').click(function(e){
       e.preventDefault();
       var text = $('#mytext').val();
       var url = 'your url' //we were using Link/addlink in the other example
    
      $.ajax({
       type: "POST",
       url: url,
       data: { mytext: text },
       success: function(){
            //Probably add the code to close your modal box here if successful
            $('#linkSettings').hide();
       },
       });
     });
    });
    </script>
    

    PS 完全未经测试....您需要进行一些调整,再加上您的控制器具有重定向功能这一事实可能会使其无法正常工作,因为这只会期待一个回显的 Json 字符串

    但这些都是细节,我认为基础是你自己继续下去的基础......

    【讨论】:

    • 当然,它比这更深入,通过错误处理等来实际处理数据,但这是一个单独的问题......您的主要问题只需给表单一个动作就可以回答。 ....除非您真的想通过 ajax 发布表单,而不是真正进行真正的表单提交,否则那就不同了...
    • 请原谅这个愚蠢的问题,但是ajax和你展示的方法有什么区别
    • Ajax 会在后台提交到服务器,所以当你点击保存时它会简单地关闭模态,并保持在你打开模态之前的位置......方式你已经完成了,SAVE 按钮将提交到服务器,并刷新页面。在这种情况下,唯一真正的区别是 20 毫秒的屏幕闪烁,而不仅仅是模式窗口关闭.....明白吗?此外,如果您在页面上向下滚动,然后打开一个模式,然后点击保存,页面将跳转到顶部....而 ajax 方式,模式只是关闭,并且您在同一个位置。
    • 它只是提供了一个对用户更友好的界面,反应更灵敏。它不是必需的,但如果您想提供快速和无缝的用户体验,则值得实现......最好的方法是两者都做,然后在按钮上执行 preventDefault() ,这样如果他们有 JS,它就会 ajaxes ,如果他们不这样做,它就会回到常规方式......
    • 好的,我明白了,听起来很酷。现在,如何在我的表单中实现 ajax?不过,指向教程的链接也可能会有所帮助。
    猜你喜欢
    • 2023-04-06
    • 1970-01-01
    • 2014-03-17
    • 2023-03-09
    • 2018-03-08
    • 2021-06-18
    • 2018-12-12
    • 2016-06-26
    • 2019-02-13
    相关资源
    最近更新 更多