javascript - Ajax-Request: Passing Dynamic Content to modal - Stack Overflow

admin管理员组

文章数量:1410705

I never used jquery before and tried hard to find a solution for my case.

On the cockpit.php page I use a form to get some content from a mysql database. Meanwhile I am able to show this content in a div on the cockpit.php page.

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).

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.

So I would really appreciate some hints. Thx.

Final Solution: 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:

 <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

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

So the functionality works fine...

I never used jquery before and tried hard to find a solution for my case.

On the cockpit.php page I use a form to get some content from a mysql database. Meanwhile I am able to show this content in a div on the cockpit.php page.

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).

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.

So I would really appreciate some hints. Thx.

Final Solution: 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:

 <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

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

So the functionality works fine...

• javascript
• php
• jquery
• html
• ajax

Share Improve this question Follow edited Mar 25, 2015 at 17:11 mgw asked Mar 17, 2015 at 15:11 mgwmgw 2311 gold badge11 silver badge55 bronze badges 4

• Can you tell me when you have the issue passing the data to the modal? Is the issue when you wanna display the data from the html when you show the modal, or is it when the response is back from the server and you wanna show the response? – takacsmark Commented Mar 17, 2015 at 16:28
• I can pass the data (response from the server) and can show it in a div... this works fine. But when I try to get this data in to modal, I do not get the response. At least I cannot see it in the modal - I am of course able to see the modal (without response). A few attempts were interrupted by the reloading of the page (so the modal does not even open) – mgw Commented Mar 17, 2015 at 16:56
• Ok, as I understand the server response should be already there as expected. I noticed a small potential issue in your code, try to add .show at the end of the line in AJAX, like this: $('#pricing').find('.form_result').html(response).show – takacsmark Commented Mar 17, 2015 at 17:02
• Still the same... I guess I have to find a solution to call the modal properly and simultaneously get the data via ajax. – mgw Commented Mar 17, 2015 at 17:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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. 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

<html>
    <head>
        <script src="http://ajax.googleapis./ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="/script.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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./ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.2/js/bootstrap.min.js"></script>

    </body>
</html>

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

<?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. It uses a different javascript, because now we are "post"-ing the form data to php. Here are the files:

index.html

<html>
    <head>
        <script src="http://ajax.googleapis./ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="/script.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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./ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.2/js/bootstrap.min.js"></script>

    </body>
</html>

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

<?php

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

本文标签： javascriptAjaxRequest Passing Dynamic Content to modalStack Overflow