jQuery Ajax Call
5 posts Page 1 of 1
jQuery Ajax Call
Last edited by Chikwado on Tue Jan 27, 2015 4:53 am, edited 18 times in total.
Re: jQuery Ajax Call
@Chikwado,It isn't possible with your current code without making a few alterations.
What I would do is create a function that will load a file of your choosing into the element of your choosing.
Like So...
- Code: Select all
<!DOCTYPE html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready
(
function()
{
function loadFileIntoElement(el, file)
{
$(el).load(file);
}
$("#btnLoad").click
(
function()
{
loadFileIntoElement('#div','demo_text.txt'),
loadFileIntoElement('#div2','demo_text2.txt')
}
)//$("#btnLoad").click
$("#btnClear").click
(
function()
{
$('#div').empty(),
$('#div2').empty()
}
)//$("#btnClear").click
}//function()
);//$(document).ready
</script>
</head>
<body>
<div id="div"></div>
<div id="div2"></div>
<button class="button" id="btnLoad"> Get External Content </button>
<button class="button" id="btnClear"> Clear External Content </button>
</body>
</html>
Peace,
Vital-eMedia
Re: jQuery Ajax Call
Thanks. But is it possible to load the 2 content automatic by removing triggerable button?Last edited by Chikwado on Sun Jan 25, 2015 7:40 am, edited 2 times in total.
Re: jQuery Ajax Call
@Chikwado,Yes, as follows.
All I did was remove the button click functions, causing the loadFileIntoElement
function to be executed as soon as the document is loaded.
- Code: Select all
<!DOCTYPE html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready
(
function()
{
function loadFileIntoElement(el, file)
{
$(el).load(file);
}
loadFileIntoElement('#div','demo_text.txt'),
loadFileIntoElement('#div2','demo_text2.txt')
}//function()
);//$(document).ready
</script>
</head>
<body>
<div id="div"></div>
<div id="div2"></div>
</body>
</html>
Peace,
Vital-eMedia
Re: jQuery Ajax Call
LoadThis method allows to make Ajax call and to send using both Get and Post methods.
var loadUrl = "TestPage.htm";
$(document).ready(function () {
$("#load_basic").click(function () {
$("#result").html(ajax_load).load(loadUrl, function (response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#dvError").html(msg + xhr.status + " " + xhr.statusText);
}
}
);
return false;
});
--
Website Designer with 7 years experience as WordPress Developer. Affordable, Professional and Experienced. 100% Satisfaction. 24/7 Available.
Website Designer with 7 years experience as WordPress Developer. Affordable, Professional and Experienced. 100% Satisfaction. 24/7 Available.
Page 1 of 1