I have html page where I want to open dialog by button click and content of dialog should be dynamically generated.
The idea is the following:
I click button
JS(ajax)run my flask route , where http request to other site is executed and then json is returned
The returned json is passed to js (or html), then this json is parsed and according to found information, the elements (images as an example) are displayed in opened dialog
Python:
#app.route('/sales_inventory', methods=['POST'])
def tm_inventory(user):
response = some_function("authKey")
return make_response(jsonify(response)))
HTML:
<button class="inventory">Inventory</button>
<div class="modal">
<div class="modal-content">
<span class="close">×</span>
</div>
</div>
Elements should be generated inside div .modal-content
JS:
$(."inventory").click(function () {
$.ajax({data: {
user: $(this).next().text()
},
type: 'POST',
url: '/sales_inventory'
})
Js is not completed, because I have no idea how should it be
The class name and . should be wrapped by a string quotation. In your code the class indicator . is outside the string quotation.
According to your question your server is responding JSON data, so you should add dataType as JSON of your AJAX. Also add a success callback function which is automatically called when the server response. Of success function there is a parameter data which contains the response data as an object (JSON) and now using this data you can prepare your HTML and set in the certain place of the modal.
JS:
$(".inventory").click(function () {
// ^^^^^^^^^^^^
$.ajax({
data: {
user: $(this).next().text()
},
dataType: 'JSON',
type: 'POST',
url: '/sales_inventory',
success: function(data) {
// var prepared_html = using `data`
// $('.modal-body').html(prepared_html);
}
})
})
HTML:
<div class="modal">
<div class="modal-content">
<span class="close">×</span>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
</div>
</div>
Related
I am trying to call a modal on a partial view from a view but am not getting ajax success call, but dont know how to do it:
Here is what i have, javascript ajax code on my page:
var TeamDetailPostBackURL = '/BMApproval/GetMeetingApprovalData';
$(function () {
$(document).on('click','.LeadCode', function () {
//$(".LeadCode").click(function () {
debugger;
var $buttonClicked = $(this);
var id = $buttonClicked.attr('data-id');
var options = { "backdrop": "static", keyboard: true };
alert("load");
$.ajax({
type: "GET",
url: TeamDetailPostBackURL,
contentType: "application/json; charset=utf-8",
data: { "dataValue": id },
datatype: "json",
success: function (data) {
debugger;
$('#myModalContent').html(data);
$('#myModal').modal(options);
$('#myModal').modal('show');
},
error: function () {
alert("Dynamic content load failed.");
}
});
});
And parameters I am passing in ajax call
<td>#LPOPoint.LeadCode</td>
Also calling modal popup in the same javascript page which will popup on the partial view.
<div id='myModal' class='modal' style="overflow-y:hidden;">
<div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 20px; margin-bottom:20px;">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div></div>
I searched a lot in various forums but couldn't get any solution.
When am clicking on html link the popup doesn't load in the partial view.
And ("Dynamic content load failed."); is displayed as it doesn't get to success.
Basically I want to view data in modal popup in partial view based on the parameters from parent view. Any help would be appreciated.
At the first sight looks like you need TeamDetailPostBackURL variable to contain a proper URL including scheme, host (and port if needed) like 'http://example.com/BMApproval/GetMeetingApprovalData'
You can specify error parameter in the error callback to see what exactly is wrong
error: function (error) {
console.error(error)
alert("Dynamic content load failed.");
}
I have a question about combination of asp.net mvc and iframe.
I'm trying to edit retrieved data from db on iframe.
The problem is that when the page firstly loads the parent contents, iframe contents is also loaded and can't be edited later.
public ActionResult StudentDetail(string id)
{
Student student_data = null;
if (id != null)
{
student_data = getId(id);
}
else
{
return null;
}
return PartialView("StudentDetail",student_data);
}
As you can see above code,if any ID is selected by hyperlink of view,
it returns partial view for iframe.When it comes to this page at the first time,
becuase any Id isn't selected,it returns null.
Below code is snippet of the parent view.This calls controller and content is set by null when it comes to loading this page at the first time.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-content">
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="myFlame" class="embed-responsive-item" src="/Home/StudentDetail" frameborder="0" allowtransparency="false" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
After loading the parent page and iframe page, user push the hyperlink to pop up the iframe to edit data.The snippet of code is below,it calls javascript to send id to controller
<td>#student.id</td>
Code of javascript is below.
<script>
var TeamDetailPostBackURL = '/Home/StudentDetail';
$(function () {
$(".anchorDetail").click(function () {
var $buttonClicked = $(this);
var id = $buttonClicked.attr('data-id');
var options = { "backdrop": "static", keyboard: true };
$.ajax({
type: "GET",
url: TeamDetailPostBackURL,
contentType: "application/json; charset=utf-8",
data: { "Id": id },
datatype: "json",
success: function (data) {
debugger;
$('#myFlame').html(data);
$('#myModal').modal(options);
$('#myModal').modal('show');
},
error: function () {
alert("Dynamic content load failed.");
}
});
});
//$("#closebtn").on('click',function(){
// $('#myModal').modal('hide');
$("#closbtn").click(function () {
debugger;
$('#myModal').modal('hide');
});
});
</script>
After pushing a hyperlink,javascript send the data to controller and retrieve data from db and return partialView of StudentDetail.cshtml.but it still shows empty iframe.
How can I refresh the content of iframe?
I'm using jquery ajax in codeigniter framework to load a pop up modal on button click. I pass ajax request to a function in controller and receive some data which should be shown in my pop up modal. Number of labels of the modal is depend on the size of the array received by the ajax request.
I have no idea how to do this. But I tried of passing the size of the received array to a hidden type input field in form created on the pop up modal.
Following is my javascript.
<script type="text/javascript">
$(document).ready(function () {
$(document).on('click','#btn_more', function() {
empId = $('#employeeId').html();
fiter_employees(empId);
});
function fiter_employees(empId){
var empSet ={
empId: empId,
method: 'ajax'
};
var empSentUrl = 'http://localhost/eventmanagementsystem/index.php/employee/get_emp_positions';
$.ajax({
type: 'POST',
dataType: 'json',
url: empSentUrl,
data: empSet,
success: function(data){
$('#modal_pkg1').html(data.empPosition.length)
$('#employeePositions').modal();
}
});
}
});
In my pop up model I used the following codes which is not succeeded.
<div id="employeePositions" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Employee Name :</h4><br/>
<form>
<?php
for ($i=0; $i < ?>
<input type="hidden" id="modal_pkg1" value="modal_pkg1" />
<?php
; $i++) { ?>
<h4 class="modal-title" id="event_name"></h4>
<?php
} ?>
</form>
Can someone tell me the correct me of doing this please...
Your PHP code has executed the moment you load the page, so when you change the modal_pkg1 value, nothing will happen.
Also, the foor loop itself will not work on load, as it's expecting a number that is not there.
I suggest you do it fully in JS, remove all php code from your script; something like below :
in your Ajax success function :
.success(function(data){
var htmlStr = ''
for(var i=0;i<data.empPosition.length;i++){
htmlStr+='<whatever html element you want to display>'
}
$('form').html(htmlStr) // add the generated html string to the <form> element
$('#employeePositions').modal();
}
I need help inserting html into an empty div using .ajax(). I have the code below in a django project. The view and url work fine as does the alert message of the ajax .click function. The .ajax() 'success:' property is underlined as unused in pycharm.
The view is as follows:
def gen_teams(request):
return HttpResponse("<h1>Hello World</h1>")
urls:
url(r'^gen_teams/$', home_views.gen_teams, name='gen_teams'),
main.js:
$('#ajaxSubmit').click(function(){
alert('Creating Teams');
var ajaxDiv = $('#ajaxContent');
$.ajax({
url:"http://127.0.0.1:8000/gen_teams/",
datatype:"html",
type: "POST",
success: function(data) {
ajaxDiv.replaceWith(ajaxDiv.html(data));
}
});
});
HTML:
<p><button id="ajaxSubmit" class="btn btn-primary" onclick="">Ajax teams</button></p>
<div id="ajaxContent" class="content-container">
</div>
Try replacing:
ajaxDiv.replaceWith(ajaxDiv.html(data));
with:
$('#ajaxContent').html(data);
i'm having problem getting the value of a variable into the modal which is supposed to be openning. i have tried using post but nothing changed. Both codes are in index.php.
This is the jquery script passing the value
$(document).ready(function () {
$(".issue").click(function () {
var x = $(this).attr("id");
$.ajax({
url: "index.php",
type: "GET",
data: {data1: x,},
success: function () {
$("#modal2").modal('show');
}
});
});
});
And i tried echoing the id of class .issue but it doesn't works
<div class="modal fade" role = "dialog" id = "modal2" aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class="dialog">
<div class="modal-content">
<div class="modal-body"><?php echo $_GET["data1"]; ?></div>
</div>
</div>
</div>
You're missing the variable in the success method. It should be success:function(ajaxData){}
So in all:
var x = $(this).attr("id");
$.ajax({
url: "index.php",
type: "GET",
data: {data1: x,},
success: function (ajaxData) { // ajaxData is the return data from php
// add the data to the modal
$("#modal2 .modal-body").html(ajaxData);
$("#modal2").modal('show');
}
});
Are you sending the data server side to save it, or grab information from the database? If all you're trying to do is move the data to the modal, ajax isn't necessary.
Part of me suspects you're not properly calling and passing the data to php, if you really do need ajax. The php you send the ajax data to should be a separate file, that receives it, processes it, and echos it back to the ajax success function. Then the ajax function puts the data in the modal and displays the modal.
Hope one of those thoughts points you in the right direction.