Create modal when use onclick event with AJAX

Question

I have a file, which needs to have 90 modals with lots of long texts, because I need to create a modal when a link is clicked.

index.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="inc/bootstrap.css" rel="stylesheet">
    <script src="inc/jquery.min.js"></script>
    <script src="inc/bootstrap.min.js"></script>
    </head>
    <body>
        <script>            
            $(function(){
                $('a').click(function(){
                    var link = $('#name').html(); // I need sent this to my calculator file
                    $.ajax({
                        url : "result.php",
                        type : "post",
                        dataType:"text",
                        data : {
                             name: link
                        },
                        success : function (a){
                            $('#result').html(a);
                        }
                    });
                });
            });
        </script>
        <div id="result"></div>
        <a href="#" id="name">I need this text for php script</a>
  </body>
</html>

resuilt.php

/* I used PHP becase i need more functions, this only a example how
 * to creat and call a modal after click on a link.
*/
function create_modal($modal_ID = 'myModal')
{
    return "<div class='modal fade' id='$modal_ID' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
                <div class='modal-dialog'>
                  <div class='modal-content'>
                    <div class='modal-header'>
                      <button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>&times;</span><span class='sr-only'>Close</span></button>
                      <h4 class='modal-title' id='myModalLabel'>Nhãn</h4>
                    </div>
                    <div class='modal-body'>
                      Nội dung
                    </div>
                    <div class='modal-footer'>
                      <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
                      <button type='button' class='btn btn-primary'>Save changes</button>
                    </div>
                  </div>
                </div>
              </div>";
}
echo create_modal();
?>

The result is, I need to click on the link two times to show my modal. But it can't close or does anything.

Where did it go wrong? And is there any way to make my idea better?

shazz Abbasi · Accepted Answer · 2017-08-28 09:22:12Z

1

you can add

success : function (a){
                        $('#result').html(a);
                        $('#myModal').modal('show');
                    }

just add $('#myModal').modal('show'); when ajax load your modal in #result

answered Aug 28, 2017 at 9:22

shazz Abbasi

1041 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mwangi Thiga · Accepted Answer · 2017-08-28 09:06:24Z

0

I don't think 90 modals is a good idea. Try saving data maybe in a databas. Assign your links different ids. Use jquery to listen to click events Get data from your server Populate modal with values from the server. Check this stack overflow link.

Let me know if you need help

answered Aug 28, 2017 at 9:06

Mwangi Thiga

1,37918 silver badges23 bronze badges

Collectives™ on Stack Overflow

Create modal when use onclick event with AJAX

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related