Javascript if statement in body onload - javascript

I'm just needing a little help. I'm wanting to display a success message on my index, but only if someone has come from the php page that sends the email.
This is what I have
<script>
function load()
{
if (document.referrer == 'http://www.blahblah.com/contact-form-handler.php') {
$.notify.success('We read you loud and clear; message received. Prepare for reply.', {
autoClose : 3000
});
}
}
</script>
</head>
<body onload="load()">
This works :
<script>
function load()
{
$.notify.success('We read you loud and clear; message received. Prepare for reply.', { autoClose : 3000 });
}
</script>
</head>
<body onload="load()">
So there's obviously something wrong with that if statement. Can someone please help me?

use a regular expression with .match()
function load()
{
if (document.referrer.match(/\/contact-form-handler.php/)) {
$.notify.success('We read you loud and clear; message received. Prepare for reply.', {
autoClose : 3000
});
}
}

Related

How to get an php echo with jquery

I know this question was asked many times before, I searched really long for the solution but I couldn'd find one, that's why I'm asking. First: I'm trying to connect my HTML-File to my JavaScript file and that worked pretty well. What I want to do now is to display data from my MySql-DB on my HTML-Site, that's why I'm using PHP. I wanted to start simple, that's why I tried to echo "Hello World". But when I run my site, I don't get only "Hello World", I'm getting the whole PHP-Code. How can I fix that problem?
test.php
<?php
echo 'Hello World';
index.html
<!DOCTYPE html>
<html>
<head>
<title>MySite</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="size">
<button id="saveBtn" value="Click" type="button" >Save</button>
<script src='test.js'></script>
</body>
</html>
test.js
window.addEventListener("load", function () {
$('button#saveBtn').on('click', function () {
var in= $('input#size').val();
if (size== '')
alert("Error");
else {
$.post("test.php", { input: size}, function (data, status) {
alert("data + " : " + status);
});
}
});
});
Everything is actually working fine, except you have some typos in your Javascript file:
You can't use the word in as a variable name, because it is reserved as a Javascript keyword.
The second parameter that you had on the $.post() function is illegal.
The way you concatenated the message in the alert was faulty.
It should look like this to work:
window.addEventListener("load", function () {
$('button#saveBtn').on('click', function () {
var theInput = $('input#size').val();
if (size== '')
alert("Error");
else {
$.post("test.php", function (data, status) {
alert(data + ":" + status);
});
}
});
});
ALSO
It looks like you're trying to prevent the user from sending off the AJAX request until there is something in the input. If this is what you are trying to do then you can do it like this:
window.addEventListener("load", function () {
$('button#saveBtn').on('click', function () {
var theInput = $('input#size').val();
if (!theInput.length) // Checking to see if there's something in the input
alert("Error");
else {
$.post("test.php", function (data, status) {
alert(data + ":" + status);
});
}
});
});
NOTE: It's important to note that in order for your PHP to run at all, you need to set up a local server (This might be why you are getting
PHP errors). You can do that by either installing XAMPP or you can
follow these instructions.

Paypal lightbox: does not permit cross-origin framing

I have attempted to go about the use of Paypal Lightbox a bit differently.
I have used a button to trigger an ajax call which then generates the PayKey and if all goes well then triggers the form (from the documentation) to be created and submitted.
When i click the button the lightbox html is created but the content is not loaded into it. Instead i get the error:
Load denied by X-Frame-Options: https://www.sandbox.paypal.com/us/cgi-bin/webscr?cmd=_dispatch-failed does not permit cross-origin framing.
My Code:
<head>
<script src="https://www.paypalobjects.com/js/external/dg.js" type="text/javascript"></script>
</head>
External Script:
$("#checkout").click(function() {
var id = $(this).data("id");
if(id) { pay(id); }
});
function pay(id) {
$.ajax({
url : 'paypal/Pay-Chained.php',
type : 'POST',
data : "id="+id,
success : function (data) {
var info = (JSON.parse(data));
if (info['Type'] == 'Success') {
var output = info['URL'].substr(0, 64) + "expType=light&" + info['URL'].substr(64);
$("body").append('<form action="'+output+'" target="PPDGFrame" class="standard"><input type="submit" id="submitBtn"></form>');
$("#submitBtn").click();
} else {
alert("Error: Please try again or contact support.");
}
},
error : function () {
alert("Error: Please try again.");
}
});
}
At the bottom of the buttons page:
<script type="text/javascript" charset="utf-8">
var embeddedPPFlow = new PAYPAL.apps.DGFlow({trigger: 'checkout'});
</script>
I am thinking maybe it has to do with the order things are executed but can't seem to figure it out. Any help would be great!
EDIT: I just created a blank page and copied the script from the documentation exactly. I still get the same error. Might it have something to do with server settings? I am running a WampServer with an address like 192.168.1.1/mysite/index.html.

