Button JQuery event only working once, why? - javascript

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

Related

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

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

Alert when element id is in viewport with jquery appear

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>

why this code is not loading pages ajax jquery

Guys What I am trying to do is load a page on navigation click with ajax and put some delay in it loading
when nothing is clicked I want load home page following loading animation with jquery and a delay with PHP code
and if something on nav is clicked I want to load that particular file
but this code don't seem to be working
var res = {
loader: $('<div />', {class: 'loader' } ),
container: $('.content')
};
$(document).ready(function(){
$.ajax({
url: 'templates/delay.php',
beforeSend, function(){
res.container.append(res.loader);
},
success, function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/home.php');
}
});
$('ul#nav_a li a').click(function(){
$.ajax({
url: 'templates/delay.php',
beforeSend, function(){
res.container.append(res.loader);
},
success, function(){
res.container.find(res.loader).remove();
var page=$(this).attr('href');
$('.content').load('templates/pages/'+page+'.php');
return false;
});
});
}
});
I will not discuss the code itself, but just improve it.
Try this code and tell me if you get what you want : ( comments inside the js code )
$(document).ready(function(){
$.ajax({
url: 'templates/delay.php',
// old code : beforeSend,
beforeSend: function(){
res.container.append(res.loader);
},
// old code : success,
success: function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/home.php');
}
// beforeSend and success are keys with functions as values that's why we use ":" and not ","
// the "," comma is used to separate ajax settings
});
$('ul#nav_a li a').click(function(){
var page = $(this).attr('href');
$.ajax({
url: 'templates/delay.php',
// old code : beforeSend,
beforeSend: function(){
res.container.append(res.loader);
},
// old code : success,
success: function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/'+page+'.php');
// old code
// return false;
// });
// we close our ajax.success function
}
})
// old code
// }
// return false is used to prevent browser to run the a href that's why we use it in the a.click function and not inside the ajax block
return false;
})
})
var res = {
loader: $('<div />', {class: 'loader' } ),
container: $('.content')
};
$(document).ready(function(){
res.container.append(res.loader);
$('.content').load( "templates/pages/home.php", function() {
res.container.find(res.loader).remove();
});
$('ul#nav_a li a').click(function(){
var page=$(this).attr('href');
$('.content').load( 'templates/pages/'+page+'.php', function() {
res.container.find(res.loader).remove();
});
});
}
});
Just copy and paste it.

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>

Categories

Resources