Custom JavaScript Creating Random Characters in WordPress - javascript

I am working on a problem that a client has come across, the javascript that they are using is causing a /* and /*]]>*/ to show up on the Login Tooltip. I have been looking for the cause and I am baffled by it. All I know is that it is being generated somehow by the JavaScript at This Page.
The plugin is using this template which doesn't have any of those characters in it:
<script type="text/template" id="api-login-btn-template">
<div id="api-signin">
<label for="api-signin-login">Login : </label><input type="text" id="api-signin-login" name="email" value="" title="e-mail address"/>
<label for="api-signin-pass">Password : </label><input type="password" id="api-signin-pass" name="password" value="" title="password"/>
<div class="sign-in-errors"></div>
<br/>
<button class="sign-in-btn"><span>Sign In</span> <span class="blue">▶</span></button>
</div>
<div id="api-signout" style="display:none">
<p>My Favorite Programs <span class="ltblue_link">▶</span></p>
<p>Application: <a id="api-app-status" href="https://secure.apistudyabroad.com/forms"></a></p>
<button class="sign-out-btn"><span>Sign Out</span></button>
</div>
</script>
The javascript file responsible for this feature is here. I believe the pop up starts at Line 400 with $('.pane-container').each(function() {

This is how your template looks like on generated page (view source in Firefox):
<script type="text/template" id="find-a-program-template">
/*<![CDATA[*/<div style="padding:20px;"><h2>
...
...
...<div class="clear"></div></div>/*]]>*/
</script>
Seems like PHP / WordPress adds that CDATA part to the template during page rendering, but jQuery plugin doesn't know how to ignore it and writes it down instead.
Btw, you also have a bunch of server side <?php the_time('m') ?> calls on the page, but that's probably unrelated.

Related

Load a form action in a div on the same page

I have a dealer locator which is powered through software that our IT department manages, and I'm trying to fix up their code a bit and make it more user friendly.
What I'd like to do is allow end users to enter in their zip code, and have the list of dealers in their area show up on the same page, rather than open a new tab/window, or re-load the page.
<div class="locator">
<form method="get" id="dsearchform" action="http://www5.pacelink.com/paceweb/locatorframe.jsp?brand=SWEQ&zip=&&distance=50&numlocations=6&submit=Find+a+Dealer" target="_blank" alt="Pace Search - Sno-Way" onsubmit="return dsearch(this)" class="dealersearch">
<input type="hidden" name="locatorBrand" value="SWEQ" />
<input type="hidden" name="distance" value="100" /><input type="hidden" name="numlocations" value="6" />
<h2>Sno-Way Dealer Locator:</h2>
<h3 class="secondary">Enter your zip code below to find an authorized Sno-Way dealer near you!</h3>
<div class="zip-entry">
<input type="text" name="zip" placeholder="ZipCode" value="ZipCode" class="field" onfocus="if(this.value == 'ZipCode'){this.value='';}" onblur="if(this.value == ''){this.value='ZipCode';}"/>
<input type="submit" name="submit" value="Search" id="button" class="but"/>
</div>
</form>
</div>
I've cobbled this together from another solution posted here, but I don't think it's on the right track at all:
<div id="search">
<form id="try" method="post" target="receiver" action="http://www5.pacelink.com/paceweb/locatorframe.jsp?brand=SWEQ&zip=&&distance=50&numlocations=6&submit=Find+a+Dealer">
Zip: <input id="zip" name="zip" type="text" onfocus="if(this.value == 'ZipCode'){this.value='';}" onblur="if(this.value == ''){this.value='ZipCode';}"/>
<input type="submit"/>
</form>
<div id="receiver">
<?php if (isset($_POST['zip'])){
//display search results here.
}
?>
</div>
</div>
First of
If you want to change the html dynamically you need to go with JavaScript and AJAX. This is , you load stuff asynchronously. The comment states XHR, this is
XmlHttpRequest
Better directly look for the much more convenient JQuery Ajax function.
Jquery is very easy to use.
Example to set html of the container with id retailer
$('#retailer').html(response); // response is the html your php creates
You only need to fetch the html via jquery ajax({... }), where most of the stuff works by default. Just set the url of your webservice and the request body payload) and go. In the callback you do the above and are fine.
Give it a try at
https://learn.jquery.com/ajax/
And inside your html after including the script resource for jquery in the header.
<script>$(document).ready(function(){
// your code goes here
}); </script>
To code your JQuery / JS.
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header" id="content-wrapper">
<h1>
Dashboard <small>${userType} </small>
</h1>
</section>
</div>

Trouble with Google's new "No Captcha reCaptcha" & form page & php & javascript

Let me start with a HUGE Thank You in advance. I've been trying to get this right for way too long!
On my wife's website I have a contact.html page for website visitors to be able to email her, and a contact.php which handles the background stuff for it. I am a novice at form pages and the supporting php pages and feel pretty lucky that I got it working right a year or so ago when I did it. Since then I've tried several times to get a captcha set up right but have not been successful. Now with Google's new No Captcha reCaptcha, I've been trying again.
I have taken several example php pages with No Captcha reCaptcha code in place that people put online to use, and tried getting it to work with my form page after making changes to the code to work with my site, but can't get it to work right. I think it has something to do with the fact that all of the example pages that I've found online use METHOD=POST in their form code, and my form page doesn't. On top of that, I don't know the difference between METHOD=POST and what my form code does, and don't know javascript even though it's in the code on my page.
Also below in the code, you'll see that there is a confirmation page that the website visitor is taken to after clicking submit on the contact.html webpage. If someone could tell me how to require text in the fields before the message gets sent, that would be great too.
Below is the actual form code from my contact.html page, and below that is the entire code from my contact.php page. If someone could help me get this working right I would be very thankful!
Form Code (complete with my No Captcha reCaptcha public key):
<form id="ContactForm" action="emale/contact.php">
<div class="wrapper">
<div class="column1">
<label>Tell Us Your Name:<br /><input
type="text" name="name" value="" class="input" /></label><br />
<label>Tell Us Your E-mail Address:<br />
<input type="text" name="email" value="" class="input" /></label><br />
<label>Tell Us Your County of
Residence:<br /><input type="text" name="county" value="" class="input" /></label>
</div>
<div class="column2">
Tell Us Your Message:<br /><textarea
name="message" cols="" rows="" ></textarea>
<br /><br />
<div class="g-recaptcha" data-
sitekey="6Lf3Me0SAAAAAPjA2cfG1Rkzn30joCcuPJbVYhhw"></div>
</div>
</div>
<div class="alignright">
<div align="right"><a href="#" class="link"
onclick="document.getElementById('ContactForm').reset()"><span><span>clear</span></span></a>
<a href="#" class="link"
onclick="document.getElementById('ContactForm').submit()"><span><span>submit</span></span></a>
And now below is the entire code from my contact.php page. This how it is with no Captcha code present.
<?
$subject= "My Wife's Website Inquiry From ".$_GET['name'];
$headers= "From: ".$_GET['mail']."\n";
$headers.='Content-type: text/html; charset=iso-8859-1';
mail("mywife#mywifeswebsite.com", $subject, "
<html>
<head>
<title>Contact letter</title>
</head>
<body>
<br>
".$_GET['name']."
<br />
".$_GET['email']."
<br />
".$_GET['county']."
<br /><br />
".$_GET['message']."
</body>
</html>" , $headers);
header("Location: http://www.mywifeswebsite.com/complete.html");
?>
<script>
resizeTo(300, 300)
//window.close()
</script>
Thanks again. Please let me know if there are any questions or something that I need to clarify.
Based on the code you've provided, your problems are that:
You haven't included the required JavaScript to make the CAPTCHA work.
You don't have anything in your PHP file to validate the CAPTCHA results.
Follow the directions on Google's website to implement this correctly.

Recaptcha buttons ugly, cannot fix

First of all, I just want you to know that I have indeed checked the "Recaptcha is broken" question where the solution to their problem was setting the line-height to 0. This does not help me unfortunately.
I've implemented Google's tremendous Recaptcha on my website, but there's this one problem; The buttons have white space above and underneath them, and so there's this really ugly graphics-border under my Recaptcha box. Check the image below. I checked the source code in the browser and it seems as if it generates an iFrame, which means I obviously can't affect the style. Wtf?
You can customize the styling of reCAPTCHA on your own, according to the documentation. To quote directly from the article:
To implement all of this this, first place the following code in your main HTML page anywhere before the element where reCAPTCHA appears:
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'custom',
custom_theme_widget: 'recaptcha_widget'
};
Then, inside the element where you want reCAPTCHA to appear, place:
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
<span class="recaptcha_only_if_image">Enter the words above:</span>
<span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
<div>Get another CAPTCHA</div>
<div class="recaptcha_only_if_image">Get an audio CAPTCHA</div>
<div class="recaptcha_only_if_audio">Get an image CAPTCHA</div>
<div>Help</div>
</div>
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>

bad javascript? hello bar solo only working on homepage - no other pages

I'm running a bigcommerce store and have the hello bar solo custom code installed in the site footer. I've also tried placement of the hellobar code in various spots (header template files, default template files, page specific template files). For some reason the hello-bar only works on my homepage, but never on any of the other pages.
Any ideas as to why? Seems like if i place this in the footer it should show up on every pages but that's not what i'm getting. please let me know if you need more details or code samples to help.
thanks
btw, bigcommerce support also thinks that the hellobar should show up on every page if i have this code in the footer, but its not working. my guess is that it's the javascript but I dont know my way around that.
Here's the code I'm using:
<div id="mailchimp_form" style="display:none;">
<form action="http://xxxxx.us5.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="xxxxxxxx">
<input type="hidden" name="id" value="xxxxx">
Get an instant coupon code by signing up to our newsletter. Email: <input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" />
<input class="button" type="submit" value="Subscribe" />
</form>
</div>
<!-- Hello Bar configuration start -->
<script type="text/javascript">
var mailChimpForm = document.getElementById('mailchimp_form').innerHTML;
new HelloBar( mailChimpForm, {
showWait: 1000,
positioning: 'sticky',
fonts: 'Arial, Helvetica, sans-serif',
forgetful: true
}, 1.0 );
</script>
And here are the references that I've placed in the header:
<link type="text/css" rel="stylesheet" href="content/hellobar.css" />
<script type="text/javascript" src="content/hellobar.js"></script>
No idea what bigcommerce is, but judging from what you supplied I am guessing one of two reasons.
There is no 'mailchimp_form' div except on your homepage.
Javascript, for some weird reason, does get executed before 'mailchimp_form' div gets loaded on all other pages.

Play! Framework and Uniformjs don't play nicely for file uploading

I am writing a small webapp in Play!, and trying to use UniformJS (http://uniformjs.com/) to make my form elements look good. One page of the app lets users upload a file:
#{ form #Application.upload(), id:'uploadform', enctype:'multipart/form-data'}
<input type="file" id="uploadFile" name="uploadFile"/>
<input type="submit" id="surveyChooseFileButton" class="button" value="Upload" />
#{/form}
The controller looks like this:
public static void upload(#Required File uploadFile, #Required String surveyName) {
...
}
This is all just like one of the Play! examples (http://www.playframework.org/documentation/1.0/5things#a5.Straightforwardfileuploadmanagementa), and that all works fine. The problem is when I apply Uniform to my file input:
$(function(){ $("input:file").uniform(); });
Now the controller receives a null File object! Is there any way around this?
UPDATE:
Removing the id's doesn't do it (although that seemed very plausible!). View-source on the offending element reveals:
<div id="uniform-uploadFile" class="uploader"> <!-- A new div -->
<!-- My input element turns invisible -->
<input id="uploadFile" type="file" name="uploadFile" size="19" style="opacity: 0;">
<!-- Uniform adds these -->
<span class="filename" style="-moz-user-select: none;">No file selected</span>
<span class="action" style="-moz-user-select: none;">Select</span>
</div>
Still no idea what's going on, but this is the end result.
I build your page using play-1.2.3 and uniform-2446d99, and in ff 3.6.20 it seems to work fine here. What version of play! are you using?

Categories