Develop Reference

Button Load with ajax request but click event dont show up the model with ajax success function data

from my php page searching employee retrieve by ajax success function and displayed as button ! when i click on fetched button it works like post request 200 ok! but modal dont show up and not even updated with my new ajax request result !!
I want to display searched employees information via modal!
i have tried many approach!
click function, on click function, delegate function does not work!
click function, on click function, delegate function does not work!
even clcik event on parent element
button fetched by this request
$("#searchEmployeeForm").on('submit',(function(e) {
e.preventDefault();
if ( $("#selectCompany").val()!="" || $("#selectDepartment").val()!="" || $("#selectDesignation").val()!="" || $("#searchByName").val()!="" || $("#searchByID").val()!=""){
$.ajax({
url: "controller/employee/find_Employee.php",
type: "POST",
// Type of request to be send, called as method
data: new FormData(this),
contentType: false,
dataType: 'json',
cache: false,
processData:false,
success: function(data)
{
$('#listOfEmployee').empty();
$.each(data, function (i, empdetail) {
console.log(empdetail);
$('#listOfEmployee').append("<button class='list-group-item d-flex justify-content-between align-items-center viewEmployeeData' id= "+ empdetail.emp_id +">"+ empdetail.first_name + empdetail.last_name + "</button>" );
});
console.log("data:" + data);
}
});
}
else{
alert("Field Can not be Empty ");
}
}));
button on click event
$(document).on('click', '.viewEmployeeData', function (e){
e.preventDefault();
console.log('limon ');
var employee_id = $(this).attr("id");
alert(employee_id);
if(employee_id)
{
$.ajax({
url:"controller/employee/employee_info.php",
method:"POST",
dataType: 'json',
data:{employee_id:employee_id},
success:function(data){
$('.modal-title').html(data.firs_name);
$('#view_employee_data_modal').modal("show");
alert(data);
}
});
}
});
i expected button click event will display modal with my ajax request data!
NB: click event works but only its console.log and alert modal dont show up after ajax success function.

when ajax success return data and add in dom and that dom event can not bind directly so you bind event in main dom it mean return data fill in "listOfEmployee" dom here event bint so work perfectly.
$('#listOfEmployee').on('click','.viewEmployeeData',function(e){
e.preventDefault();
console.log('limon ');
var employee_id = $(this).attr("id");
alert(employee_id);
if(employee_id)
{
$.ajax({
url:"controller/employee/employee_info.php",
method:"POST",
dataType: 'json',
data:{employee_id:employee_id},
success:function(data){
$('.modal-title').html(data.firs_name);
$('#view_employee_data_modal').modal("show");
alert(data);
}
});
}
});

JQUERY: Accessing element cousin by class

Hi I have the following html code:
<li class="grey">
<div class="row">
<button id="test" style="width:50%;" class="btn btn-blue-white cartBtn">Add to Cart</button>
</div>
<div class="row">
Go To Checkout
</div>
</li>
When I load the page, I hide the checkout link button until the user clicks "add to cart". After they click add to cart my javascript looks like this:
$('.cartBtn').click(function () {
//do stuff for preprocessing
var url = "../Store/AddToCart";
$.ajax({
type: "GET",
url: url,
data: {
//add data
},
dataType: "json",
success: function (data) {
if (data.success == true) {
$(this).closest('li').find('.checkoutLink').show();
}
}
});
});
the link never shows back up. I have also tried using
$(this).parent().parent().find('.checkoutLink').show()
as well and had no luck. How do i use jquery to get this anchor tag and make it visible.

The problem is this, when called from within the success function it no longer refers to the outer this. Create a variable outside of Ajax that refers to the original this.
$('.cartBtn').click(function () {
var $this = $(this);
//do stuff for preprocessing
var url = "../Store/AddToCart";
$.ajax({
type: "GET",
url: url,
data: {
//add data
},
dataType: "json",
success: function (data) {
if (data.success == true) {
$this.closest('li').find('.checkoutLink').show();
}
}
});
});

Modal Popup not loading in partial view when calling from parent view

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.");
}

On PHP script end send message to jquery, print to page with jquery

