jQuery not functioning right after publish to test server - javascript

I have the following jQuery in a user control using a Telerik RadGrid:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<script type="text/javascript">
var warnMessage = "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save and Continue button, your changes will be lost. Are you sure you want to exit this page?";
$(document).ready(function () {
$('input:not(:button,:submit),textarea,select').change(function () {
window.onbeforeunload = function () {
if (warnMessage != null) return warnMessage;
}
});
$('input:not(:button,:submit),textarea,select').on('DOMNodeRemoved', function () {
window.onbeforeunload = function () {
if (warnMessage != null) return warnMessage;
}
});
$('input:submit').click(function (e) {
warnMessage = null;
});
});
</script>
What it's meant to do is to keep a user from clicking away from the page using several of these controls without saving their changes. When I run this in VS2013, it works fine, triggering the pop-up when anything is added/updated/deleted in the RadGrid and the user attempts to leave the page without saving. However after publishing to the test server,the .click is never hit, so when a user tries to add another entry to the grid, the warning message fires again, and the on DOMNodeRemoved never works. Is there something I'm doing wrong in the code? Or is there something wrong with the server? I'm new to jQuery, so any help would be greatly appreciated. I will post more info if needed.

After looking at the console fo rthe test-server site, I found I was getting an "object doesn't support property or method 'addeventlistener'" error. I went to the Master page of the site and added a meta to check for the compatibility mode and that fixed it right up.
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link rel="SHORTCUT ICON" href="favicon.ico" type="image/x-icon"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script type="text/javascript" src="/Scripts/modernizr.js"></script></head>
UPDATE
After looking into this issue more, it's not that JQuery wasn't working per se, it was that the functionality did not exist for my solution to work in IE9.

Related

Phonegap Android back button closes inAppBrowser

This question was raised several times already. But I am still struggling with the issue with no idea how to solve it.
My very primitive app code:
<!DOCTYPE html>
<html>
<head>
<title>Standalone Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
var iabRef = null;
function onDeviceReady() {
iabRef = window.open('http://example.com', '_blank', 'location=no', 'zoom=no', 'hardwareback=yes');
iabRef.addEventListener('exit', iabClose);
}
function iabClose(event) {
iabRef.removeEventListener('exit', iabClose);
}
</script>
</head>
<body>
</body>
</html>
On phonegap forum I read that Android hardware back button functionality was added by default. But it doesn't work for me, still.
desired behaviour: navigate through several links on a page, tap back and see previous pages, according to history.
actual behaviour: after navigating through several links and tapping back inAppBrowser is closed, I see white screen instead of a previous page.
As you can see I added hardwareback property also, but with no luck. Also I tried ti hijack back button behaviour with putting this code inside onDeviceReady function:
document.addEventListener("backbutton", function(e){
e.preventDefault();
navigator.app.backHistory()
}, false);
And again no luck. Tried on several different devices, all the same. I guess there is a very simple thing I am missing. Any ideas?
If it matters, I build the app on build.phonegap.com.
Problem was that I called IAB in a wrong way, it should be
iabRef = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
Also I should have specified the source to npm for IAB plugin. Without this specification PGB uses old version from deprecated repo.

Check internet connection with offline.js

I am creating phonegap application for android.
I want to check internet connection for application. I am using offline.js.
But it's not working at all for me.
My code is,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>datePickerAngularTPLS</title>
<link href="css/offline.css" rel="stylesheet" />
<script src="scripts/jquery-1.11.3.min.js"></script>
<script src="scripts/offline.js"></script>
</head>
<body>
<script>
$(function () {
function on(evt) {
alert("connected successfully");
}
function off(evt) {
alert("connection failed");
}
Offline.on("up", on);
Offline.on("off", off);
});
</script>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
What is the problem in above code... ?
I just want to show alert on success and lose of internet connection.
I have also tried with navigator.isOnlie, but not reliable.
Please follow offline js LINK
Or other way is :
window.navigator.onLine
This will return true or false.
And one more way is using Phonegap available plugin:
Phonegap Plugin
In your first example you have forgotten to close the $ function. Its likely you would see an error message in the console, and those handlers would never have been created/attached.
If this is just a typo in your question and you are properly closing that function in your real code, then my guess is that you're adding the handlers after the up event has already occurred. Here it explains when these events are triggered.
If you load your page, then toggle your connection on and off do you see the events logged?

