I have a list of content that users send, such as tweeting, and they post a text, and the following content is also displayed. input I put an ID that updates that ID in Ajax, but because the posts are below and editing is modal, only one of the forms can be edited because the input ID is fixed
Can you please help?
#foreach($consult as $item)
<div id="cards" class="card data-id-{{$item->id}}">
<div class="card-header">
<h5 class="card-title">your consult</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<div class="btn-group">
<button type="button" class="btn btn-tool " data-toggle="dropdown" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="currentColor" class="mercado-match" width="24" height="24" focusable="false">
<path d="M14 12a2 2 0 11-2-2 2 2 0 012 2zM4 10a2 2 0 102 2 2 2 0 00-2-2zm16 0a2 2 0 102 2 2 2 0 00-2-2z"></path>
</svg>
</button>
<div class="dropdown-menu dropdown-menu-right" role="menu" style="">
<button data-toggle="modal" data-target="#modal-lg-{{$item->id}}" class="dropdown-item "><i class="fas fa-edit"></i> Edit</button>
<button class="dropdown-item deleteskill" data-id="{{$item->id}}" data-token="{{ csrf_token() }}" ><i class="fas fa-trash"></i> Delete</button>
</div>
</div>
</div>
</div>
<div class="card-body" >
<div class="post">
<div class="user-block all-posts-body">
#if(Auth::user()->photo)
<img alt="On Demand Consults" class="img-circle img-bordered-sm" src="/photo/avatar/{{Auth::user()->photo}}">
#else
<img alt="On Demand Consults" class="img-circle img-bordered-sm" src="/img/avatar.png" >
#endif
<span class="username">
{{Auth::user()->name}}{{Auth::user()->family}}
</span>
<span class="description">Shared publicly - {{ \Carbon\Carbon::parse($item->created_at)->diffForhumans()}}</span>
<p>
{{$item->description}}
</p>
</div>
</div>
</div>
</div>
#endforeach
my modal
#foreach($consult as $item)
<div class="modal fade" id="modal-lg-{{$item->id}}">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">update your consult</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form data-id="{{$item->id}}" method="post" action="{{ route("Consult.update", $item->id) }}" enctype="multipart/form-data">
#csrf
#method('PUT')
<div class="modal-body">
<textarea id="description" name="description" class="form-control form-control-sm" type="text" placeholder="What do you want to talk about?" >{{$item->description}}</textarea>
<div class="alert-message" id="descriptiError"></div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary updateInfo" data-id="{{$item->id}}" data-token="{{ csrf_token() }}">Save changes</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
#endforeach
my ajax code
$(".updateInfo").on('click',function(e) {
e.preventDefault();
let description = $('#description').val();
const ConsultId = $(this).attr('data-id');
var confirmation = confirm("Are you sure you want to update this Consult ?");
if (confirmation) {
$.ajax({
type:"PUT",
data:{
"_token": "{{ csrf_token() }}",
description:description,
},
url:'/ConsultantsCp/Consult/' + ConsultId,
success: function(data){
swal({title: "Good job", text: "Consult is successfully updated!", type:
"success", timer: 1500, buttons: false,}).then(function(){
location.reload();
}
);
},
error: function(response) {
$('#descriptiError').text(response.responseJSON.errors.description);
}
});
}
});
enter image description here
enter image description here
Similar as Rateb's answer, however a bit different
First we have to declare a javascript function to initialize whatever we need to show in the modal form
Second we must call the function with the necessary content. In your case when we click the Edit button, it must cal the js function
Third is the logic you use to post the data.
Notice how i have encoded the description to preserve the format and i have deleted the other parameters in the modal form and declared a hidden field to contain the item-id.
#foreach($consult as $item)
<div id="cards" class="card data-id-{{$item->id}}">
<div class="card-header">
<h5 class="card-title">your consult</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<div class="btn-group">
<button type="button" class="btn btn-tool " data-toggle="dropdown" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="currentColor" class="mercado-match" width="24" height="24" focusable="false">
<path d="M14 12a2 2 0 11-2-2 2 2 0 012 2zM4 10a2 2 0 102 2 2 2 0 00-2-2zm16 0a2 2 0 102 2 2 2 0 00-2-2z"></path>
</svg>
</button>
<div class="dropdown-menu dropdown-menu-right" role="menu" style="">
<button data-toggle="modal" data-target="#edit-modal" onclick="initModal({{$item->id}}, {{json_encode($item->description)}} )" class="dropdown-item "><i class="fas fa-edit"></i> Edit</button>
<button class="dropdown-item deleteskill" data-id="{{$item->id}}" data-token="{{ csrf_token() }}" ><i class="fas fa-trash"></i> Delete</button>
</div>
</div>
</div>
</div>
<div class="card-body" >
<div class="post">
<div class="user-block all-posts-body">
#if(Auth::user()->photo)
<img alt="On Demand Consults" class="img-circle img-bordered-sm" src="/photo/avatar/{{Auth::user()->photo}}">
#else
<img alt="On Demand Consults" class="img-circle img-bordered-sm" src="/img/avatar.png" >
#endif
<span class="username">
{{Auth::user()->name}}{{Auth::user()->family}}
</span>
<span class="description">Shared publicly - {{ \Carbon\Carbon::parse($item->created_at)->diffForhumans()}}</span>
<p>
{{$item->description}}
</p>
</div>
</div>
</div>
</div>
#endforeach
modal
<div class="modal fade" id="edit-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">update your consult</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="edit-modal-form">
<div class="modal-body">
<textarea id="description" name="description" class="form-control form-control-sm" type="text" placeholder="What do you want to talk about?" ></textarea>
<div class="alert-message" id="descriptiError"></div>
<input type="hidden" id="item-id-field">
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary updateInfo" >Save changes</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
scripts
function initModal(id, description)
{
// Inialize the modal hidden field with the id value using Jquery
$("#item-id-field").val(id);
// decode the json and show it in the desciption field in the modal
var description_decoded = JSON.parse(JSON.stringify(description));
$("#description").html(description_decoded);
}
$(".updateInfo").on('click',function(e) {
e.preventDefault();
let description = $('#description').val();
const ConsultId = $("#item-id-field").val();
var confirmation = confirm("Are you sure you want to update this Consult ?");
if (confirmation) {
$.ajax({
type:"PUT",
data:{
"_token": "{{ csrf_token() }}",
description:description,
},
url:'/ConsultantsCp/Consult/' + ConsultId,
success: function(data){
swal({title: "Good job", text: "Consult is successfully updated!", type:
"success", timer: 1500, buttons: false,}).then(function(){
location.reload();
}
);
},
error: function(response) {
$('#descriptiError').text(response.responseJSON.errors.description);
}
});
}
});
Try this example, it's a simple example assuming you have show route that gives the post info and edit route that submitting the edits, in this example we are not submitting form we just sending a request with ajax client called axios,
The blade file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
#foreach($consult as $item)
<div id="cards" class="card">
<div class="card-header">
<h5 class="card-title">your consult</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button data-id={{$item['id']}} type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
edit
</button>
</div>
</div>
<div class="card-body">
<div class="post">
<p>
{{$item['description']}}
</p>
</div>
</div>
</div>
#endforeach
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit post</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<input type="hidden" name="id">
<div class="form-group">
<label>Description</label>
<input name="description" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button name="save-button" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.4/axios.min.js"></script>
</body>
<script>
const modal = $('#exampleModal')
const descriptionInput = $('input[name="description"]')
const idInput = $('input[name="id"]')
const saveButton = $('button[name="save-button"]')
modal.on('show.bs.modal', (e) => {
// getting the id from clicked button
const postId = e.relatedTarget.getAttribute('data-id')
// render the required post info
axios.get('/posts/' + postId).then(res => {
descriptionInput.val(res.data.description)
idInput.val(res.data.id)
})
})
saveButton.on('click', () => {
// the edit request in your example its /ConsultantsCp/Consult/' + ConsultId
axios.put('/posts/' + idInput.val(), {
_token: "{{ csrf_token() }}",
description: descriptionInput.val(),
}).then(res => {
console.log(res)
modal.modal('toggle')
})
})
</script>
</html>
Related
I have three divs each looking like this
<div class="col-lg-6 col-md-6 col-sm-12 mb-4">
<div class="card">
<div class="card-body b-primary">
<div class="row justify-content-center">
<div class="col-md-5 col-sm-12">
<img src="assets/images/gateway/61eedfd72289f1643044823.jpg" class="card-img-top w-100"
alt="Stripe">
</div>
<div class="col-md-7 col-sm-12">
<ul class="list-group text-center">
<li class="list-group-item">Stripe</li>
<li class="list-group-item">Limit : 50- 50000 USD</li>
<li class="list-group-item"> Charge - 0 USD+ 0% </li>
<li class="list-group-item">
<button type="button" data-id="str"
data-base_symbol="" class=" btn deposit cmn-btn w-100" data-toggle="modal"
data-target="#exampleModal">
Deposit</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
i have identified and differentiated each of the 3 divs using data-id now when the deposit button is clicked it opens up this modal below,
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content modal-content-bg">
<div class="modal-header">
<strong class="modal-title method-name text-white" id="exampleModalLabel">Input Deposit Amount</strong>
<a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
</div>
<form action=" {{ route('deposit_request') }}" method="post" class="register">
#csrf
<div class="modal-body">
<div class="form-group">
<input type="hidden" name="method_code" class="edit-method-code" value="">
<x-jet-validation-errors class="mb-4" />
#include('flash-message')
</div>
<div class="form-group">
<label>Enter Amount:</label>
<div class="input-group">
<input id="amount" type="text" class="form-control form-control-lg" name="usdamt"
placeholder="0.00" required="" autocomplete="off">
<div class="input-group-prepend">
<span class="input-group-text currency-addon addon-bg">USD</span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-md btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn-md cmn-btn">Next</button>
</div>
</form>
</div>
</div>
</div>
now my question is how do I get the data-id variable to the hidden input in the modal to be able to identify which particular payment method was/is been used to open the modal, I suppose it can be done with Ajax or JavaScript, but not being so diverse in this areas I can seem to get it sorted out and is there a better way to differentiate the divs without using data-id
Bootstrap provides events of their modals.
The event I used here is show.bs.modal. The event details has a property called relatedTarget which tells you what prompted the modal event.
From that element you can extract the data-id attribute.
$('#exampleModal').on('show.bs.modal', function (e) {
var data_id = $(e.relatedTarget).data('id');
console.log(data_id);
})
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-id="MAGIC" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
There could be multiple solutions, but you could implement event delegation here.
Move the click event handler up to the parent div element containing all these buttons.
In your event listener, you could do something like this:
let selectedPaymentMethod = "";
const paymentClickHandler = (event) => {
// get the element
const buttonClicked = event.target;
// there are several to check if it's button, i'm using classList
if (buttonClicked && buttonClicked.classList.contains("btn")) {
// there are multiple ways to handle this
// if (buttonClicked.classList.contains('stripe')) payingUsingStripe();
// if (buttonClicked.dataset.paymentmethod === 'stripe') payingUsingStripe();
// I would do something like below
setPaymentMethod(buttonClicked.dataset.paymentmethod);
displayModal();
}
};
function setPaymentMethod(paymentMethod) {
// do some checks to ensure valid value and then
selectedPaymentMethod = paymentMethod;
}
CodeSandbox to demonstrate above.
Hope it helps.
I want to make an approve and reject button in foreach loop.
Approve button use only item's ID. So I have no problem.
<button type="button" class="btn btn-success" onclick="location.href='#Url.Action("Approve", "Home", new {page = "leave/st/approve/", id = #item.ID, actionName ="LeaveRequests"})'">Approve</button>
But in reject button, I have to take explanation from text area to send web service.
So I added a bootstrap modal;
<button type="button" id="btnReject" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop-#item.ID">Rejet</button>
And this is my modal ;
<!-- Modal --><div class="modal fade" id="staticBackdrop-#item.ID" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title" id="staticBackdropLabel">Red İşlemi</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">
<label for="input" class="col-sm-12 col-form-label">Explanation .. </label>
<div class="col-sm-12">
#*I want to get this explanation*#
<textarea id="explanation" class="form-control" style="height: 100px"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
#*THIS URL ACTION*#
<a class="btn btn-success" href="#Url.Action("Reject", "Home", new {page="leave/st/reject/",id=#item.ID,
actionName = "LeaveRequests", exp= ? })" id="lnk">OK</a>
</div>
</div>
</div>
</div>
I have to get value from explanation text area and add to url action in modal.
How can I get textarea value in url action ?
My view form is here ;
<form method="post">
<section class="section">
<div class="row">
<div class="col-lg-12">
#foreach (var item in Model)
{
<div class="card">
<div class="card-body">
<h5 class="card-title">#item.NameSurname - #item.Section</h5>
<h6 class="card-subtitle mb-2 text-muted">#item.StartDate / #item.EndDate</h6>
<h6 class="card-subtitle mb-2 text-muted">#item.Days gün #item.Hours saat</h6>
<h6 class="card-subtitle mb-2 text-muted">#item.Type #item.PriceState</h6>
<h6 class="card-subtitle mb-2 text-muted">#item.Expression</h6>
<p class="card-text">#item.CompExplain</p>
<button type="button" class="btn btn-success" onclick="location.href='#Url.Action("Approve", "Home", new {page = "leave/st/approve/", id = #item.ID, actionName ="LeaveRequests"})'">Approve</button>
<button type="button" id="btnReject" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop-#item.ID">Reject</button>
</div>
</div>
<!-- Modal --><div class="modal fade" id="staticBackdrop-#item.ID" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title" id="staticBackdropLabel">Red İşlemi</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">
<label for="input" class="col-sm-12 col-form-label">Explanation..</label>
<div class="col-sm-12">
#*I want to get this explanation*#
<textarea id="explanation" class="form-control" style="height: 100px"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">İptal</button>
#*THIS URL ACTION*#
<a class="btn btn-success" href="#Url.Action("Reject", "Home", new {page="leave/st/reject/",id=#item.ID,
actionName = "LeaveRequests", exp= ? })" id="lnk">OK</a>
</div>
</div>
</div>
</div>
}
</div>
</div>
</section>
</form>
First, you should post your question with "actual" code. if you are using jQuery you can use JS to pull the value from the textarea or any input by using its id:
<script>
$('#btnReject').click(function() {
$.ajax({
url: #Url.Action("Reject", "Home", {page="leave/st/reject/", id=#item.ID, actionName = "LeaveRequests"}) + '?exp=' + $("#explanation").val()
type: 'POST',
// ... other ajax options ...
});
});
</script>
otherwise you can use form element and use "submit" buttons to submit values to form action. You may have to adapt this code to your project.
<form method="get" action="#Url.Action("MyAction", "MyController")" >
#Html.Textbox("toPay")
<input type="submit" value="Pay"/>
</form>
I would suggest using JS to pull this off.
When pressing the "Confirm" button, it executes the function and the action, but the event of closing the modal does not execute it.
This is my code:
<script type="text/javascript">
$("document").ready(function() {
var actsel = $("#act_selected").val();
$("#habilitaract_mensaje").html("¿You want to end the activity No. <strong>" + actsel + "</strong>?");
$("#btn_actconfirmar").click(function() {
if (habHabitacion()) {
$('#modal_habilitaract').modal('hide');
}
});
});
</script>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Enable Activity</h4>
</div>
<div class="modal-body">
<h5><span id="habilitaract_mensaje"></span></h5>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn_actconfirmar">
<span class="texto-sm"><span class="glyphicon glyphicon-ok"></span> Confirm</span>
</button>
</div>
I think the problem comes from your import of bootstrapp or the definition of the div of the modal
Look at mine:it works correctly
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
var actsel = $("#act_selected").val();
$("#habilitaract_mensaje").html("¿You want to end the activity No. <strong>" + actsel + "</strong>?");
$("#btn_actconfirmar").click(function() {
alert("welcome");
});
});
</script>
<div align="right">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×
</span></button>
<h4 class="modal-title">Enable Activity</h4>
</div>
<div class="modal-body">
<h5><span id="habilitaract_mensaje"></span></h5>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn_actconfirmar">
<span class="texto-sm"><span class="glyphicon glyphicon-ok"></span> Confirm</span>
</button>
</div>
</div>
</div>
</div>
If habHabitacion function returns boolean true then modal window should be close. Please check what habHabitacion return.
THis is my html code with the modal function
<div class="modal fade" id="listSensorModal" tabindex="-1" role="dialog" aria-labelledby="listSensorModal">
<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="deviceModal">Followers List</h4>
</div>
<div class="modal-body">
<br>
<div class="row form-group has-feedback" ng-repeat="sensors in listedSensors">
<div class="col-md-6">
{{sensors.id}}
</div>
<div class="col-md-3">
<!-- <input type="checkbox" ng-model="devices.deviceActive" bootstrap-switch class="make-switch" data-on="success" data-off="warning" ng-change="changeStatus(devices)"> -->
</div>
<!-- <div class="col-md-3">
<button type="button" class="btn btn-primary" ng-click="editSensors(sensors)"><i class="fa fa-edit"></i></button>
<button type="button" class="btn btn-primary" ng-click="removeSensor(sensors.id)"><i class="fa fa-trash"></i></button>
<button type="button" class="btn btn-primary" ng-show="!sensors.deviceId" ng-click="linkToDevice(sensors)"><i class="fa fa-plus"></i></button>
<button type="button" class="btn btn-primary" ng-show="sensors.deviceId" ng-click="UnlinkDevice(sensors)"><i class="fa fa-minus"></i></button>
</div> -->
</div>
<div class="row form-group has-feedback" ng-show="listedSensors.length==0">
<h3 align="center">No Sensors here</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary" ng-click="showAddSensorModal()">Add a New Sensor</button> -->
</div>
</div>
</div>
</div>
</div>
This is my Js code which shows the modal.Am getting data here but not the modal.
$scope.launchSensorModal = function(){
// $rootScope.showLoadingMessage('Please Wait');
API.followers().
then(function(responseData){
if(typeof responseData === 'object'){
// $rootScope.hideLoadingMessage('Please Wait');
$scope.listedSensors = responseData.data[0];
console.log("Sensor",responseData.data);
console.log("Sensor",responseData.data[0].full_name);
$('#listSensorModal').modal('show');
console.log("Sensor",responseData.data);
console.log("Sensor",responseData.data[0].full_name);
}
else{
console.log("Failed to get Listed Sensor. Please try again",responseData);
}
},function(responseData){
console.log("Failed to get Listed Sensor. Please try again",responseData);
})}
my console looks like this:
Sensor [Object]0: Objectfull_name: "Skater Gal"id: "2351640229"profile_picture: "https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xft1/t51.2885-19/11906329_960233084022564_1448528159_a.jpg"username: "_skaterg1rl"__proto__: Objectlength: 1__proto__: Array[0]
navbar.js:45 Sensor Skater Gal
navbar.js:47 Sensor [Object]
navbar.js:48 Sensor Skater Gal
Am not getting the data to the list in my modal.
can anyone help me??
the problem I am having is I am trying to apply a click function on a div to a element inside a iframe, it works sometimes but sometimes it doesn't work and it's very random. Here is my code where I apply the click method:
<script type="text/javascript">
var yammerFrame = parent.parent.document.getElementsByTagName("frame")[1].contentDocument.getElementsByTagName("frame")[0].contentDocument.getElementsByTagName("iframe")[0];
$(yammerFrame).load(function() {
var yammerMessages = parent.parent.document.getElementsByTagName("frame")[1].contentDocument.getElementsByTagName("frame")[0].contentDocument.getElementsByTagName("iframe")[0].contentWindow.document.getElementById('yammerMessages');
$(document).ready(function() {
$(yammerMessages).click(function() {
$('#myModal').modal('show');
});
});
});
</script>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="text-align: center">
<button type="button" class="close" data-dismiss="modal">×</button>
<span>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Yammer_logo.png" alt="Yammer" style="width: 200px;height: 50px;">
</span>
</div>
<div class="modal-body" style="text-align: center">
<h4 id="modal-body-sender" style="font-weight:bold"></h4>
<h4 id="modal-body-date"></h4>
<div id="modal-body-well" class="well">
<h4 id="modal-body-message" style="color:black;word-wrap: break-word;"></h4>
</div>
</div>
<div class="modal-footer">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary" onclick="open_win()">Go To Post</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css/Site.css" type="text/css" />
</head>
<body>
<span id="yammer-login"></span>
<div id="yammerDiv">
<div id="yammerHeader">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Yammer_logo.png" alt="Yammer" height="17px;" width="50%">
</div>
<div id="yammerMessages" style="margin-top: 25px;">
<img id="loading-gif" src="http://i559.photobucket.com/albums/ss36/madszckey01/speakker/buffering.gif">
<div id="text-wrapper" style="width: 100%; height: 76%;">
<span id="message"></span>
</div>
<span id="sender"></span>
</div>
<div id="yammerButtons" style="display:none">
<button id="previous" type="button" class="btn btn-default btn-xs" aria-label="Left Align" onclick="onPrevious()" dataenter code here-toggle='tooltip' data-placement='top' data-original-title="Previous">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</button>
<input type="checkbox" id="myCheck" onclick="autoscroll()" data-toggle='tooltip' data-placement='top' data-original-title="Auto-Scroll" class='checkbox'>
<button id="next" type="button" class="btn btn-default btn-xs" aria-label="Right Align" onclick="onNext()" data-toggle='tooltip' data-placement='top' data-original-title="Next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</button>
</div>
</div>
Try this function with live.
$(yammerMessages).live('click', function() {
$('#myModal').modal('show');
});