I want to generate dynamic html content with php and jQuery (1.11).
It works but updates don't appear in source code and i'm worry about that because i think it's not good for search engines. For example, i can't test structured data (schema.org) on google tools.
index.php
<script>
function displayRecords(numRecords, pageNum) {
$.ajax({
type: "GET",
url: CalRoot+"/events-by-agenda.php",
data: "show=" + numRecords + "&pagenum=" + pageNum,
dataType: "html",
cache: false,
beforeSend: function() {
$('.loader').show();
},
success: function(data) {
$("#results").html(data);
$('.loader').hide();
}
});
$(function() {
$(".pagination").click(function() {
$('html,body').animate({
scrollTop: $(".contentDescription").offset().top
}, 2000, 'swing');
});
});
}
$(document).ready(function() {
displayRecords(20, 1);
});
</script>
HTML section of index.php
<div id="results"></div>
<div class="loader"></div>
events-by-agenda.php contains mysql query, results in html and
pagination
I read a lot of things about this, event delegation, use context(this), add .on method on a button for example but nothing works
Related
<script>
$("button").on("click", function() {
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
$(".author").html(json[0].title);
$(".quote").html('"'+json[0].content+'"');
});
});
</script>
Situation: I click, the data is loaded. I click again, nothing changes.
Codepen: http://codepen.io/anon/pen/vxGgaZ
Reference: https://quotesondesign.com/api-v4-0/
The problem is because the first response is being cached. You can solve that by adding a $.ajaxSetup() call which stops the caching:
$.ajaxSetup({
cache: false
})
Updated Codepen
Alternatively, use $.ajax() and set cache directly in the settings:
$("button").on("click", function() {
$.ajax({
url: 'http://quotesondesign.com/wp-json/posts',
type: 'get',
cache: false,
data: 'filter[orderby]=rand&filter[posts_per_page]=1',
success: function(json) {
$(".author").html(json[0].title);
$(".quote").html('"' + json[0].content + '"');
}
});
});
Try Like This:
Maybe it's help you
<script>
$(document.body).on("click", 'button', function() {
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
$(".author").html(json[0].title);
$(".quote").html('"'+json[0].content+'"');
});
});
</script>
I am trying to open content into a div on click, I can't figure out where I am going wrong any help is much appriciate. Thank you
Html:
<li><a id="hrefid" href="#link">Link</a></li>
<div id="content"> </div>
Jquery:
$('#hrefid').on('click', function (e) {
var load = $(e.target).attr("href");
if(load == "#link") {
$.ajax({
type: 'post',
url: "/page/test/272.html",
complete: function (event) {
$("#content").contents().remove();
$("#content").append(event.responseText);
}
});
}
});
Your intended operation is a GET operation as far as i understand, so instead of type: 'post' make it type: 'get'
jquery load will be much better option, try the following code
$('#hrefid').on('click', function (e) {
var load = $(e.target).attr("href");
if(load == "#link") {
$( "#content" ).load( "/page/test/272.html", function() {
//anything after load is complete
});
}
});
Can't get this plugin to work for me: https://github.com/morr/jquery.appear
Using Ajax to refer to plugin from this CDN: http://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js
What am I doing wrong? I want an alert when div id #footer is in viewport.
$.ajax({
url: '//cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js',
dataType: 'script',
cache: true,
success: function() {
$("#footer").appear(function() {
alert('I see a footer!');
});
}
});
Using the demo page of the plugin I achieved to make it work.
First make the footer element able to fire 'appear' event when it becomes visible on the viewport:
$("#footer").appear();
Then listen for the event like this:
$("body").on("appear", "#footer", function() {
// Do something...
});
Code snippet:
$.ajax({
url: '//cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js',
dataType: 'script',
cache: true,
success: function() {
$("#footer").appear();
$("body").on("appear", "#footer", function() {
alert('I see a footer!');
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height: 300px">Scroll down</div>
<div id="footer">Footer</div>
I have this javascript code which works only without <!DOCTYPE HTML>.
This code is used for an infinite scroll pagination.
I tried to trigger an alert when the bottom of the page hits but that also does not work.
What is wrong with this code ?
var ajax_arry=[];
var ajax_index =0;
$(function(){
$('#loading').show();
$("#pagination").hide();
$.ajax({
url:"/ajax",
type:"POST",
data:"actionfunction=showData&page="+page_nr+"&view="+filter,
cache: false,
success: function(response){
$('#loading').hide();
$('#demoajax').html(response);
}
});
$(window).scroll(function(){
if(ajax_arry.length>0){
$('#loading').hide();
for(var i=0;i<ajax_arry.length;i++){
ajax_arry[i].abort();
}
}
var page = $('#demoajax').find('.nextpage').val();
var isload = $('#demoajax').find('.isload').val();
if ((($(window).scrollTop()+document.body.clientHeight)==$(window).height()) && isload=='true'){
$('#loading').show();
$.ajax({
url:"/ajax",
type:"POST",
data:"actionfunction=showData&page="+page+"&view="+filter,
cache: false,
success: function(response){
$('#demoajax').find('.nextpage').remove();
$('#demoajax').find('.isload').remove();
$('#loading').hide();
$('#demoajax').append(response);
}
});
ajax_arry[ajax_index++]= ajaxreq;
}
return false;
});
});
Other script used in the same page is bootstrap.min
change if to
if ($(window).scrollTop()+$(window).height() == $(document).height() && isload=='true'){
<script type="text/javascript">
$(document).ready(function() {
var page = 0;
$(window).scroll(function () {
if ($(document).height()-$(document).height()*0.2 <= $(window).scrollTop() + $(window).height()) {
$.ajax({
type: "POST",
url: "/",
dataType: "json",
data: { 'page' : page, 'csrfmiddlewaretoken': '{{csrf_token}}'},
success: function(data) {
obj1 = JSON.parse(data.fulldata);
var newHTML = '<a href = "" >somecode</a>';
$(".newdata").append(newHTML);
},
error: function(data) {
// alert("error")
}
});
}
}
});
</script>
i have readed this link for dynamically added elements, that we must bind the function to one of it's parents
...but no success
i am not pasting the entire code here. suppose code is correct and working fine. only when i am clicking the loaded element its not working..
Thanks in advance
full code