Web Intent Callback Events via Window.open Just Not Happening

Wonder if anyone can help. See attached code below:
If I launch a Web Intent via a normal "a href", and then tweet I get the callback. Lovely.
If, however, I launch a Web Intent via a window.open, say from a button click, I don't. See code below.
I could, trap the button click, and then call click on the "a href". At this point, I do then get the callback. However, this action in some browsers (e.g. Safari) gets caught in the pop-up blocker, so no-one sees the popup. Which is a bit useless.
I would like to use the window.open approach, and get the callback. Any thoughts anyone?
<!doctype html>
<html lang="en">
<head lang=en>
<meta charset="utf-8">
<title>Web Intent t3 Experiment</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://platform.twitter.com/widgets.js" type="text/javascript"> </script>
</head>
<body>
Option 1: Tweet via Link<br />
<button id="tf_sendtweet_button">Option 2: Tweet Via Button and JS</button>
<script type="text/javascript">
var t_element = d3.select("#tf_sendtweet_button");
t_element.on("click", function() {
_text = "Some compelling text to go in a tweet";
_url = "http://www.google.com/";
var tweet_url = 'https://twitter.com/intent/tweet?text=';
tweet_url += encodeURIComponent(_text);
tweet_url += '&url=' + encodeURIComponent(_url);
window.open(tweet_url,'_blank');
});
// Here, trap the callback from the WebIntent.
twttr.ready(function (twttr) {
// bind events here
twttr.events.bind('tweet', function (event) {
alert("Yay, tweet callback baby. Gotcha.");
console.log(new Date(), "Sweett, tweet callback: ", event);
});
});
</script>
</body>
</html>
Ok, everyone stand easy. It's been answered by a Twitter employee:
Unfortunately you can’t use the callback events features without letting our javascript control the window opening.
https://twittercommunity.com/t/get-web-intent-callback-from-a-window-open-call/20881

Make back button go to a different page

I'd like to JavaScript, or JQuery (or any plug in actually) to force the browser to load a specific page when the back button is clicked.
Basically insert a page into the browser's history.
I've found a way of doing it below, but it seems long winded. Am I missing something?
<html>
<head>
<title>Back button test</title>
</head>
<body>
<script type="text/javascript">
window.history.pushState('other.html', 'Other Page', 'other.html');
window.history.pushState('initial.html', 'Initial Page', 'initial.html');
</script>
Initial page <br />
<script type="text/javascript">
window.addEventListener("popstate", function(e) {
if(document.URL.indexOf("other.html") >= 0){
document.location.href = document.location;
}
});
</script>
</body>
</html>
In general, you can't modify the history of a browser, this is a major security feature. If you've found a way around it, that might work well for you, but keep in mind it might upset people. I know if I was on a site that hijacked the back button, I wouldn't be back. Instead, use better UX to give the user links.

Why does this javascript code prevent my browser from ever loading?

I'm learning javascript and jquery and have written a very basic script inside my file. I'm experiencing two problems...
The browser never finishes loading the document, it just sits there with the loading icon animating in the tab. Any ideas?
I can't seem to debug this using firebug. When I set a breakpoint anywhere in the document load function, it never hits. Any ideas?
Here's my code...
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link media="screen" type="text/css" href="default.css" rel="stylesheet">
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var strMarkup = "";
var strXMLFile = "";
//Parse XML and generate accordion elements
var arrayAccordianElements = ParseXML(strXMLFile);
});
function ParseXML(strPath)
{
var arrayEvents = new Array();
arrayEvents[0] = "test1";
arrayEvents[1] = "test2";
arrayEvents[2] = "test3";
//Return the accordian elements
return arrayEvents;
}
</script>
</head>
<body>
hello
</body>
</html>
As you experts can see, my webpage should simply display "hello" after processing some javascript that creates an array inside of a function. Do you see any problems? I apologize if they're obvious problems, I'm a noob :)
Thanks in advance for all your help!
Runs fine for me in Safari 4.0.3. Make sure your path to jQuery is correct? If it is incorrect and there's something misconfigured and jQuery fails to load, that will hang indefinitely.
Code-wise I don't see anything that would cause an infinite loop at all. However, knowing firefox etc, there may be a variety of things out of your control. Start with restarting the browser. Profile the script with Firebug (Console > Profile > Reload the page > Press profile again), and see what part takes most time.
One thing, probably unrelated, close your link tag. is sufficient.

Categories