Keep Google OAuth User From Having to Login Every Time They Refresh - javascript

As I said in the title, every time I refresh my webpage, the Google OAuth has me log in again. I'm new to the Google OAuth thing and I'm just using the docs for the Google Calendar API. I'm trying to make a web app that lists everything on my calendar. I've attached the code I'm using below. If anyone could help, it'd be very much appreciated!
JS Script used for logging in: https://pastebin.com/XDBmwzgc
HTML Body tag: <body onload="handleAuthClick()">
HTML Script tags: <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script> (in HTML head),
<script src="./calendar.js"></script> (in body),
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script> (in body).

Related

Has anyone figured out how to test rigorously with OneTrust Cookies?

It seems like you have to whitelist your staging or local site in order to perform test. Does anyone know a way around that? I went to their website to look through documentation, but I can find anything beyond this (At the very bottom of the page) :
<!-- OneTrust Cookies Consent Notice start for www.example-domain.com -->
<script type="text/javascript" src="https://cdn.cookielaw.org/consent/{id}-test/OtAutoBlock.js" ></script>
<script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" data-language="en" type="text/javascript" charset="UTF-8" data-domain-script="{id}-test" ></script>
<script type="text/javascript">
function OptanonWrapper() {}
</script>
<element class="all-other-html-below">All other HTML</element>
<script type=text/plain class="optanon-category-[category 1 through n]"></script>
I would like to test OneTrust's scripts affect on other script tags. I want to see if script tags that come after their script can be transformed from type="text/plain" to type="text/script" and see of an error is thrown. Apparently that is something that comes out of the box. But other functionality is dependent on that confirmation. But when the user consents to a cookie category there isn't a change in accepted cookies :
enter image description here
but it works on the live site :
enter image description here
Which seems like to have something to do with the fact that the domains don't match. Is there a way around this?

jQuery slider not working with https URL on a Wordpress website

I have a WowSlider that is not working when running the main page of my Wordpress website with https. The images in the slider appear stacked statically one after another. When running the Wordpress website with http, the slider works fine (provides the transition effect expected).
I am trying to figure out how to modify my website such as to launch a javascript with https, not http. I want to launch the javascript as
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script> (*)
but not as
<script type="text/javascript" src="http://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script> (**)
But since I have not been able to manually edit the source code behind the main page, I have not been able to get (*) to work.
Hence the question: How to modify the Wordpress site (php scripts?) such as to implement (*)?
I have come to understand that the problem has to do with contention between http and https.
My problem resembles the one from
jQuery slider not working in https URL
I believe the same solution will apply. I should launch the javascript using
<script type='text/javascript' src='//wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
or
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
The hypothesis above is supported by an observation from
https://www.allbookcovers.com (***)
Here a corresponding WowSlider operates fine with https.
When analyzing the code behind (***), I noticed the following:
<!-- Start wowslider.com Head section -->
<link rel="stylesheet" type="text/css" href="js/engine1/style.css" />
<script type="text/javascript" src="js/engine1/jquery.js"></script>
<!-- End WOWSlider.com section -->
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-magento-fix.js"></script>
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"></script>
In my website, the javascript is launched with http, not https:
<script type="text/javascript" src="http://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
I tried to comb through my Wordpress website to figure out where jquery.js was being launched. I found the following in
\\wp-includes\script-loader.php(963):
scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4' ); (****)
It was not clear to me how to modify this such as to result in
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
getting added to the main page, since (****) made no direct reference to http.
Any suggestions?
I withdraw the question. I appear to have stumbled on a solution. As I was getting ready to hand-edit the PHP files comprising my website, or even go into the PHP database and manually edit the content, I stumbled on a plugin called "Really Simple SSL". I installed the plugin. And vuha! My problems went away.

Visual Composer not loading Hubspot form embed

I'm working on a Wordpress site that was built using Visual Composer. I'm trying to embed a Hubspot form, which is something I have done numerous times but never using VC. I figured it would be as simple as adding a "raw html" block in VC and adding the form embed script.
This does indeed load the form, however it is displayed on the bottom left of the screen instead of the right column where it was set. However, if the page is refreshed, it displays as it should, no problems. This makes me think the script is loaded after the rest of the page is loaded.
I have tried creating a shortcode for the script and inserting in the VC section. Does not work.
You can see the issue here:
http://yourveininstitute.com/leg-swelling/
( form loads at the bottom of page and loads correctly on refresh )
The HS embed code looks like this ( portal and id redacted ):
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
css: '',
portalId: '######',
formId: '#################'
});
</script>
I could really use some help on this one. I'm spinning my wheels.
I'm seeing a hubspot form loading correctly in the sidebar, even on the first load. Are you still experiencing the problem? If so, I might try enqueueing the external script call, and only putting the hbspt.forms.create stuff in the VC block.
Try adding this to your functions.php file:
add_action('wp_enqueue_scripts', 'add_hubspot');
function add_hubspot() {
wp_enqueue_script('hubspot', '//js.hsforms.net/forms/v2.js');
}

Loading a Google Map API into wordpress post

I am trying to get a google map loaded into a post.
In the header i load:
<script type="text/javascript" src="http://dev.ateo.dk/wp-content/themes/ateo/js/parking.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
In the post in wordpress i load:
<div id="map_div"></div>
You can see the .js here: http://dev.ateo.dk/wp-content/themes/ateo/js/parking.js
The map does not show at all, so i am hoping you guys can help me with this.
As #Anto Jurković mentioned in the comments you need to include your parking.js at last.
You're initialize the map and other objects when these objects don't exist yet because your jquery and Google Maps are loaded later. Also you don't provide your API key when you load the maps javascript, so Google won't provide you the map.
So it must be:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?key=YOUR_API_KEY&sensor=true" type="text/javascript"></script>
<script type="text/javascript" src="http://dev.ateo.dk/wp-content/themes/ateo/js/parking.js"></script>
How you can get the API key is documented in the official Google Maps v3 Documentation.
TL;DR: You'll get it with the Google Developer Console
None of the above worked. It does not matter when the script is loaded, and the script should also be loaded using the functions.php in wordpress i found out.
The div should have a size property, and this resulted in the map being displayed

Loading Page Issues

I wanted to use the loading page from here http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
because the personal website I was making is very poorly optimized and loads quite slowly
The loading page works fine if I make it a seperate page and then redirect to my home page like so:
http://matthewpiatetsky.com/cs103/demo/demo.html
However, I have also tried adding this same animation when I go directly to the page, and it does not work. I think this is because of the other js files present in the document.
http://matthewpiatetsky.com/cs103/
In the redirecting page the script is located here and it works.
http://matthewpiatetsky.com/cs103/demo/js/script.js
In the actual page the script is located here and it doesn't work.
http://matthewpiatetsky.com/cs103/js/matthew.js
The script declarations in the actual page look like this, so this script is called last. Calling it first breaks the page, so I'm guessing the 5-grid js is the problem.
<script src="js/jquery-1.9.1.min.js"></script>
<script src="css/5grid/init.js?use=mobile,desktop"></script>
<script src="js/jquery.formerize-1.1.js"></script>
<script src="js/init.js"></script>
<script src="path/to/file/jquery.queryloader2.js" type="text/javascript"></script>
<script type="text/javascript" src="js/matthew.js"></script>
It looks like you are missing a plugin. Your code tries to use the QueryLoader2 plugin on line 19 of Matthew.js, but you don't have this plugin included on your page.

Categories

Resources