Rich-text Reply

Uncaught function even though its defined

plac3bodk 03-16-16
Accepted Solution

Uncaught function even though its defined

Hi there

 

I've tried setting up a test, where we add a contact form to product pages.

 

I've tested it all locally, where it's working fine, but when I add the code to Optimizely, I get an error in my dev tools saying: Uncaught ReferenceError: check is not defined.

 

Check is a function I've set up to handle the contact form:

 

function check() {
var name = $("#formName").val();
var tel = $("#formTel").val();
var prodName = $("#formProd").val();
return $.ajax({
type: "GET",
url: "xxx",
data: {name: name, tel: tel, product: prodName},
success: function(msg) {
alert(msg);
}
});
}

 

I tried adding the function in both the experiment javascript and in the variation code, both before and after the contact form html.

 

$(document).ready(function(){
$("#allInAllPrice").after("<div id='brugtForm'><p style='font-weight:bold;text-align:center'>Bliv kontaktet</p> <form> <div><label for='Name'>Name:</label> <input type='text' name='name' id='formName'/></div><br> <div><label for='Telefon'>Telefon:</label> <input name='tel' type='text' id='formTel'/></div><br> <input name='product' type='hidden' id='formProd'/><br> <input type='button' name='submit' value='Send besked' class='formSubmit' onclick='check()'/></form></div>");
$("#formProd").val($('h1').text());
  });

 

Hope one of you guys can help me sort out where the problem is.

 

Kind regards

 Henrik

DavidS 03-17-16
 

Re: Uncaught function even though its defined

Hiplac3bodk,

 

Thanks for reaching out!

 I understand that you would like to run custom code in either the variation code or Experiment Javascript and use it on your page.

 

The first that comes to mind is a scope issue. Experiment Javascript and variation code run on their own scopes and are not accessible outside of their scope unless they are tied to another scope level (such as the window object).

 

Since this is an issue very specific to your case, I'd like to take a closer look.

 

Would you mind posting a link to your website so i can have a look? If you don't want to share the URL publicly, you can pm me directly the link. I would need to know the exact URL where this code is/should be running.

 

Best,
David

 

Optimizely
JDahlinANF 03-17-16
 

Re: Uncaught function even though its defined

If it works perfectly in your console but not when you inject it via Optimizely, try adding "window." in front of each of your $.
e.g.,
change
$(document).ready(function(){
to
window.$(document).ready(function(){

etc.
plac3bodk 03-21-16
 

Re: Uncaught function even though its defined

Hi Napoleon
Thanks for the suggestion. Tried it out, but sadly it didn't make any difference.
JDahlinANF 03-21-16
 

Re: Uncaught function even though its defined

@plac3bodk - must be a scoping issue with using "onlick" on th ebutton instead of jQuery to attach the click event.

 

Here is a pared down version of your code that works when run using a force parameter:

function check() {
	alert('hi');
}

$(document).ready(function(){
	$(".social-legal-text").after("<div id='sample_form'><form><input type='button' name='submit' value='Send Info' class='formSubmit'/></form></div>");
  $('#sample_form input[name=submit]').live('click',function(){
    check();
  });
});

 

plac3bodk 03-21-16
 

Re: Uncaught function even though its defined

[ Edited ]

Hi Napoleon 

This seems to work Smiley Happy Thank you very much.

Now a new problem has emerged though, since it says in the console that $.ajax is not a function

 

Uncaught TypeError: $.ajax is not a function

 

function check() {
var name = $("#formName").val();
var tel = $("#formTel").val();
var prodName = $("#formProd").val();
return $.ajax({
type: "GET",
url: "http://www.website.dk/testForm.php",
data&colon; {name: name, tel: tel, product: prodName},
success: function(msg) {
alert(msg);
}
});
}
JDahlinANF 03-21-16
 

Re: Uncaught function even though its defined

That error means that .ajax is not a method supported in the version of jQuery that your Optimizely snippet is using.

 

Since we are dealing with a scope issue (presuming that it works fine when you run the entire thing in your console) - change the reference to:

return window.$.ajax({
plac3bodk 03-21-16
 

Re: Uncaught function even though its defined

@nap0leon I love you man!

 

Thank you very much for all your help! This just made my day Smiley Happy

 

Kind regards

 Henrik