Develop Reference

Source code (DOM) doesn't update after ajax request

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

Button JQuery event only working once, why?

<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>

Loading a page in div using jquery and ajax

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
});
}
});

jQuery force/trick .scroll() to bubble

Is it possible to force or trick the .scroll() event to bubble so I can catch the user scrolling a <div> with overflow: auto; in ajax loaded content? I am loading some HTML via $.ajax and need some way to detect as they are scrolling. According to the W3C scroll should not bubble which is why I assume jQuery doesn't do it. However I am able to catch the $(window).on('scroll', function() { console.log('scrolling'); });
$(window).load(function() {
$.ajax({
url: "/data.html",
dataType: "html",
success: function(data) {
$("#container").html(data);
}
});
});
$(document).ready(function() {
$('#container').on('scroll', '#content', function () {
console.log('scrolling');
});
});
The $('#container') is the container where the loaded $.ajax data is set and the $('#content') is from the loaded HTML from the $.ajax request

The answer is to add a wrapper element via jQuery and then you can attach a scroll event.
$("#container").wrap('<div id="wrapper"></div>');
$("#wrapper").on('scroll', function() {
// do stuff
});

How to use Hover and click using Jquery

Hi all i am using the hover and click function for a tool tip from here
ToolTips
Now as per my requirement i would like to combine both hover and click event in one method. When hover i don't want to show close button but when user click i would like to show close button. How can i do this in one event can any help me or if any examples or samples please share
I tried this for Tooltip on Click
<script type="text/javascript">
$(document).ready(function() {
$('#foobar2').click(function() {
var url = $(this).attr('href');
$(this).formBubble({
url: url,
dataType: 'html',
cache: false
});
return false;
});
});
</script>
I tired this but not working can you edit please
<script type="text/javascript">
$(document).ready(function() {
$('#foobar2').bind('mouseover click',function(e) {
if(e.Type=='click')
{
var url = $(this).attr('href');
$(this).formBubble({
url: url,
dataType: 'html',
cache: false
});
return false;
}
if(e.Type=='mouseover')
{
var url = $(this).attr('href');
$(this).formBubble({
closebutton:false;
url: url,
dataType: 'html',
cache: false
});
$.fn.formBubble.text('hover hover hover hover');
}, function() { //mouse out
var thisBubble = $.fn.formBubble.bubbleObject;
$.fn.formBubble.close(thisBubble);
});
}
});});
</script>
hi i tried this but didn't work
if(e.type=='mouseout')
{
var url = $(this).attr('href');
$(this).formBubble.hide()
}

instead of binding with: .click(function(){ ... })
bind with: .bind('mouseover click',function(e){ ... })
then inside the function use: e.type which will be a string determining what event type was triggered
<script type="text/javascript">
$(document).ready(function() {
$('#foobar2').bind('mouseover click',function(e) {
if(e.type == 'click'){
// do some click event stuff
var close = true
} else {
// do some hover event stuff
var close = false
}
var url = $(this).attr('href');
$(this).formBubble({
url: url,
dataType: 'html',
cache: false,
closeButton: close
});
return false;
});
});
</script>