JQuery not recognizing the dynamically added data of the table. The first two button below the sample label function well, which i declared as a static markup just to test and it works, but the button with the same class in the table not function. Im so nuts with this problem.
<a class='btnView' href='#viewModal' data-toggle'modal' =value='FA-0000000'><i class='icon-eye'></i></a>
loadTable.js
var base_url = window.location.origin;
$(document).ready(function(){
url = base_url+"/codeigniter/index.php/AssistanceMonitoringModule/assistanceMonitoring/loadTbodyHome";
alert("loadtable.js");
$.ajax(
{
type: "GET",
url: url,
success: function(data){
$("#loadTbodyHome").html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("XHR:"+xhr.status+"Error:"+thrownError);
}
});
$('#searchFromHomeTable').keyup(function(){
url = base_url+"/codeigniter/index.php/AssistanceMonitoringModule/assistanceMonitoring/loadTbodyHomeSearch";
//alert('pumasok');
search = $("#searchFromHomeTable").val();
$.ajax(
{
type: "GET",
url: url,
data: "toSearch="+search,
success: function(data){
//alert(data);
$("#loadTbodyHome").html('');
$("#loadTbodyHome").html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("XHR:"+xhr.status+"Error:"+thrownError);
}
});
});
});
dataModal.js
var base_url = window.location.origin;
$(document).ready(function(){
alert("datamodal.js");
$(".btnView").click(function(){
alert($(this).attr('value'));
url = base_url+"/codeigniter/index.php/AssistanceMonitoringModule/assistanceMonitoring/viewInfo";
$.ajax(
{
type: "GET",
url: url,
data: "ID="+$(this).attr('value'),
success: function(data){
//alert(data);
//alert(data);
$("#viewModalBody").html('');
$("#viewModalBody").html(data);
$("#viewModal").attr('aria-hidden',false);
$("#viewModal").fadeIn();
},
error: function (xhr, ajaxOptions, thrownError) {
alert("XHR:"+xhr.status+"Error:"+thrownError);
}
});
});
});
Is the jquery functions not recognizing the newly added markup if its already declared?
Thanks.
You need to use event delegation for dynamically loaded elements:
$(document).on('click','.btnView',function(){
// Your code here
});
Please note that your HTML for the button is also invalid, you need to remove = before value attribute and I'd suggest you to use data-* attribute instead:
<a class='btnView' href='#viewModal' data-toggle'modal' data-value='FA-0000000'><i class='icon-eye'></i></a>
Related
Here is my code and its not print or display my json data in ckeditor
function getRules(){
$.ajax({
url: "api",
type: "POST",
data: {
version:'0.1'
},
dataType: "json",
success:function(response){
console.log(response.data.recordslist.RulesDetails);
CKEDITOR.instances.txtEdit.setData(response.data.recordslist.RulesDetails);
},
error: function (xhr, ajaxOptions, thrownError) {
//swal("Error!", "Please try again", "error");
}
});
}
If Your URL is correct and you have URL by the name of api only edit success function to
success:function(response){ $('#txtEdit').text(response); }
this show a result in array you need to extract the array.
if you don't want to extract the array. remove
dataType: "json"
it work fine. and write the data in text editor.
here is about a javascript widget DataTables. An example can be found here.
sorry, i am not a javascript specialist. How can i transfer the selected row (practically my objects from server) back to the server in form of json-format ?
i did try to do it with this approach, but it doesn't work:
$('#save_btn').click( function () {
//table.row('.selected').remove().draw( false );
console.log ( table.rows('.selected').data());
var stringData = table.rows('.selected').data().serialize();
$.ajax({
url: '${pageContext.request.contextPath}/ajax/storeSelectedContacts',
data: stringData ,
type: "POST",
cache: false,
success: function (savingStatus) {
alert("success");
},
error: function (xhr, ajaxOptions, thrownError) {
alert("error")
}
});
} );
many thanks
First, its return array of objects.
var stringData = table.rows('.selected').data();
Second, for convert array to JSON ...
var aData = table.rows('.selected').data();
var sData = JSON.stringify(aData)
and for send to server you slould indicate that is JSON dataType: 'json'
$.ajax({
url: '${pageContext.request.contextPath}/ajax/storeSelectedContacts',
data: sData ,
type: "POST",
cache: false,
dataType: 'json',
success: function (savingStatus) {
alert("success");
},
error: function (xhr, ajaxOptions, thrownError) {
alert("error")
}
});
} );
I want to start some Javascript code after some file download from another domain.
jQuery.support.cors = true;
var formVars = $("form[name='myForm']").serialize();
var ajaxUrl = "http://some/path/openFilename.xlsx";
$.ajax({
url: ajaxUrl, type: 'GET', cache: false, data: formVars, timeout: 300000,
success: function (data) {
//Do some stuff here
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error" + thrownError);
},
complete: function (data) {
closeWaitScreen();
}
});
Often read solution is
window.location = ajaxUrl;
but this does not work for me, because it starts a new request without submitting the data from the form. (Same with window.open)
Here is my code that works without option to handle closeWaitScreen() after:
$("form[name='jasperlogin']").submit();
Of course also starts a new request when its used in the $.ajax
Any ideas how to handle it?
I am trying to call a page with jQuery Ajax and then display just a simple response if it worked or not, but it doesn't seem to get anything done. In FireBug I don't even get an error. What am I doing wrong here?
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$('.doit').click(function (e) {
e.preventDefault();
$.ajax({
url: "https://www.domain.com/page.php?do=it",
type: "GET"
success: function (data) {
$(".result").html('<strong>Done!</strong>');
},
error: function (xhr, ajaxOptions, thrownError) {
$(".result").html('<strong>Houston, we have a problem.</strong>');
},
timeout: 15000
});
});
</script>
Do it
<div class="result"></div>
You missed the comma after type: "GET". Also, as mentioned by #blex in a comment, you should put your bindings inside an ondomready context, to make sure that your element has been loaded before binding.
$(function(){
$('.doit').click(function (e) {
e.preventDefault();
$.ajax({
url: "https://www.domain.com/page.php?do=it",
type: "GET",
success: function (data) {
$(".result").html('<strong>Done!</strong>');
},
error: function (xhr, ajaxOptions, thrownError) {
$(".result").html('<strong>Houston, we have a problem.</strong>');
},
timeout: 15000
});
});
});
$('#deviceLoadMore') is a link. When this link is being clicked, it will trigger a ajax to the web service I have created.
The problem I'm having now is it keeps on throwing this error in the console.log
Uncaught TypeError: Converting circular structure to JSON. But when I just paste the ajax part in the console.log, it able to retrieve the data back. I have checked that all the value is just a normal string and integer.
I was wondering why i can trigger in console log without having any issue and couldn't if i just click on the link?
var currentContextSection = '<%=currentSection %>';
var currentTemplateIds = '<%=templateIds %>';
var currentItemPerPage = <%=itemPerPage %>;
var currentPageIndex = <%=currentPage %>;
var arguments = { templateIds:'<%=templateIds %>' , currentSection:'<%=templateIds %>', currentPage:currentPageIndex, itemPerPage:currentItemPerPage };
$(document).ready(function () {
$('#deviceLoadMore').click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/AJAX/WS.asmx/GetItems",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(arguments),
dataProcess: false
}).done(function (data) {
test = data;
}).fail(function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
});
});
});
------ EDIT -------
If I have this:
var arguments = {"templateIds":currentTemplateIds ,"currentSection":currentContextSection,"currentPage":currentPageIndex,"itemPerPage":currentItemPerPage};
and executing with the ajax data:JSON.stringify(arguments), i will get the following errror:
Converting circular structure to JSON.
When I console.log the "arguments", it displays:
Object {templateIds: "963C1D18A93849309D6014CE2135173C", currentSection: "Personal", currentPage: 1, itemPerPage: 8}
And it displays this when I console.log JSON.stringify(arguments):
"{"templateIds":"963C1D18A93849309D6014CE2135173C","currentSection":"Personal","currentPage":1,"itemPerPage":8}"
After google around for some successfully implemented ajax sample, I changed my code to the following, and it works! And I have no idea why it works this way.
$(document).ready(function () {
$('#deviceLoadMore').click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/AJAX/WS.asmx/GetItems",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({"templateIds":currentTemplateIds ,"currentSection":currentContextSection,"currentPage":currentPageIndex,"itemPerPage":currentItemPerPage}),
dataProcess: false
}).done(function (data) {
test = data;
}).fail(function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
});
});
});
try after removing, JSON.stringify from
data: JSON.stringify(arguments),