i have a button, when i clicks this button it will goes to ajax. In the suceess condition,it returns three values for 'data' which are 1,2,3. i want to popup a login form only when data=1.(if the user is not logged in). but popup is made by via data attributes. that is in all condition(1,2,3) the popup is showing.
i want to disable in data=2, data3. pls help me.
<button data-toggle="modal" data-target="#xmpModal" class="btn green btn-success" onclick="get('<?echo $u_id;?>','<?echo $e_id;?>')">click</button>
popup div
<div class="modal fade" id="exmpModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" 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">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">My Modal</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
ajax
function get(u_id,e_id)
{
$.ajax({
url: "<?echo base_url()?>events/xyz",
type: 'post', // HTTP METHOD
data:
{u_id:u_id,e_id:e_id },
success: function(data)
{
//alert(data);
if(data==1)
{
// add your code pls
}
else if(data==2)
{
alert("hai");
}
else if(data==3)
{
alert("hello");
}
}
});
}
my function in php controller
public function xyz()
{
$u_id=$this->input->post('u_id');
$e_id=$this->input->post('e_id');
$temp=$this->session->userdata('user');
$g=$this->xm->is_going($u_id,$e_id);
$g1=$this->xm->is_going1($u_id,$e_id);
if($temp=="")
{
$d=1;
echo $d;
}
else if($g==$u_id)
{
$d=2;
echo $d;
}
else if($g1==$u_id)
{
$d=3;
echo $d;
$this->xm->event_updation($e_id,$u_id);
}
else
{
$data=array('event_id'=>$e_id,'ev_going'=>$u_id);
$this->xm->eventgoing($data);
}
}
Just change your JavaScript a bit as shown in this code:
function get(u_id,e_id)
{
$.ajax({
url: "<?echo base_url()?>events/xyz",
type: 'post', // HTTP METHOD
data:
{u_id:u_id,e_id:e_id },
success: function(data)
{
//alert(data);
if(data==1)
{
jQuery("#exmpModal").modal('show');
}
else{
jQuery("#exmpModal").modal('hide');
}
}
});
}
Related
I have some issue with jquery chosen (ver 1.5.1). In my laravel project I have view with modal. In view is select with alreay some list. User using modal with form, can add position to the table from which I wanna update select list and update chosen. My code:
View:
<div class="form-group row">
<label class="col-3 text-right" for="car">Klient: (Add car)</label>
<div class="col-9">
{!! Form::select('cari', $car, null, ['class'=>'form-control form-control-sm form-control-chosen', 'id' => 'client', 'placeholder' => 'Chose car']) !!}
{!! $errors->first('cari', '<strong><p style="color:red;" class="help-block">:message</p></strong>') !!}
<script type="text/javascript">
$("#client").chosen({
no_results_text: 'Missing sorry.',
});
</script>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">add new car:</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col response-client">
</div>
</div>
#csrf
<div class="form-group {{ $errors->has('car') ? 'has-error' : ''}}">
<label for="exampleFormControlFile1">car danem: </label>
<input class="form-control form-control-sm" name="car" type="text" id="newcar">
{!! $errors->first('car', '<strong><p style="color:red;" class="help-block">:message</p></strong>') !!}
</div>
</div>
<button type="submit" id="add-car" class="btn btn-primary btn-sm">{{ __('save') }}<i class="icon-floppy"></i></button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
script code
$('#add-car').click(function(){
var car = $('#newcar').val();
$.ajax({
url:"{{ url('cars/carNew') }}",
method:"POST",
data:{car:car, _token:"{{ csrf_token() }}"},
success:function(result)
{
if(result.result > 0)
{
NewCar();
}
else
{
$("#msg").html("Error can't add new car!");
$("#msg").fadeOut(2000);
}
},
error:function(xhr)
{
console.log(xhr.responseText);
}
})
});
function NewCar()
{
$('#myModal').modal('hide');
$('.modal-backdrop').remove();
$('#client').empty();
$.ajax({
url:"{{ url('umowy/klienci') }}",
method:"POST",
data:{ _token:"{{ csrf_token() }}"},
success:function(result)
{
$("#client").append('<option>Chose car</option>');
if(result)
{
$.each(result,function(key,value){
$('#client').append($("<option/>", {
value: key,
text: value
}));
});
}
$('#client').trigger('chosen:updated');
},
error:function(xhr)
{
console.log(xhr.responseText);
}
});
}
});
Everything works very well except that $('#client').trigger('chosen:updated');. Nothing happen no errors. I'm not sure if I'm doing everything right? Sorry for my english.
I am attempting to set up modal using bootstrap for a project in which a client would be able to update their favorite team, city of birth and their size. Once the information is updated in the database I would like to update it in its respective field.
my modal code:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="cityIn">You live in:</label>
<input type="text" class="form-control" id="cityIn" placeholder="city">
</div>
<div class="form-group">
<label for="favoriteTeam">Favorite Team:</label>
<input type="text" class="form-control" id="favoriteTeam" placeholder="favoriteTeam">
</div>
<div class="form-group">
<label for="size">Size:</label>
<input type="text" class="form-control" id="size" placeholder="size">
</div>
<div class="form-group">
<input type="hidden" class="form-control" id="usernameSubmitting" value="<?php echo $u; ?>">
</div>
<div class="alert alert-success" id="successAlert" role="alert" style="display: none"></div>
<div class="alert alert-danger" id="updateFail" style="display:none"> </div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveBtn" onClick="Changes()">Save changes</button>
</div>
</div>
</div>
</div>
my script:
function Changes() {
var updateCity = $("#cityIn").val();
$.ajax({
url: "../php_parsers/update_parse.php",
type: "POST",
data: {
cityIn: $("#cityIn").val(),
favoriteTeam: $("#favoriteTeam").val(),
size: $("#size").val(),
usernameSubmitting: $("#usernameSubmitting").val()
}
}).done(function(result) {
if (result == "success") {
$("#successAlert").html("Update successful").show();
} else {
$("#updateFail").html(result).show();
}
})
$('#myModal').on('hide.bs.modal', function(e) {
$("#cityDisplayed").html(updateCity);
$("#updateFail, #successAlert").hide();
});
}
nvm my code was proper just forgot to save it.
function Changes() {
var updateCity = $("#cityIn").val();
$.ajax({
url: "../php_parsers/update_parse.php",
type: "POST",
data: {
cityIn: $("#cityIn").val(),
favoriteTeam: $("#favoriteTeam").val(),
size: $("#size").val(),
usernameSubmitting: $("#usernameSubmitting").val()
}
}).done(function(result) {
if (result == "success") {
$("#successAlert").html("Update successful").show();
} else {
$("#updateFail").html(result).show();
}
})
$('#myModal').on('hide.bs.modal', function(e) {
$("#cityDisplayed").html(updateCity);
$("#updateFail, #successAlert").hide();
});
}
I wish to pass the id of a particular row into a modal
code for link
Resume
Code for modal
<div id="myModal" class="modal fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Update profile</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="fetched-data"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="submit" name="register" alt="Login" value="Submit" class="btn blue">Save changes</button>
</div>
</div>
Code for script
<script>
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
$.ajax({
type : 'post',
url : 'fetch.php', //Here you will fetch records
data : 'rowid='+ rowid, //Pass $id
success : function(data){
$('.fetched-data').html(data);//Show fetched data from database
}
});
});
});
</script>
Code for fetch.php
<?php
$editId = $_POST['rowid'];
echo $editId;
?>
I am supposed to get the id but instead i am getting undefined value in the modal, can anyone please tell why this is happening
Try this code
Resume
<div id="myModal" class="modal fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Update profile</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<span class='ShowData'> </span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="submit" name="register" alt="Login" value="Submit" class="btn blue">Save changes</button>
</div>
</div>
Script Code
<script>
$('.ListId').click(function()
{
var Id=$(this).attr('data-id');
$.ajax({url:"fetch.php?Id="+Id,cache:false,success:function(result)
{
$(".ShowData").html(result);
}});
});
</script>
fetch.php Code
$id=$_GET['Id'];
echo $id;
I have this Modal from Bootstrap
When I add
button To call it it open successfully,
but what I really need is to open this modal from function calling automatically
my Experiment is:
<button id="RenewCollerctorDateID" class="btn btn-success" style="width: 10%; display: inline;
padding-right: 10px; float: left;" onclick="RenewCollectorDatePeriod();">renew</button>
MY JavaScript is
function RenewCollectorDatePeriod() {
// AreYOuSureRenew();
var EmpID = $("#<%=ddlFilterCollector.ClientID%>").val();
if (EmpID == -1) {
alert("please select one ")
}
else {
alert(EmpID);
GetCollectorInfo(EmpID);
}
}
then:
function GetCollectorInfo(EmpID) {
// AreYOuSureRenew();
$.ajax({
type: "POST",
url: "UnloadingCalendar.aspx/GetCollectorInfo",
data: JSON.stringify({ EmpID: EmpID }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
alert(result.d);
AreYOuSureRenew();
},
error: function (msg) {
alert(msg.d);
},
complete: function () {
}
})
}
function AreYOuSureRenew() {
alert("opened");
$('#EnsureModal').modal('show');
}
and here my modal
<div class=" modal fade" id="EnSureModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Do ypu need change </h4>
</div>
<div class="modal-body">
<p>Are u sure from </p>
<label id="FromDate"></label>
<p>To</p>
<label id="ToDate"></label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">no</button>
<button type="button" class="btn btn-default" data-dismiss="modal">yes</button>
</div>
</div>
</div>
</div>
Notice: when I add $("#EnSureModal").modal('show'); in Document.Ready it appeasrs on page load and appears again on function call , how can I make it appears only in function call
I read your code and I found out that you didn't use bootstrap correctly and the also the script you wrote is not correct. Check this out. This might help you.
Script:
$(document).ready(function(){
$("#fireme").click(function(){
$("#EnSureModal").modal();
});
});
HTML:
<button id="fireme" class="btn btn-default">Fire me up!</button>
<div class="modal fade" id="EnSureModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Do ypu need change </h4>
</div>
<div class="modal-body">
<p>Are u sure from </p>
<label id="FromDate"></label>
<p>To</p>
<label id="ToDate"></label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">no</button>
<button type="button" class="btn btn-default" data-dismiss="modal">yes</button>
</div>
</div>
</div>
</div>
The fiddle
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 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.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">×</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
$(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.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">×</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
$(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']));