i am including a html page(say b.html) to a html page(a.html) using jquery ,the b.html page contains 6 links in it ..i want to display them below the php content of a.html,but before php content loads b.html is displayed .how can i get html page below php ??
<script>(a.html)
jQuery(document).ready(function(){
$("#includedContent").load("/templates/default/property/tab.html");
});
</script>
in html page (a.html)
<div id="includedContent"></div>
I think your problem can be resolve via ajax
<script>(a.html)
$(document).ready(function(){
$.ajax({
type: "POST",
url: '/templates/default/property/tab.html',
//or b.html
data: form_field,
success: function(d){
$('#includedContent').html(d);
},
});
});
</script>
in html page (a.html)
<div id="includedContent"></div>
Related
I use ajax reload for my table.php page. I`m using material.min.js from google material design for some features like tooltips. But after the page reload with ajax, material.min.js stop working.
My index.php include table.php, where I have:
<script>
$(document).ready(function(){
setInterval(function(){
$.ajax({
url: "table.php",
cache: false,
success: function(body){
$(".page-content").html(body);
}
});
},10000);
});
</script>
Thanks for all, I have find the answer with adding this:
componentHandler.upgradeAllRegistered();
I developed a SLIDING page site which has only one index page and 4-5 different DIV section distinguished by DIV id, here is the link: http://gosick.tk/
name: 08093103002
pass: mak
but it take quite a long time to load because the whole site is only 1 page and the full page is actually 9200 PX;
now I want to load each DIVISION by id="" wise by AJAX when I click the menu at a time or
pls give me any solution that I can speed up my content load during form action urgent
"now I want to load each DIVISION by AJAX "
$.ajax({
url: 'test.html',
dataType: 'html',
success: function(html) {
var div = $('#loadDivId', $(html)).addClass('classname');
$('#wheretoloadId').html(div);
}
});
Edit : This works only if your div is a part of ajax response?
this will open the link of anchor tag in the div content
<script>
$(document).ready(function() {
$('a').each(function(){
$(this).on("click",function(e) {
console.log(e);
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
});
</script>
I have a post which has 3 extra custom text field and it has some content.now i have link on front and to popup that 3 fields content.When page load they are in display none mode but when i click link it opens in fancybox popup.Now i want to generate pdf of each file using tcpdf or any other easy way i am using tcpdf for my purpose but i get all 3 fields in single pdf so i use ajax when i click link it takes anchor tag value and pass to the pdf parameter via ajax but nothing seems to work here is my code for ajax call in single.php
<script type="text/javascript">
jQuery(function($){
$('nav a.cboxElement').on('click', function(){
alert('hi');
var nv = $(this).text().toLowerCase().replace(/\s+/g, "_");
alert(nv);
$.ajax({
type: "POST",
url: '<?php echo get_template_directory_uri(); ?>/popupdatatopdf.php',
data: {valueMin : nv}
}).done(function(result) {
alert(result);
console.log(result);
});
});
});
</script>
Below code if for popupdatatopdf.php i can see hello printed and can can see hello123 in pdf but the data which i got via ajax request not printing in pdf i checked in console and i can see value of request there but it does not get prited i pdf
echo "hello";
$pdfname="uu";
$mlm=$_REQUEST['valueMin'];
$nn="hell0123";
$html3.="<div style='font-size:23px;'>".$mlm.$nn."</div>";
$html3.="<div style='font-size:23px;'>ppc</div>";
I am trying to refresh a div with jquery load(); but the load displays the correct information but duplicates entire parts of the page that arent in the div
$.ajax({
type: 'POST',
url: $(this).attr('action'),
cache: false,
data: $("#uses_form").serializeArray(),
success: function(data)
{
$('#uses_form_div').load('#uses_form_div');
}
});
return false; });
i think you are having a misunderstanding..
if you want to load an external url into the div block
$('#uses_form_div').load("./a.file");
will do it. see the api docs.
Or if you are trying to load the ajax response of the $.ajax call into the div, it should be
$.ajax({
type: 'POST',
url: $(this).attr('action'),
cache: false,
data: $("#uses_form").serializeArray(),
success: function(data)
{
$('#uses_form_div').html(data); // see here
}
});
UPDATED according to comments below:
if the case of an included page to be refreshed. I have two ways to recommend.
make the included file as a separate url and load it initially. so instead of include you will be loading it via jquery as the page loads by a jquery load call. and when you want to refresh it you can do $('#uses_form_div').load("./a.file");
you can put it as include it self and when you need to update, make an ajx request get the data back. Here you have 2 choice. You can build the dom at server and give html as ajax response and simply $("#uses_form_div").html(data) or get the response as json
and build your dom at client side and load it via same $("#uses_form_div").html(data).
I also had the same problem but finally found the answer
<script type="text/javascript">
function recp() {
setInterval(function()
{
$("#result").load(location.href+ ' #my');
});
}
</script>
<div id="result">
<div id="my"><?php echo date('a:i:s'); ?></div>
</div>
I have a PHP file that contains a form and which submits back to itself. Is there any way to show a loading animation after the form is submitted and run until the page is loaded?
If you want to show progress indicator while the form is submitting why dont you use AJAX?
$("form").submit(function(e) {
e.preventDefault();
$(".loading").show();//Assuming you have a container which has appropriate style and image to show the loading image
$.post( {
url: $(this).attr("action"),
data: $(this).serialize(),
success: function(){
$(".loading").show();
//Write code here to handle on success
}
});
});
This is trivial. Assuming you have a hidden spinner/loading image somewhere on your page with id 'loadingImg':
$("form").submit(function() {
$("#loadingImg").show();
});
Demo: http://jsfiddle.net/yFaAj/1/