CODEWITHSUNDEEP
javascriptjqueryajaxhtmljive
Gani
Gani

Reputation: 442

Unable to get success response from ajax and getting JQuery not defined on submit in firefox and IE

This code is used on Jive tool to post the data to some server. But this is not happening.The code is unable to get success message in firefox and IE but receiving :

Reference error: $j is not defined.

Due to some jquery conflict. After adding the juery.noConflict() the result is same. Is there any other means by which this can be achieved.

 

   <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
    </head>
    <script>
      $(document).ready(function() {
        $('#contact_form').bootstrapValidator({
            // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    validators: {
                            stringLength: {
                            min: 2,
                        },
                            notEmpty: {
                            message: 'Please enter your name'
                        }
                    }
                },
    			email: {
                    validators: {
                        notEmpty: {
                            message: 'Please enter your email address'
                        },
                        emailAddress: {
                            message: 'Please enter a valid email address'
                        }
                    }
                },
                 Function: {
                    validators: {
                         stringLength: {
                            min: 2,
                        },
                        notEmpty: {
                            message: 'Please supply Function'
                        }
                    }
                },
                RequestFor: {
                    validators: {
                        notEmpty: {
                            message: 'Please select request for'
                        }
                    }
                },
                RequestTitle: {
                    validators: {
                          stringLength: {
                            min: 1,
                            max: 100,
                            message:'Please enter at least 1 characters and no more than 100'
                        },
                        notEmpty: {
                            message: 'Please enter request title'
                        }
                        }
                    },
                DescribeYourRequest: {
                    validators: {
                          stringLength: {
                            min: 1,
                            message:'Please enter at least 1 character'
                        },
                        notEmpty: {
                            message: 'Please describe your request'
                        }
                        }
                    }
                }
            });
            
    		});
    </script>		
    <script>
    $("#contact_form").submit(function(e)
    {
      // get form data and add to body	
         var body="some data";
    	 var req  = {   some object };

            req = JSON.stringify(req);
            console.log(req);
    	$.ajax({ 								type:"POST",
                                              url: "<<Some Url>>",
    headers: { 'X-J-Token': window.parent._jive_auth_token },
                                              contentType: "application/json",
                                              data: req,
                                              dataType: "json",
    										  success: function(data, textStatus, jqXHR) 
            {
                alert("Result: "+data.result+", Message: "+data.message);
            }                                             								   
    });
    });
    </script>
    <div class="container">
    <fieldset>
    <!-- Form Name -->
    <form id="contact_form" >
    <span class="text-center"><h2>My Form</h2></span>
    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label">Name<font color="red">*</font></label>  
      <div class="col-md-4 inputGroupContainer">
      <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input  name="name" placeholder="Name" id="Name" class="form-control"  type="text" required>
        </div>
      </div>
    </div>
    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label">E-Mail<font color="red">*</font></label>  
        <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
      <input name="email" placeholder="E-Mail Address" id="EmailId" class="form-control"  type="text" required>
        </div>
      </div>
    </div>
    <!-- Text input-->     
    <div class="form-group">
      <label class="col-md-4 control-label" >Function<font color="red">*</font></label> 
        <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
      <input name="Function" placeholder="Function" id="Function" class="form-control"  type="text">
        </div>
      </div>
    </div>
    <!-- Select Basic -->      
    <div class="form-group"> 
      <label class="col-md-4 control-label">Request For<font color="red">*</font></label>
        <div class="col-md-4 selectContainer">
        <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
        <select name="RequestFor" id="Requestfor" class="form-control selectpicker" >
          <option value=" " >Please select Request For</option>
          <option >a</option>
            <option>b</option>
            <option>c</option>
            <option>d</option>
        </select>
      </div>
    </div>
    </div>
    <!-- Button -->
    <div class="form-group pull-right">
      <label class="col-md-4 control-label"></label>
      <div class="col-md-4">
        <button type="submit" class="btn btn-primary" onclick="documentCreation()">Submit</button>
      </div>
    </div>
    </fieldset>
    </div>
    </form>
        </div><!-- /.container -->
    </html>

Upvotes: 1

Views: 154

Answers (0)

Related Questions