CODEWITHSUNDEEP
javascriptbootstrap-modal
Fai W
Fai W

Reputation: 115

Can't get bootstrap modal show on submit

I tried using the following code to show a modal pop up after the user enter data and click on a button on existing modal pop up. Can anyone point out what I did wrong.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Aguafina+Script">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="css/theme.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
        <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script> 
      	<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
		<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.8/jquery.form-validator.min.js"></script>
</head>

<body>
<a href="#" data-toggle="modal" data-target="#AddPkgPrompt"><i class="fa fa-cube fa-4x"></i><h2>Add Package</h2></a>
<div class="modal fade" id="AddPkgPrompt" tabindex="-1" role="dialog" aria-labelledby="AddPkgPromptLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
	<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>
                <h2 class="modal-title text-center" id="AddPkgPromptLabel">Add Package</h2>
            </div>
            <form action="" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmAddPkg">
            	<div class="modal-body"> 
                    <div class="form-group">
                    	<div class="col-sm-12">
            				<div id="opnshp">
                               	<input type="radio" id="1" name="rbshp" value="1" required /><label>1</label>
                                <input type="radio" id="2" name="rbshp" value="2" required /><label>2</label>
                			</div>
                    	</div>
  					</div>
                </div>		            
            	<div class="modal-footer">
           			<div class="col-sm-offset-4 col-sm-8">
                    	<button name="btnAddPkg" id="btnAddPkg" type="submit" class="clsAddPkg btn btn-primary"><i class="fa fa-plus-circle"></i>&nbsp;Create</button>
            		</div>
            	</div>
            </form>
         </div>
    </div>
</div>
<div class="modal fade" id="RrsultModal" tabindex="-1" role="dialog" aria-labelledby="ResultModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
	<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>
                <h2 class="modal-title text-center" id="ResultModal">xx</h2>
            </div>
            <div class="ct_schpkgresult"></div>
         </div>
    </div>
</div>
<script>
$("#frmAddPkg").submit(function(e) {
		var shpid = get_radio_value();
		var dataString = '&shpid=' + shpid;	
			$.ajax({
        		type: "GET",
        		url: "t2.php",
            	data: dataString,
				async: false,
            	cache: false,
            	success: function (data) {
            		console.log(data);
					 $('#LookupModal').modal('show'); /*TMP*/
					/*$('#AddPkgPrompt').modal('hide');*/
					/*window.location.replace("index.php");*/
            	},
            	error: function(err) {
            		console.log(err);
            	}
    		});
	});
</script>
</body>
</html>

User selects one of the radio buttons on existing form "frmAddPkg" and click on a button which triggers ajax call to t2.php. The t2.php does it job correctly. I just want to add the line $('#ResultModal').modal('show') to display the result but nothing shown after existing modal vanished.

Upvotes: 0

Views: 720

Answers (2)

user3518741
user3518741

Reputation:

You can use your modal like 

    <div class="modal fade" id="getCodeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
       <div class="modal-content">
       <div class="modal-header">
          <button type="button" class="close" id="getCodeClose" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

but never forget to call jquery and bootstrap scripts plugins. Msssage 

   </div>
   </div>
  </div>
  </div>

and on ajax success 

           success: function(msg) {
                $("#getCode").html(msg);
                $('#getCodeModal').modal({
                    backdrop: 'static',
                    keyboard: false
                  });
                $("#getCodeModal").modal('show');
            }

Upvotes: 1

Shipow
Shipow

Reputation: 2447

Maybe add e.preventDefault(); to avoid the form being submitted by the default form action?

$("#frmAddPkg").submit(function(e) {
    e.preventDefault();
    ...
});

Upvotes: 0

Related Questions