onReady() doesn't execute $.getJSON() when browser restores a page - javascript

Let me state initially that the code below works fine when I open a new browser page and enter my web server's URL, and it works also when I reload a page (F5 or Ctrl-R).
It only works partially however if I reopen a closed browser window and the browser restores my old tabs: then, the today's date is updated and displayed (see the code below, very simple), but the getJSON() call doesn't seem to be executed. The browser keeps displaying the data from the previous session. Only if I update the page (F5), the data in the browser window is updated.
I'm sure it's not the server. What else could it be?
Browsers: Firefox, Chrome, latest versions.
Using this code in index.html
<script>
$(document).ready(onReady());
</script>
and this code in helper.js
var onReady = function() {
// Display current date
var dateText = moment().format("dddd, Do MMMM YYYY");
var dateHTML = "<h2>" + dateText + "</h2>";
$("#date-col").append(dateHTML);
:
:
// Retrieve data from server and display it
var statText = "Statistics:";
$.getJSON("courses/starter", function(data) {
statText = statText.concat(" " + data.count + " starter");
$.getJSON("courses/dessert", function(data) {
statText = statText.concat(", " + data.count + " dessert");
$("#statistics").text(statText);
});
});
}

You have to pass a callback instead of executing the function immediately.
Try:
<script>
$(document).ready(onReady);
</script>

$( document ).ready(handler) expects argument to be a function expression which will be executed later when DOM is ready
In your example, you are invoking onReady() function and that function is not returning anything(undefined) hence exection will be like: $(document).ready(undefined);
Either use function expression like $(document).ready(onReady); or onReady() should return a function to be executed later.
Shorthand would be $(onReady)

Related

response.getselectedbutton() is not a function?