Message EventListener returns cf-tick

My question is simple,
I have this.
<!DOCTYPE html>
<head>
<script>
window.addEventListener('message', messageHandler, false);
function messageHandler(event)
{
if(event.data) {
document.getElementById('test').innerHTML = event.data;
}
}
</script>
</head>
<body>
<span id="test"></span>
</body>
which returns me this,when it shouldn't return me anything
cf-tick
Why is this? and How can i stop this?
A live example is this: Test Page
You have cloudflare js
http://ajax.cloudflare.com/cdn-cgi/nexp/dok8v=221574e73d/cloudflare.min.js
loaded in your page which posts the message cf-tick. You can see the file posting a message if you search for the following code in the file :
a.postMessage("cf-tick","*")
If you remove the loading of CloudFlare script, no message will be posted to the webpage.
If you don't want the cf-tick to get caught in the event listener, you can check if the message is not cf-tick :
window.addEventListener('message', messageHandler, false);
function messageHandler(event){
if(event.data) {
if(event.data!="cf-tick")
document.getElementById('test').innerHTML = event.data;
}
}

How to Convert Maxmind Geoip1 javascript script to Geoip2

Using the first Geoip I was using a simple Javascript code (as seen below), but I've been trying all day to figure out what I need to do to have the script recognise the country code for Maxmind Javascript Geoip2.
The Original GEOip code
<script type="text/javascript">
var user_country = geoip_country_code();
if(user_country == "US")
document.write(hockeyAds[4]);
else
document.write(hockeyAds[5]);
</script>
What I have in the new header
<script type="text/javascript" src="//j.maxmind.com/js/apis/geoip2/v2.0/geoip2.js"></script>
The latest code that I have attempted to use.
<script type="text/javascript">
var user_country = geoip2.cityISPOrg.country.iso_code();
if(user_country == "US")
document.write(hockeyAds[4]);
else
document.write(hockeyAds[5]);
</script>
Below on the same page I have tried this script that someone made and I was able to get it to type out the correct country code. So I am convinced that it is a problem with the above javascript code.
<script>
geoip2.cityISPOrg(function (response) {
$("#usercountry").html(response.country.iso_code);
});
</script>
<p>
<span id="usercountry"></span>
</p>
Not really all the great with understanding Javascript.
Thanks
You need to pass success and error callbacks to the geoip2 methods. Try this:
geoip2.country(
function (response) {
if (response.country.iso_code === "US") {
document.write(hockeyAds[4]);
} else {
document.write(hockeyAds[5]);
}
},
function (error) {
// handle error
}
);
Also, this tutorial might help you understand the API: http://dev.maxmind.com/geoip/geoip2/javascript/tutorial/

Phonegap - How to call one javascript function in another file from index page?

I am an iOS and PhoneGap newbie. I have the index.html file and a javascript file called MyClass.js.
In my MyClass.js, I have a function -
var MyClass = {
testfunc: function() {
navigator.notification.alert("Success : \r\n");
}
}
I am trying to call it from the index.html function like -
MyClass.testfunc();
In my Phonegap.plist file I have an entry MyClass-Myclass as a key-value pair with the type String. However I don't get the alert. What am I doing wrong?
Have you included the following in your index.html:
<script src="MyClass.js"></script>
This will allow you to use the MyClass.js functions in your index.html file
Your markup for your alert is wrong...
navigator.notification.alert(
'Some Alert Text here', // alert message
successCallback, // callback function
'Alert Title, // alert title
'OK' // button text
);
Hi can you try following code:
// MyClass.js
var MyClass = {
testFunction: function() {
alert("hi there");
}
};
// index.html
<html>
<head>
</head>
<body>
<script src="MyClass.js"></script>
<script src="phonegap-1.3.0.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function() {
navigator.notification.alert("hi there \r\n");
//alert("hi there \r\n");
});
</script>
</body>
</html>

Categories