I'm trying to get the height of an element before and after an ajax call to change the content of this element (for learning reasons).
Example:
$(document).ready()
calcHeigth('#listar-cursos');
});
funcion calcHeigth(idElement){
console.log($(idElement).outerHeight(true));
}
<div id="listar-cursos">all the content is here</div>
When the document is ready, calcHeigth function returns 200px.
There is a form on that page that is sent by ajax and when the request ends I just empty the contents of the element, and then call calcHeigth again (in ajaxComplete event).
$("#formSeacrh").submit(function () {
if ($(this).valid()) {
var url = $(this).attr("action");
var data = $(this).serialize();
$.ajax({
type: "POST",
url: url,
data: data,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success: function (data) {
$("#listar-cursos").html("");
},
complete: function () {
Completo();
},
beforeSend: function () {
Carregando();
},
error: function () {
Falha();
},
ajaxComplete: function () {
calcHeigth('#listar-cursos');
}
})
return false;
}
return false;
});
The result from calcHeigth is always 200px, like when the document is ready, even with the empty element. calcHeigth not realized that the element was changed. The result that I expected was 40px. How to fix and get the current height?
$("#formSeacrh").submit(function () {
if ($(this).valid()) {
var url = $(this).attr("action");
var data = $(this).serialize();
$.ajax({
type: "POST",
url: url,
data: data,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success: function (data) {
$("#listar-cursos").html("");
Completo();
calcHeigth('#listar-cursos');
},
beforeSend: function () {
Carregando();
},
error: function () {
Falha();
}
})
return false;
}
return false;
});
you only need 1 ready function, not 3. i hope this works now how you wish.
if you do your calc after your clear the html from the node, the height should be 0.
by the way. $('listar-cursos').empty() is better than .html("")
Related
I want to open xml file with jquery , but when I want to display the value of open outside the function , I have an undefined error .
Here the code :
$(document).ready(function () {
var open ;
$.ajax({
type: "GET",
url: "../build/js/openTickets.xml",
dataType: "xml",
success: nv =function(xml) {
$(xml).find("mestickets").each(function () {
open=($(this).find("nbopenTickets").text());
console.log(open);//It works
});
}
})
console.log(open);//undefined
That is what Ajax does, the processed data will be handled in the success handler.
What you can do if you really want to is create another function where you can process your data.
$(document).ready(function () {
var open = null;
$.ajax({
type: "GET",
url: "../build/js/openTickets.xml",
dataType: "xml",
success: nv = function (xml) {
$(xml).find("mestickets").each(function () {
open = $(this).find("nbopenTickets").text();
openData(open);
});
}
});
function openData(open) {
console.log(open);
}
});
At following method i'm trying to get grid selected row. By the way, i use syncfusion component library.
My question when i call the grid.rowSelected, function's inside works last. So i can't pass model in ajax.
What's the reason of it ?
function editPackage() {
var editPackageModel;
var grid = document.getElementById("Grid").ej2_instances[0];
grid.rowSelected = function(args) {
console.log(args.data);*// works last*
editPackageModel = args.data;*// works last*
}
$.ajax({
type: "GET",
url: "/Package/Edit",
contentType: "application/json; charset=utf-8",
datatype: "json",
data: editPackageModel,
success: function (result) {
$('#generalModal').html(result);
},
error: function () {
alert("Dynamic content load failed.");
}
});
}
I'm not sure exactly what is the situation with "grid", i assume you have that element ready before the function is called, so try this:
var grid = document.getElementById("Grid").ej2_instances[0];//Get node reference.
grid.rowSelected = function (args) {//Setup event listener.
editPackage(args.data);//Pass the data from the event to your function
}
function editPackage(editPackageModel) {//Get the "model" and send ajax
$.ajax({
type: "GET",
url: "/Package/Edit",
contentType: "application/json; charset=utf-8",
datatype: "json",
data: editPackageModel,
success: function (result) {
$('#generalModal').html(result);
},
error: function () {
alert("Dynamic content load failed.");
}
});
}
I make an Ajax Request that adds content to the page with HTML from the back-end, and then I make another Ajax Request that modifies that dynamically added HTML.
$("#list-customers-button").click(function () {
var selectedAcquirer = $("#acquirer-select").val();
if (selectedAcquirer === "adyen") {
if (listed) {
listed = false;
$("#customer-list-area").hide().html('').fadeIn(fadeTime);
} else {
listed = true;
$.ajax({
type: "GET",
url: "/adyen_list_customers",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$("#list-progress").show();
},
success: function (data) {
console.log(JSON.stringify(data));
$("#customer-list-area").hide().html(data["response_html"]).fadeIn(fadeTime).promise().done(function () {
$(".collapsible").collapsible();
resetDatepicker();
});
},
complete: function () {
$(document).on("change", "#file-download-datepicker", function () {
$("#file-download-progress").hide();
$("#file-download-date").val(selectedDate);
fileDownloadData = $("#file-download-form").serialize();
displayMessage(fileDownloadData);
$.ajax({
type: "POST",
url: "/adyen_update_file_list_by_date",
data: fileDownloadData,
beforeSend: function () {
$("#file-download-progress").show();
},
success: function (response) {
},
complete: function (response) {
$("#file-download-progress").hide();
console.log(response.responseText);
// Doesn't work. Selector should exist, but it doesn't.
$("#merchant-file-list").html(response.responseText);
},
error: function (response) {
displayMessage(response["responseText"]);
}
});
});
},
error: function (data) {
displayMessage(data);
},
});
}
} else if (selectedAcquirer === "stone") {
displayMessage("Adquirente indisponível no momento.");
} else {
displayMessage("É necessário selecionar uma adquirente.");
}
});
I get a perfect HTML response from the server, but selectors that were previously added with HTML also from the server (#file-download-progress, #merchant-file-list) are completely ignored. .html() doesn't work, nor anything, and I don't know how to use .on() to work around this because I just need to access that content. Since the ajax request is being made after the previous one is complete, they should be able to be accessed. They just don't exist nowhere in time.
I made 3 navigation navbarheader.html, navbar.html and sidebar.html.Only navbarheader.html is loading but others is not loading. if I remove navbarheader.html navbar.html is loading.
<script type="text/javascript">
// let $ = requirejs('./jquery.min.js');
//mainWindow.$ = $;
$(document).ready(function () {
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
if (navbarheaderData) {
$('#navbarheader1').html(navbarheaderData);
} else {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarheaderStorage', data);
$('#navbarheader1').html(data);
var navbarData = localStorage.getItem('navbarStorage');
if (navbarData) {
$('#navbar1').html(navbarData);
} else {
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarStorage', data);
$('#navbar1').html(data);
var sidebarData = localStorage.getItem('sidebarStorage');
if (sidebarData) {
$('#sidebar1').html(sidebarData);
} else {
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('sidebarStorage', data);
$('#sidebar1').html(data);
}
});
}
}
});
}
}
});
}
});
</script>
That's because you are using ajax requests, which stands for Asynchronous JavaScript and XML, but can be used with other datatypes (like text and therefore json), so the lines where you retrieve navbarheaderData, navbarData, and sidebarData are being executed immediately after you launch the requests, which would explain why only the first one would load (because there's only time for the first one to get a response before you start rendering the data).
What you really want is
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarheaderStorage', data);
//console.log(localStorage.getItem('navbarheaderStorage'));
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
$('#navbarheader1').html(navbarheaderData);
}
});
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarStorage', data);
//console.log(localStorage.getItem('navbarStorage'));
var navbarData = localStorage.getItem('navbarStorage');
$('#navbar1').html(navbarData);
}
});
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('sidebarStorage', data);
//console.log(localStorage.getItem('sidebarStorage'));
var sidebarData = localStorage.getItem('sidebarStorage');
$('#sidebar1').html(sidebarData);
}
});
});
</script>
which could be simplified into the following if you don't need to use local storage.
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
$('#navbarheader1').html(data);
}
});
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
$('#navbar1').html(data);
}
});
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
$('#sidebar1').html(data);
}
});
});
</script>
#Penguen replied and changed their above code.
I see that you don't want to send an ajax request unless you need to, which is functioning as some sort of weird caching mechanism. In this case the way you have written this, we only had navbarHeaderData cached and not the rest, then the page would fail to render properly. The following way not only protects against what I said, but is also faster than if the rewritten method works as if you were loading this for the first time and didn't have this cached, then the ajax requests would be sent out almost at the same time, rather than one by one.
<script type="text/javascript">
// let $ = requirejs('./jquery.min.js');
//mainWindow.$ = $;
$(document).ready(function () {
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
if (navbarheaderData) {
$('#navbarheader1').html(navbarheaderData);
} else {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarheaderStorage', data);
$('#navbarheader1').html(data);
}
});
}
var navbarData = localStorage.getItem('navbarStorage');
if (navbarData) {
$('#navbar1').html(navbarData);
} else {
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarStorage', data);
$('#navbar1').html(data);
}
});
}
var sidebarData = localStorage.getItem('sidebarStorage');
if (sidebarData) {
$('#sidebar1').html(sidebarData);
} else {
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('sidebarStorage', data);
$('#sidebar1').html(data);
}
});
}
});
</script>
From what I see, I see 3 templates being fetched by making AJAX calls and then you are caching the template in your local storage and then use that to render the 3 sections of your web page.
Here is what you are doing it wrong. The render part of the code is written all together in the window.load and does not care about whether the AJAX call is complete or not. As your calls are asynchronous the code will not wait until the response template is fetched.
What you can do instead is have a common render function which each ajax call success method can call.
You are suffering from asynchronous issues, you should do the work inside each request. I dont think its related to local storage.
<script type="text/javascript">
$(document).ready(function () {
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
if (navbarheaderData) {
$('#navbar1').html(data);
} else {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
$('#navbar1').html(data);
}
});
}
.... and so on...
});
i have a problem with ajax post function. Ajax function doesn't working without alert message. If add alert message, div content will be refresh and working my code.
I have a mv3 application. And post form data to this javascript function. Like that:
function Add_Definition() {
var data = $.extend({ call: "Add_Definition", url: "/Definition/Definition", type: "post", dataType: "html", data: $("#definition_form").serialize() }, data);
Load(ajaxrequest(data));
}
function Load(val) {
if (val == true) {
var data = $.extend({ call: "Load", render: $("#render"), url: '#Url.Action("Definition", "Definition")', type: "get", dataType: "html", data: { "groupid": '#Request.QueryString["groupid"].ToString()'} }, data);
ajaxrequest(data);
}
}
My ajax javascript function is below.
function ajaxrequest(param) {
var result = true;
//alert("hi there");
$.ajax({
type: param.type,
url: param.url,
data: param.data,
dataType: param.dataType,
success: function (result) {
$(param.render).empty();
$(param.render).html(result);
result = true;
},
error: function (request, status, error) {
result= false;
}
});
return result; }
If remove // char from javascript code, it will not work, (need refresh page), if have a alert message, content will be refresh with load function.
How is error?
you can also direct call like
var divElem = $('#yourdivid').load('#Url.Action("Definition", "Definition")');