I am in school and trying to code a google apps script where I have a function bound to a doc with a custom menu that can create a new doc with the date, subject, and email it to the teacher of said subject. All was going according to plan until I decided to make it so that if I hit cancel instead of OK in one of the parameters I would get the default value of that parameter if I had not hit edit parameters so I could easily only change 1 or 2 things. The function works spotlessly, but now what's happening is I can't get the selected button for the alert that asks me if I want to edit parameters.
It just says
"TypeError: response.getSelectedButton is not a function"
and won't let me run my function. Here's my code for the function. This has worked fine for me in the past and I'm really not sure why it doesn't work now.
function Mathdoc() { var ui = DocumentApp.getUi();
var d = new Date();
var s = (d.getDate()) + '/' + (d.getMonth()+1) + '/' + d.getFullYear();
console.log(s);
var response = ui.alert( 'Change parameters?', ui.ButtonSet.YES_NO);
if (response.getSelectedButton() == ui.Button.YES) { insert all my other code here}
Is there a glitch or something I'm missing? I'm new to JS and fairly new to web design altogether.
There is no method named getSelectedButton(). The ui.alert() just returns the button and nothing else
function Mathdoc() {
var ui=DocumentApp.getUi();
var d = new Date();
var s = (d.getDate()) + '/' + (d.getMonth()+1) + '/' + d.getFullYear();
console.log(s);
var response=ui.alert( 'Change parameters?', ui.ButtonSet.YES_NO);
if (response==ui.Button.YES) { insert all my other code here}
Look at example here
Nope, this function doesn't exist. Basically if you type a function on google and don't find anything, it means the function doesn't exist
EDIT : If you have an error message that says it doesn't exist, it means that the function really doesn't exist or that the library containing the function is missing. But in your case the function doesn't exist

Cannot Pass event When Using JQuery Click()

I can't get data from event.data when using the click function below. If I put "event" in the click(smedata, function(event){}) it doesn't fire. If I remove event it does fire. I've done this hundred times in the past but for whatever reason it doesn't work this time. All I can think is that this code is generated during a callback from closing a dialogue window and that is some how interfering. Appreciate any help.
//This is a callback function in a library that gets called after a dialogue
//window from SharePoint SP.UI.Dialogue gets closed.
OESme.prototype.CloseCallback = function(result, target){
console.log("callback");
try{
var targetArray = target.split(";#");
}
catch(e){
}
//object to be passed to click event
var smedata = {
smejson: target,
id: targetArray[0],
title: targetArray[1],
rank: targetArray[2],
firstname: targetArray[3],
lastname: targetArray[4]
}
var smeID = "smedata" + smedata.id;
var smeIDJQ = "#" + "smedata" + smedata.id;
$("#SMEAddedBox").append(
'<div class="smeitem">' +
'<span id="' + smeID + '">x</span>' + smedata.title +
'</div>'
);
//*******************
//When clicking the x it is suppose to remove itself
//If event is a parameter in the function, it won't fire, if event is removed it fires, but I can't use the object I am trying to pass
//********************
$(smeIDJQ).click(smedata, function(event){
console.log(event.data);
$(this).parent().remove();
});
}
It doesn't look like you're referencing $(smeIDJQ) properly. Also, use .on instead. Like $('#smeIDJQ').on('click', function(){};
All my code was correct. The problem has to do with SharePoint SP.UI.Dialogue.js. All the javascript and jQuery was correct but it was running in the Dialogue window. Basically there are two separate pages running on one page. When the dialogue window closes after the callback the Console in Internet Explorer 11 breaks and doesn't realize that it is suppose to focus on the parent page instead of the child. So it doesn't receive console logs like it should. Closing the Developer tools and reopening (F12) allows the window to refocus the parent properly.

Run Javascript custom function in PhantomJS

I am writing a console application in which I am using Nreco.PhantomJS to load the data. This is a scrapping application for a website containing google map with markers on it. The data I am trying to get is not available on the page before or after it is loaded completely. The data is the simple Latitude and Longitude that is passed from a JavaScript function to the google map and is not rendered on the page. As I am very new to PhantomJS so I am not sure how to achieve this but I am sure this can be done. This small piece of script is run by me in c# code,
try
{
string jsContent = "var system = require('system');" +
"var page = require('webpage').create();" +
"page.open('" + url + "', function(status) {" +
"system.stdout.writeLine(GetLatLang());" +
"}"+
"phantom.exit();" +
"});";
phantomJS.RunScript(jsContent, null, null, ms);
}
finally
{
phantomJS.Abort(); // ensure that phantomjs.exe is stopped
}
When I call Alert(GetLatLang()) function in console tab (Inside google chrome inspector) then it run fines and value is retrieved. However the PhantomJS never finishes running the code and I have to close the application. My understanding is that in the above code PhantomJS immediately try to execute the GetLatLang() function whereas it is not available at that time. Is there any way to execute this function after the page is completely loaded?
You need to call the GetLatLang() function in the page context and not in the phantom context:
"page.open('" + url + "', function(status) {" +
"console.log(page.evaluate(function(){" +
"return GetLatLang();" +
"}));" +
"}"+
page.evaluate() is the only function that provides access to the DOM and the page's window object.
Additionally, your JavaScript has a syntax error. There is only one opening {, but two closing }. You need to remove "}"+.

Issue with CodePen and jQuery

I have created a simple page the displays random quotes from QuotesOnDesign API. However, my "New Quote" element when clicked doesn't trigger the getQuote function. Here is a link to my code:
CodePen Random Quote
I suspect this is related to jQuery as the Chrome console displays an error mentioned that it refused to load script (referring to jQuery). The strange thing is that when I click on "New Quote" while I have the Developer Tools open in Chrome, it works!
The browser is caching the response the first time you call the API, and reusing that response on future calls. You can resolve this by adding a cachebuster to the URL.
The reason it works when you open the console is because you presumably have the Disable cache (while DevTools is open) option set.
function getQuote() {
var cb = Math.round(new Date().getTime() / 1000);
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=" + cb, function(a) {
$(".quote-text").html(a[0].content + "<p>— " + a[0].title + "</p>");
});
}
Working CodePen
You can get rid of the funciton call altogether and give $.ajax a try like so:
$(".button").on("click", function(e) {
e.preventDefault();
$.ajax({
url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
success: function(a) {
$(".quote-text").html(a[0].content + "<p>— " + a[0].title + "</p>")
},
cache: false
});
});
With cache: false you are preventing caching on a per call basis so the content changes each time the button is clicked as expected.

after redirect, other functions are not working in Chrome

I am new to jQuery, please help.
After window.location.href other functions are not getting called/ aborted.
I am using Spring to catch that url("downloadPack?Name=" + Name + "&ID="+ID) and generating excel file , till this point it is working fine.
below code works perfectly on Firefox and IE , but having issues with Google Chrome only.
var href_red = "downloadPack?Name=" + Name + "&ID="+ID ;
jQuery
.post(
'checkPack',
{
Name :Name,
ID : ID,
Date :Date,
},
function(data) {
if (data == 1) {
window.location.href = href_red;
dialog_load('Download Workbook','downloadOptions', '675px', '630px', 2);
} else {
dialog_error('Error','workbook has not yet been created, please create it first');
}
});
Changing the window.location will kill all scripts currently running in the browser.
So you need to add that code before you are redirecting.
Or other solution is getting a page via AJAX and run a callback function to execute when the content is loaded.

Categories

Resources