Question

我很难找到实现这个目标的方法。

我正在使用Node.js，Bootstrap 3和express

我想从表单页面开始。当用户填写表单时，他们点击提交。在这里，我想要发射远程模态。（通过常规链接或按钮完成此操作没有任何问题。）

这开了一个帖子。然后，我如何触发远程模态并将表单数据从帖子传递给它，这样一个带答案的新远程页面就会显示在原始表单页面的模态窗口中。

以下是我的代码：

Form Jade（cover-form.jade）：

html
    head
        meta(name="viewport" content="width=device-width, initial-scale=1.0")
        title= title
        link(href="/stylesheets/coverform_custom.css" rel="stylesheet")
    body
        .modal.fade(id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true")
            .modal-dialog.wide-modal
                .modal-content
        form.form-horizontal(id="coverform" name="coverform" method="post" action="")
            .LoginBox.LoginText
                fieldset.animated.fadeInUp
                    // Form Name
                    legend.LoginText &nbsp;Cover Strategy
                    // Text input
                    .form-group
                        label.col-xs-4.control-label(for='symbol') Stock Ticker:
                        .col-xs-5
                            input#symbol.form-control.input-xs(type='text', name='symbol', placeholder='example: AAPL', autofocus, required)
                            span.help-block Enter Stock Symbol (all capitals)
                    // Text input
                    // Select Basic
                    .form-group
                        label.col-xs-4.control-label(for='optiondate') Option Date:
                        .col-xs-5
                            select#optiondate.form-control(name='optiondate' required)
                                - for opdate in OptionDates
                                    option(value="#{opdate.OptionDate}") #{moment(opdate.OptionDate).format('dddd, MMMM Do, YYYY')}
                            span.help-block Date the option closes.
                    .form-group
                        label.col-xs-4.control-label(for='strikeprice') Strike Price:
                        .col-xs-5
                            input#strikeprice.form-control.input-xs(type='number', name='strikeprice', placeholder='example: 100.00',  pattern="[0-9]+([\.|,][0-9]+)?", min="0", step="0.50", required)
                            span.help-block Strike price of the option.
                    // Text input
                    .form-group
                        label.col-xs-4.control-label(for='optionprice') Option Selling Price:
                        .col-xs-5
                            input#optionprice.form-control.input-xs(type='number', name='optionprice', placeholder='example: .45', pattern="[0-9]+([\.|,][0-9]+)?", min="0", step="0.05", required)
                            span.help-block Price the option is selling for.
                    // Button
                    .form-group
                        label.col-xs-4.control-label(for='submit')
                        .col-xs-4
                            button#submit.btn.btn-primary(name='submit' type='submit') Submit
        script(src='/javascripts/jquery-2.0.3.min.js')
        script(src='/javascripts/bootstrap.min.js')

Remote Modal Jade（尚未引用任何表单数据）answer.jade：

html
    body
        .modal-header
            button(type="button" class="close" data-dismiss="modal" aria-hidden="true")&times;
            h4.modal-title(id="myModalLabel") This Is An Awesome Title
        .modal-body 
            p This Body Is Great
        .modal-footer
            button.btn.btn-default(data-dismiss="modal") Close

路由的app.js：

...

app.get('/', routes.index);
app.get('/cover', cover.coverForm);
app.post('/cover', cover.doCover);

...

cover.js：

exports.doCover = function(req, res) {
    var mystockdata = [];
    console.log("Here is the symbol I got:    " + req.body.symbol);
    StockPrices.find({
        Symbol: req.body.symbol
    })
        .sort('Date')
        .exec(function(err, stockdata) {
            if (!err) {
                stockdata.forEach(function(stockdata) {
                    mystockdata.push({
                        "MarketDate": stockdata.Date,
                        "Open": stockdata.Open,
                        "High": stockdata.High,
                        "Close": stockdata.Close,
                        "Volume": stockdata.Volume
                    });
                });
                console.log("Here is the stock Data:    " + stockdata);
            } else {
                console.log(err);
            }
            res.render('answer', {});
        });
};

所以我的问题是如何路由这个以便在cover-form.jade上点击提交我可以执行一个bootstrap模式并使用doCover函数触发渲染模态内容的帖子？

也许我正在接近这个完全错误，不知道如何实现我想要的目标。

非常感谢任何帮助。

Answer 1

能够让它工作但不能远程

默认情况下，Bootstrap 3按钮是提交类型，因此我使用了一个触发模式的标准按钮...

button#submit.btn.btn-primary(name='submit' data-toggle="modal" data-target="#myModal") Submit

然后我将标准的Bootstrap模态内容放在页面顶部：

.modal.fade(id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true")
  .modal-dialog.wide-modal
    .modal-content
      .modal-header
        button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
        h4.myModalLabel.modal-title 
        | #{title}
      .modal-body
          #container(style="width:90%; height:400px;")
      .modal-footer
        button.btn.btn-primary(type='button', data-dismiss='modal') Close

然后真正的诀窍是检查从app.js发出的路线是帖子还是获取。如果它是一个帖子意味着表单已提交，那么我使用jQuery来显示模态。否则它会尝试显示但会立即返回到表单。我通过检查仅在post函数（strikeprices）上呈现的变量来完成此操作：

script.
  $(document).ready(function(){

    if(#{strikeprices}){
      $('#myModal').modal('show')
    }

    $('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });
  });

单击表单提交按钮时，触发远程引导模式，然后远程模态内容将显示表单数据？

1 个答案: