Ajax-Request：将动态内容传递给模式

Question

I never used jquery before and tried hard to find a solution for my case. 我以前从未使用过jQuery，并努力为我的案例找到解决方案。

On the cockpit.php page I use a form to get some content from a mysql database. 在cockpit.php页面上，我使用一种表单从mysql数据库中获取一些内容。 Meanwhile I am able to show this content in a div on the cockpit.php page. 同时，我可以在cockpit.php页面的div中显示此内容。

The plan is to show the content in a modal. 该计划是要以模式显示内容。 There the user has 10 seconds to confirm it (in this case it should be stored to the database). 用户在那里有10秒钟的时间来确认它（在这种情况下，它应该存储到数据库中）。

The problem: I tried it for hours and days to get the content into the modal. 问题：我花了数小时和数天的时间尝试才能使内容进入模式。 No chance... Any idea on how to solve this? 没有机会...关于如何解决这个问题的任何想法？ Btw: At the moment I reload the window after the countdown reaches zero. 顺便说一句：目前我倒计时达到零后重新加载窗口。 Here it would also be an idea to just close to modal via jquery. 在这里，通过jquery接近模式也是一个想法。

So I would really appreciate some hints. 因此，我非常感谢一些提示。 Thx. 谢谢。

Final Solution: modal.js 最终解决方案： modal.js

$(function(){

  $("#pricing").submit(function() {
      $.ajax({
             type: "POST",
             url: $(this).attr('action'),
             data: $(this).serialize(),
             dataType: 'json',
             success: function(data)
             {                 
             $('#myModal').find('#a').text(data.a);
             $('#myModal').find('#b').text(data.b);     
             $('#myModal').find('#c').text(data.c);
             $('#myModal').find('#d').text(data.d);
             $('#myModal').find('#e').text(data.e);
             $('#myModal').find('#f').text(data.f);
             $('#a2').val($(this).data('a'));
             $('#myModal').modal('show');
             }
           });
      return false;  
  });

});


   $("#confirm").click(function(){
    var data = {
    a: $('#a').text(),
    b: $('#b').text(),
    c: $('#c').text()
};    
    $.ajax({
        url: 'confirm.php',
        type: "POST",
        data: data,
        dataType: 'json',
        success: function(confirm)  {                 
             window.location.reload();

             }
    });
});

relevant HTML-part of the Modal for click-function: 点击功能的Modal的相关HTML部分：

 <div class="alert hidden" role="alert" id="modalAlert"></div>
                <input type="hidden" id="confirmmodal" name="confirmmodal" value="" /> 
                    </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-ar btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-ar btn-primary" id="confirm">Confirm</button>
          </div>

confirm.php confirm.php

<?php
    $a = $_POST['a'];
    // do what you want
    $confirm = array('message' => $a);
    echo json_encode($confirm);

So the functionality works fine... 所以功能正常...

Answer 1

I made a full example for you, I use it on my website. 我为您做了一个完整的例子，我在我的网站上使用了它。 This is a html file with a link and a modal, the required JQuery and a simple php code to simulate the server response. 这是一个带有链接和模式，所需的JQuery和简单的php代码的html文件，用于模拟服务器响应。 It shows you, how you can pass data to the modal, how to show the modal and display the server response. 它向您展示如何将数据传递到模式，如何显示模式以及显示服务器响应。

Just copy the files into the same directory and test it, it works for me. 只需将文件复制到同一目录并进行测试，它对我有用。

index.html 的index.html

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="/script.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    </head>
    <body>

        <div class="container">

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
          <div class="modal-dialog ">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalTitle"></h4>
              </div>
              <div class="modal-body">
                <div class="alert hidden" role="alert" id="modalAlert"></div>
                <input type="hidden" id="myModalID" name="myModalID" value="" />
                <p>Modal example.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" id="myModalButton">Submit</button>
              </div>
            </div>
          </div>
        </div>

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <a class="openModalLink" href="/" data-id="1234" data-name="Stackoverflow answer">
                  <span> Click me to open modal</span>
                </a>
            </div>          
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    </body>
</html>

script.js 的script.js

$(function(){

  $(".openModalLink").click(function(e) {
      e.preventDefault();       
      $("#myModalTitle").html('Hello, my name is '+$(this).data('name')+'!');
      $("#myModalID").val($(this).data('id'));

      $('#myModal').modal('show');

  });

  $("#myModalButton").click(function(){
      $.ajax({
             url: '/function.php',
             data: {
               id: $("#myModalID").val()
             },
             dataType: 'json',
             success: function(data)
             {                 

              $('#myModal').find('#modalAlert').addClass('alert-success');
              $('#myModal').find('#modalAlert').html(data.message).show; 
              $('#myModal').find('#modalAlert').removeClass('hidden');

             }
       });    
  });

});

function.php function.php

<?php

    echo json_encode(array('message' => 'You submitted this id: ' . $_GET['id']));

hope this helps, feel free to ask me 希望这会有所帮助，随时问我

UPDATE BASED ON YOUR COMMENT 根据您的评论进行更新

I created another version that will take data from the form on the html page, pass it to php and then display the results from php on the modal window. 我创建了另一个版本，该版本将从html页上的表单中获取数据，将其传递给php，然后在模式窗口中显示php的结果。 It uses a different javascript, because now we are "post"-ing the form data to php. 它使用不同的javascript，因为现在我们将表单数据“发布”到php。 Here are the files: 这些是文件：

index.html 的index.html

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="/script.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    </head>
    <body>

        <div class="container">

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
          <div class="modal-dialog ">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalTitle"></h4>
              </div>
              <div class="modal-body">
                <div class="alert hidden" role="alert" id="modalAlert"></div>
                <input type="hidden" id="myModalID" name="myModalID" value="" />
                <p>Modal example.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" id="myModalButton">Submit</button>
              </div>
            </div>
          </div>
        </div>

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="row">
              <div class="col-md-8 col-md-offset-0">
               <form class="form-inline" id="myForm" action="/function.php" method="post">
                 <div class="form-group">
                   <label for="myInput">Input data</label>
                   <input type="text" class="form-control" id="myInput" name="myInput" placeholder="Enter data here">
                 </div>
                 <button type="submit" class="btn btn-primary">Save</button>
               </form>
              </div>
            </div>          
            </div>          
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    </body>
</html>

script.js 的script.js

$(function(){

  $("#myForm").submit(function(event) {

      $.ajax({
             type: "POST",
             url: $(this).attr('action'),
             data: $(this).serialize(),
             dataType: 'json',
             success: function(data)
             {                 

                //display data...
                $('#myModal').find('#modalAlert').addClass('alert-success');
                $('#myModal').find('#modalAlert').html(data.message).show; 
                $('#myModal').find('#modalAlert').removeClass('hidden');

                $('#myModal').modal('show');
             }
           });

      return false;  
  });

});

function.php function.php

<?php

echo json_encode(array('message' => 'You submitted this data: ' . $_POST['myInput']));

Ajax-Request：将动态内容传递给模式

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-03-17 18:38:03

Ajax-Request：将动态内容传递给模式

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-03-17 18:38:03

解决方案1
3 已采纳 2015-03-17 18:38:03