jquery is missing when using hubspot forms inside wordpress site - javascript

I would like to integrate hubspot forms within my wordpress site, it all works fine I can submit the form and see the data from hubspot but there is only one problem with the callback function onFormReady() is not being executed due the jQuery is not present.
The error is:
The onFormReady function in hbspt.forms.create requires jQuery. It was not run.
Eventhout I have enqued jquery from function.php and I can actually use jQuery for example withi the head script section works.
This is the hubspot code:
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
portalId: "x",
formId: "xxxx",
onFormReady: function() {
alert("hello");
}
});
</script>
Any idea how would I be able to execute some code within onFormReady()?
Also if this is not possible, can we somehow catch any submission that happening on the site using jQuery? I tried few ways I was not able to catch the form submission using jQuery!

I had to add this script
<script charset="utf-8" src="http://js.hubspot.com/forms/current.js"></script>
to make it work.

Related

jQuery window on load is firing too early. What else can I use? Javascript in Wordpress

I'm learning jQuery and Javascript, and I'm trying to understand why my code is not working.
I'm doing this from inside a custom plugin in WordPress.
My javascript file with the function I'm trying to call is enqueued in the WordPress footer:
<script type='text/javascript' src='..... gf_timer.js?ver=1.1.0.1'></script>
and my PHP is generating items like the following:
<div id="gf_timer_1">Placeholder</div>
<script type="text/javascript">$j=jQuery.noConflict(); $j(window).on('load',gfInitTimer(1));</script>
I just want to call the function gfInitTimer() after each div. I keep on getting an error "gfInitTimer is not defined".
So I added the onclick handler as a test and that's finding the function properly:
<div id="gf_timer_1" onclick="gfInitTimer(1)">Placeholder</div>
<script type="text/javascript">$j=jQuery.noConflict(); $j(window).on('load',gfInitTimer(1));</script>
I thought the window.on('load', should fire after the page and all scripts are loaded.
What am I missing?
if you want to load gfInitTimer right after the page is loaded try using ready as shown:
$(document).ready(function(){
//run your gfInitTimer here
});

Javascript only loads after refresh (Squarespace)

I have a javascript running on a squarespace site, but it only seems to work after the page has been refreshed once.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.markdown-block .sqs-block-content h2').addClass('ui-closed').css('cursor','pointer');
$(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
$(".markdown-block .sqs-block-content h2").click(function() {
$(this).nextUntil("h2").slideToggle();
$(this).toggleClass('ui-closed ui-open');
});
});
</script>
In Squarespace, when your custom Javascript only works after a page refresh, it most likely has to do with Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
You may be able to disable AJAX for your template. Or, see the other approaches outlined here: https://stackoverflow.com/questions/54493314#54493314

Addthis is Undefined when I use addthis, When I load page by Ajax

I'm try to show 'addthis sharing' buttons when make ajax call. at the first call by ajax, buttons does not show, but when I reload whole page everything is OK, buttons is right place.
I searched a lots of fixes but no one works for me.
one of them is addthis.toolbox(); or window.addthis but when I use word addthis insde JavaScript tag, browser debugger writes error 'addthis is undefined'.
please give me smart advice what's happen and how can I fix it ?
Code (it's a partial view which load from ajax Call):
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx" async="async"></script>
<div class="addthis_sharing_toolbox"></div>
<script>
addthis.toolbox(); // addthis - is undefined
</script>
I have fixed this problem.
In my project I have 3 View level
_layout
View
_partialview
I had addthis Js reference and button's Div inside the _partialView.
But when I move Js reference to View and change Url(add - &async=1) it works fine and now 'addthis' - is defined (till here is undefined).
Hare is full example:
View:
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-'yourPubId'&async=1"></script>
//Some Code
_partialView:
//Some Code
<div class="addthis_sharing_toolbox"></div>
<script>
$(function() {
addthis.init();
addthis.layers.refresh();
});
</script>
Good luck, everyone can use this perfect plugin 'addthis' when you load page by Ajax.
The async version of the addthis_widget.js script you're using was intended to be used for the newer dashboard tools, as the call to addthis.toolbox() is undefined because AddThis hasn't fully loaded yet. If you remove async="async" from the script, it should work.
Alternatively, you could add the async attribute this way:
<script src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx&async=1" type="text/javascript">
Then before you call addthis.toolbox(), make sure you call addthis.init().
https://www.addthis.com/blog/2013/05/07/a-brief-history-of-using-addthis-dynamically/
-Matt
AddThis Support

Jquery validation with zip codes

I have a program that allows a user to enter a zip code to generate a google map. I want to make sure that the zip code is valid. To do so I am using the jquery validate method. Here is how my code looks:
$('#zipInput').validator({
format: 'zipUS',
invalidEmpty: true,
correct: function () {
//Code for correct
},
error: function() {
//Error code here
}
});
The problem is that this is not working for me. I get the error $('#zipInput').validator if not a function. I have been looking for examples of the validate method online and I used this link to build my code. I have added jquery.validate.js to my web page as well (issue with incorrect sources maybe?) Any suggestions or examples that I could look at to help figure out my issue?
EDIT: Here is all of the scripts I use in order:
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script src="mwheelIntent.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="Default.js" type="text/javascript"></script>
You need to do at least two things:
Load jQuery itself before the plugin.
Enclose your code in a jQuery.ready() construct.
If you are already doing so, please post all the relevant code.
You have to put a call to the validator code you've written inside the function which you are using to call the dialog. This is if the validator code is in the dialog which you are loading.
Another idea is to put the validator code inside the jquery.ready function in the form from which you load the dialog, but this will add some redundant code to that page.

javascript error: this.node is null or not an object

I am working on ASP.NET 3.5, c#, visual studio 2010. I have made a master file and a default page that uses this master file. I have placed a couple asp:contentplaceholders in the master and corresponding code in the page that uses this master. I have also inserted JavaScript like this in the content page (and not the master):
<asp:Content ID="Content6" ContentPlaceHolderID="Mainpage" Runat="Server">
<script src="path1" type="text/javascript"></script>
<script src="path2" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var options = {
//some java code
};
$(".mycssclass").effect(options);
});
</script>
</asp:Content>
On running the website I get the following runtime error in visual studio:
Microsoft JScript runtime error: 'this.node' is null or not an object
and it point to some function inside the JavaScript like
this.node.onload=function(){..............//I am not a java guy so do not know much about this
Where am I going wrong? Why does the site compile correctly but throw this runtime error?
I also tried inserting this java code inside the master file in the <head>, but same error. This is urgent please so if someone experienced can pinpoint where exactly to put the code that would be solve my problem quickly.
Have you included a reference to the jQuery library? A good practice would be to have the jQuery include in the Master.
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<!-- the remainder of your .js references should follow-->
</head>
If it's your intention to have that script run on 'page load', then ensure you have it set correctly:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
More info on jQuery document ready.
I'm not sure exactly what it is you are doing with that snippet of code, but I don't think it is the proper syntax.
You probably should re-write it to look like this:
$(document).ready(
function () {
var options = {
//some java code
};
$(".mycssclass").effect(options);
});
Just passing in the function to the jQuery selector will probably get some wonkiness.
Thank you everyone! there was no problem with either the syntax in the javascript or the location/page where it was first included by me. I just figured out that the mistake was somewhere else. This javascript works on an <img> tag. It zooms the image insdie the <img> tag. I was using the <asp:ImageButton> instead og <img>. It works perfect as soon as I replaced it. Thank you all for your time and the knowledge sharing.

Categories