We Keep Coding

why am I getting same quote from jsonp result

I have the following jquery code, that pulls json data from a url; however, it is giving me the same quote over and over, instead of random. If I use url directly on browser it does randomize the quote. What am I missing? Thanks
$(document).ready(function() {
$("#getMessage").on("click", function(){
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
console.log(a[0].content + " " + a[0].title)
$("#quote-content").html(a[0].content)
$("#quote-title").html(a[0].title)
});
});

You can either turn off AJAX cache for jQuery, like this:
$(document).ready(function() {
$.ajaxSetup({ cache: false });
//...
});
Or you could change the url for every request (so it doesn't get cached), something like this could work:
$(document).ready(function() {
$("#getMessage").on("click", function(){
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&"+new Date().getTime(), function(a) {
//...
});
});
});
Also, I don't think you need the callback= parameter

Refresh multiple div's

I'm using the following code to get data refreshed every 2 seconds in 2 different div's
<script type="text/javascript">
function refreshTable(divId, typeId, serverDesc){
$.get('getServerData.php?vTypeId=' + $(typeId).val() + '&vServerDesc=' + $(serverDesc).val(), function(data){
$(divId).html(data);
window.setTimeout(refreshTable, 2000)})
}
$(document).ready(function(){
refreshTable("#Servers1", "#hdnTypeId1", "#hdnServerDesc1");
refreshTable("#Servers2", "#hdnTypeId2", "#hdnServerDesc2");
});
</script>
I'm getting the correct data for the different div's but the refresh is not working.
In the hdnTypeId fields and hdnServerDesc fields the correct data is passed through but the refresh is not working.

your are making a callback to refreshTable without parameters, change
window.setTimeout(refreshTable, 2000)
to
window.setTimeout(function(){refreshTable(divId,typeId,serverDesc);}, 2000)

You can pass a function as the first parameter to window.setTimeout like this:
<script type="text/javascript">
function refreshTable(divId, typeId, serverDesc){
$.get('getServerData.php?vTypeId=' + $(typeId).val() + '&vServerDesc=' + $(serverDesc).val(), function(data){
$(divId).html(data);
window.setTimeout(function() {
refreshTable(divId, typeId, serverDesc);
}, 2000)})
}
$(document).ready(function(){
refreshTable("#Servers1", "#hdnTypeId1", "#hdnServerDesc1");
refreshTable("#Servers2", "#hdnTypeId2", "#hdnServerDesc2");
});
</script>

Why browser is blocking when jquery load large amounts of data?

I noticed a problem in many places and on my site, and I'm interested about solution.
Why any browser is blocking when jquery load large amounts of data?
On one site I made statistics that check over 11,000 entries what made pagination and show lists of 400 entries from the database. When I start to load that data, any function on my browser stop to work until the load is complete. The same also happens when I'm working in phpMyAdmin.
Is there a way to improve the load, or to prevent the blocking of? Thanks!
EDIT:
This is jQuery what I use:
<script>
$(document).ready(function() {
$("#results").prepend('<div class="loading-indication"><img src="loading.gif" /> Loading...</div>').load("fetch_pages.php", {'page':0}, function() {$("#1-page").addClass('active');}); //initial page number to load
$(".paginate_click").click(function (e) {
var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
var page_num = parseInt(clicked_id[0]); //clicked_id[0] holds the page number we need
$('#if').removeClass('active'); //remove any active class
$("#results").prepend('<div class="loading-indication"><img src="loading.gif" /> Loading...</div>').load("fetch_pages.php", {'page': (page_num-1)}, function(){});
$(this).addClass('active'); //add active class to currently clicked element
return false; //prevent going to herf link
});
});
</script>
On fetch_pages.php is a simple PHP loop with while function.

You can use this code to solve your problem :
Send request with $.ajax along with async true
<script>
$(document).ready(function() {
function getPage(pageno)
{
$.ajax({
type: "POST",
cache: false,
url: "fetch_pages.php",
data: "page="+pageno,
async: true,
crossDomain: false,
beforeSend: function () {
$("#results").prepend('<div class="loading-indication"><img src="loading.gif" /> Loading...</div>')
},
success: function (resp){
$("#results").html(resp);
$("#"+pageno+"-page").addClass('active');
}
});
}
//initial page number to load
getPage(0);
$(".paginate_click").click(function (e) {
var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
var page_num = parseInt(clicked_id[0]); //clicked_id[0] holds the page number we need
$('#if').removeClass('active'); //remove any active class
getPage(page_num-1);
return false; //prevent going to herf link
});
});

If statement(text exist in iframe) in Javascript for Iframe not working

Hi I am new to this site and trying to get some help on this small problem.
I am trying to see if a set of text (Listing Added) Exists in the iframe then do something with it, if it exists etc.
I have read that there are 2 ways of doing it
1st $('#my_iframe:contains("I am a simple string")')
2nd $('#my_iframe').contents().find().text('my text').length>0
I tried both and the problem that i have is my if statement does not work. If the text exists or not, it is going to the first condition.
Thanks for your time!
Here is my code
<script>
$(function(){
$('#myiframe').load(function(){
if ($('#myiframe:contains("Listing Added")')){
document.getElementById('result').innerHTML = "Listing Added!"
}
else{
document.getElementById('result').innerHTML= "Listing not Added"}
});
});
</script>

If page in iFrame is not from the same origin (protocol, port and url) as the script then forget it
you may be too late with the .load since you do not assign the event handler until after
the page loaded
Assuming the text is in a span
$(function() {
var $container = $("#myiframe").contents().find("span:contains('Listing Added')"),
added = $container.length>0?" ":" not ";
$("#result").html("Listing"+added+"Added!");
});
But why not
$(function() {
$.get("mylist.ext",function(data) { // or $.post if needed
var added = data.indexOf("Listing Added") !=-1;
$("#result").html("Listing"+(added?" ":" not ")+"Added");
$("#someContainer").html(data); // instead of iframe
});
});

<script >
$('#myiframe').load(function(){
if($("#myiframe").contents().text().search("Added")>=1){
$("#result").html("Listing Added!");
}
else{
$("#result").html("Listing Not Added!");}
});
</script>

Get specific page from URL and get the data with AJAX

window.onload= function(){
var page = window.location.hash;
if(window.location.hash != ""){
page = page.replace('#page:', '');
getdata('src/'.page);
}
}
After the window loads, i want the page to look in the URL, see if there is a # is set, and if so, i want to grab the page and display it inside a DIV. So for example, a link would be link. So when somenone clicks on the link, the page thinks and grabs the data from contact.php, and puts it inside the div. But now, this isn't working. No errors, no warnings, no nothing. Help please? Thanks!
Edit: Getdata:
function getdata(file){
openloading(); // loading message
$('#content').fadeOut('slow', function () { // Content is the div where all the content must be in
$.get(file, function(data) {
$('#content').html(data);
$('#content').fadeIn('slow');
})
})
updateusersonline();
}
And updateusersonline() directly too:
function updateusersonline(){
$.get('src/usersonline.php', function(data3) {
$('#usersonline').html(data3);
})

getdata('src/'.page); should be getdata('src/' + page);