I've been using Parse for years to send Push Notifications to my iOS apps and its been working great.
I now want to be able to do the same thing - but from my own web page. Meaning, I wanna just go to a regular web page (which I'll create), type some text into a textfield, press a button - and have that text get sent as a Push Notification to my iOS App.
I’ve tried the following code - no luck so far:
<html>
<head>
<title>PN TEST</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.0.min.js"></script>
<script type="text/javascript">
Parse.initialize("xxxxxxxxxxxxx", "xxxxxxxxxxxxxxx");
function makePushNotification() {
alert ('sending a push!');
$.ajax({
type: 'POST',
headers: { 'X-Parse-Application-Id’ : ‘xxxxxxxxxxxxxxxxxxxxxxxx’ , 'X-Parse-REST-API-Key’ : ‘xxxxxxxxxxxxxxxxxxxxxxxxxxx' },
url: "https://api.parse.com/1/push", data: '{"channel": "", "data": {"alert": "Sending a Push Notification from my web page."} }',
contentType: "application/json"
});
}
</script>
</head>
<body>
Enter your push notification: <br/>
<form id="testForm">
<textarea cols="60" rows="4" id="textAreaText"></textarea>
<br/>
<input type="button" value="Send Push Notification" onclick="makePushNotification()" />
<br/>
</form>
</body>
</html>
(Obviously I'm hard-coding the actual text of the Push Notification here and not really reading it from the textarea box - but that's just for right now.)
Anyway, any ideas what this is missing?
contentType: "application/json" should be a header.
'Content-Type': 'application/json'
Related
I am trying to load image files to my server. To do that I found this code as part of an ajax-example:
<!DOCTYPE html>
<html>
<head>
<title> Ajax JavaScript File Upload Example </title>
</head>
<body>
<!-- HTML5 Input Form Elements -->
<input id="fileupload" type="file" name="fileupload" />
<button id="upload-button" onclick="uploadFile()"> Upload </button>
<!-- Ajax JavaScript File Upload Logic -->
<script>
async function uploadFile() {
let formData = new FormData();
formData.append("file", fileupload.files[0]);
await fetch('/upload.php', {
method: "POST",
body: formData
});
alert('The file has been uploaded successfully.');
}
</script>
</body>
</html>
As I understand it, await fetch('/upload.php', tries to start a program named upload.php on the receiver, my server.
Aren't there supposed to be a domain-name? I mean, where is the upload-
file placed? This will only work if the user is also the owner of the domain, right?
Also, assume my program is on "https://DontTouchThis.com/uploads/", a subdirectory. Even users with this domain will not be able to start it.
I am confused.
I am using a multiple page format with a persistent header. I can successfully change page either with a straight hyperlink or using $(':mobile-pagecontainer').pagecontainer('change'
The code works fine but it seems to "load" the page an additional time each time I click on the buttons to change page.
In this code the button changes the page and outputs a console.log message.
On click I would expect the page to change and to see one "#btn - page x" console.log message.
What happens is the page changes and I get a console message for each time I've loaded the page, not just one.
Even though my code is working, this can't be right - this will just go up and up with normal user usage.
What am I not understanding here?
I've created a jsfiddle to show what I mean. For example, if I click the "goto page x" button 6 times (that's 3 times for each page), I get an output of 3 "#btn - page x" messages, not just one.
Same with the header button - each time I change the page, number of responses from the header button goes up.
the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>problem</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
header button
</div>
<div data-role="page" id="page1" data-title="Page 1">
<div data-role="content">
<h1>I am page 1</h1>
goto page2
</div>
</div>
<div data-role="page" id="page2" data-title="Page 2" data-theme="b">
<div data-role="content">
<h1>I am page 2</h1>
goto page1
</div>
</div>
<script src="problem.js"></script>
</body>
</html>
and the js:
$(document).on('pagebeforeshow','#page1',function(){
console.log('#page1 pagebeforeshow');
$('#btntest1').click(function(){
console.log('#btn - page1');
//$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
});
});
$(document).on('pagebeforeshow','#page2',function(){
console.log('#page2 pagebeforeshow');
$('#btntest2').click(function(){
console.log('#btn - page2');
//$(':mobile-pagecontainer').pagecontainer('change', '#page1', { reloadPage: false});
});
});
$(function() {
$("[data-role='header']").toolbar();
});
$(document).on('pagebeforeshow',function(){
console.log('pagebeforeshow');
$('#headerbtn').click(function(){
console.log('headerbtn click');
});
})
UPDATE:
So I've been trying all sorts of things to try to fix this, including removing data-rel="back", trying data-ajax="false" (which defeats the point of what I'm trying to do), changing page with
$(':mobile-pagecontainer').pagecontainer('change', '#page2');
or
$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
but no joy. Obviously, I've tried googling but can't find anything to help.
In the full app code the buttons communicate with a database, so as the clicks increase, I'm sending and retrieving the same data to the db multiple times on each click.
I really would appreciate some guidance if anyone has any ideas what I could do?
The problem is that each time you're entering the page, you are binding a listener on the element again. So you're binding multiple listeners. The listener should not be written inside the pagebeforeshowhandler.
Take it out like this:
$(document).on('pagebeforeshow','#page1',function(){
console.log('#page1 pagebeforeshow');
});
$('#btntest1').click(function(e){
e.preventDefault();
console.log('#btn - page1');
$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
});
And for page 2 likewise.
I'm trying to test out the jquery-ui's tooltip to no avail. Here is what I did: https://jsfiddle.net/o99ua97c/. But it is not working and I couldn't quite figure out why.
<script>
$(document).ready(function(){});
$('#myINPUT').tooltip({
function() {
content: return 'tooltip from jquery-ui';
}
});
</script>
</head>
<body>
<label for="myINPUT">Enter Something</label>
<input type="text" size="20" id="myINPUT"/>
</body>
The document ready should be around the tooltip call. The tooltip is called to early now.
Edit, there seem to be some other problems as well.
I'm trying to get jQuery plug-in meioMask to work in a MVC Partial View.
As a trial, the following works:
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.meio.mask.min.js" charset="utf-8"></script>
<script type="text/javascript">
jQuery(function($) {
$('#StartTimeText').setMask('time');
});
</script>
</head>
<body>
<input type="text" id="StartTimeText" />
</body>
The text edit box gets a mask edit applied. However, my text edit box is in a MVC partial view that gets shown when user clicks on an item in the main view. In the main view's <head> I added the following:
<script src="#Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.meio.mask.min.js")" type="text/javascript"></script>
In CustomFormPartialView.cshtml, I have the following:
<script type="text/javascript">
jQuery.ajax(
function ($) {
$('#StartTimeText').setMask('time');
}
);
</script>
<input type="text" id="StartTimeText" />
But the text box remains a regular text box with no edit mask applied. I assume this is because the setMask function isn't getting run. I've tried using jQuery.get and jQuery.post as well, none of them made any difference.
Sorry if this has already been asked, I've tried other solutions without any luck. I'm a bit new in this area, so if someone can post as complete code example as possible it'll be greatly appreciated. Thanks.
EDIT:
Following JasCav's suggestion, I've put the following in the <head> section of the file. As far as I can tell, the ajax function isn't getting run at all. This is using DevExpress's MVC Scheduler if that's any help. I'm not getting any errors in FireBug.
<script type="text/javascript">
jQuery.ajax({
url: '/WebTMS_MVC/Calendar/SchedulerPartial',
type: 'POST',
success: function (data, textStatus, xhr) {
$('#StartTimeText').setMask('time');
}
});
</script>
You can use jQuery's ajax function provides a number of callbacks that you can use to perform specific actions after completion of the ajax call (success and complete are two). See more at jQuery's documentation for the ajax function.
$.ajax({
url: yourUrl,
type: "GET",
data: formData,
success: function(data) {
// Do your stuff here.
});
i have this code that should create a dialog with the page google inside when the link is clicked:
<?php use_javascript('/sfJqueryReloadedPlugin/js/jquery-1.3.2.min.js') ?>
<?php use_javascript('/sfJqueryReloadedPlugin/js/plugins/jquery-ui-1.7.2.custom.min') ?>
<?php use_stylesheet('/sfJqueryReloadedPlugin/css/ui-lightness/jquery-ui-1.7.2.custom.css') ?>
<script type="text/javascript">
$(function (){
$('a.ajax').click(function() {
var url = this.href;
var dialog = $('<div style="display:hidden"></div>').appendTo('body');
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
}
);
//prevent the browser to follow the link
return false;
});
});
</script>
<a class="ajax" href="http://www.google.com">
Open a dialog
</a>
The problem: it shows the dialog but google is not inside.
I dont have any problems with:
<script type="text/javascript">
$(function() {
$("#dialog").dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
Any idea?
Javi
You cant make cross-domain ajax requests. This means that you cant GET the html from google.com and shove it into your dialog. If you want to have google show up in your dialog then you will probably want to use an iframe, or just write your own html to look like google and when they hit search open a new window with the results
For security reasons, you cannot make an AJAX request to a domain other than the domain that originally served the webpage. For examples of security risks, see http://en.wikipedia.org/wiki/Same_origin_policy
Instead, you should consider using a hidden iframe with the Google page loaded inside of it that will then appear in the correct location when the button is clicked.
For example:
<iframe src="http://www.google.com/" style="display:none">
<p>Your browser does not support iframes.</p>
</iframe>