I have a page with buttons, that when pressed send an ajax request through jquery to a PHP script. This script runs with these variables. When this PHP script is finished I would like to send a message back to the jquery function, which then prints out this message. Currently I have:
$('button').click(function () {
nombre = $('input').val();
buttonz = $(this);
buttonz.text('Loading...');
request = $.ajax({
type: "POST",
url: 'administrator.php',
data: {
'method': buttonz.attr('id'),
'results': nombre
},
});
request.done(function (response, textStatus, jqXHR) {
buttonz.text('Finished');
});
});
Instead of 'finished' I would like to echo a varaible from my php script.

First need to check console error if you have any error then try to alert response in success section try
$('button').click(function () {
nombre = $('input').val();
buttonz = $(this);
buttonz.text('Loading...');
$.ajax({
type: "POST",
url: 'administrator.php',
data: {
'method': buttonz.attr('id'),
'results': nombre
},
success: function (data) {
buttonz.text(data);
// or use buttonz.val(data);
}
});
});

You cannot ECHO from jQuery as this is PHP and the server-side script has already been run. What you need to do is enter the text or html into an existing element.
For example..
On your page (before ajax is done) create a blank DIV with space to put the response ie...
<div id="MyAnswerHere"></div>
Then in your ajax call in the success area add the code to insert the answer. For example
$("#MyAnswerHere").html(response);
Or if just text you could use...
$("#MyAnswerHere").text(response);
So in your code..
$('button').click(function () {
nombre = $('input').val();
buttonz = $(this);
buttonz.text('Loading...');
request = $.ajax({
type: "POST",
url: 'administrator.php',
data: {
'method': buttonz.attr('id'),
'results': nombre
},
});
request.done(function (response, textStatus, jqXHR) {
$("#MyAnswerHere").text(response);
buttonz.text('Finished');
});
});
And add the div to enter the message do with the ID that we are selecting in the DOM before hand.
`<div id="MyAnswerHere"></div>`

simply put the response from ajax in your button,
buttonz.text(response);
cheers

You could try something like this, which will change your button text when the ajax has succeeded:
$('button').click(function () {
nombre = $('input').val();
buttonz = $(this);
buttonz.text('Loading...');
request = $.ajax({
type: "POST",
url: 'administrator.php',
data: {
'method': buttonz.attr('id'),
'results': nombre
},
success: function (data) {
buttonz.text(data);
}
});
});

Change buttonz.text('Finished'); to:
buttonz.text('<?php echo json_encode(utf8_encode($your_Value))?>');

So why not just to echo the variable with php??
Change buttonz.text('Finished'); to:
buttonz.text('<?php echo $your_variable;?>');
The value of the variable will be parsed by the PHP engine, it will appear in your HTML page as requested

How to call an asp function when a submit button is clicked?

I'm new to asp. I have a submit button called "search" in a file called results.asp. I just need to run an asp function called "searchRecords" in the same file as the search button when the button gets clicked. Without redirecting to another page. I tried doing everything, using js, vb script... nothing works the way I want.
the submit button:
<form action="what goes here?">
<input type="submit" value="Search Records" name="search">
</from>
the function:
<% function show()
...stuff here....
%>
Also I found this asp code from another file that works in same kind of situation, but it does not work in my file.
<% if (request("button name")= "button value") then
function to call
end if
%>
Please help me to figure this out... thanks in advance...

With your case, I think you need to use Jquery ajax:
jQuery.ajax({
type:"POST" // Or GET
data:"id=12&name=abc",
dataType:"xml", // Default type - text
url:"/search/searchRecords", // URL of service
success: function (data){
}
});
If you use ASP.NET MVC, you can call a asp function direct. But with asp-classic, you only call a asp function through a service.

$.ajax({
type: "POST",
url: URL + "index.php/phpService/SaveClient/" + controllerVM_.TokenKey(),
data: JSON.stringify(ko.toJS(params)),
contentType: "application/json",
async: true,
dataType: 'json',
cache: false,
success: function (response) {
if (response.GetClientsResponse.Result != "Invelid Tokenkey !!!") {
}
else {
window.location.assign("Login.html");
}
},
error: function (ErrorResponse) {
if (ErrorResponse.statusText == "OK") {
}
else {
alert("ErrorMsg:" + ErrorResponse.statusText);
}
}
});