My company is launching a Marketo campaign landing page to promote a microsite/testing tool I have built. I have a basic understanding of Marketo, but that is it.
We want to include some stats on the page using live data from my app, I can easily build an API to get this data, and based on what I have read I can show it in the Marketo landing page using a custom code filed.
I am trying to find proof that the code field can handle JSONP, but I can't seem to, I am hoping someone here could validate that it does.
Essentially I would want to put something like this in the code block:
<script>
// this is pseudo-code
function show_stats(json){
$("#holder").text("stuff from json")
}
$( document ).ready(function() {
$.ajax({
url: "https://myapp.mycompany.com",
dataType: "jsonp",
jsonpCallback: "show_stats"
});
});
</script>
<p id="holder"></p>
If by code field you mean the custom HTML element in the landing page editor - the docs indicate that you can put any scripts in there. I haven't tried exactly your pseudo-code, but anything I've tried putting in one has rendered as expected.
Also, at the template editor level of a Marketo landing page template, it's just a normal HTML document with some extra classes thrown in, so you can put whatever code you want in there - so I don't see any reason why that wouldn't work.
The only thing that you might run into trouble with JSONP stuff, is possibly cross-domain CORS issues?
Related
I'm trying to write a spider that will automatically log in to this website. However, when I try using scrapy.FormRequest.from_response in the shell I get the error:
No <form> element found in <200 https://www.athletic.net/account/login/?ReturnUrl=%2Fdefault.aspx>
I can definitely see the form when I inspect element on the site, but it just did not show up in Scrapy when I tried finding it using response.xpath() either. Is it possible for the form content to be hidden from my spider somehow? If so, how do I fix it?
The form is created using Javascript, it's not part of the static HTML source code. Scrapy does not parse Javascript, thus it cannot be found.
The relevant part of the static HTML (where they inject the form using Javascript) is:
<div ng-controller="AppCtrl as appC" class="m-auto pt-3 pb-5 container" style="max-width: 425px;">
<section ui-view></section>
</div>
To find issues like this, I would either:
compare the source code from "View Source Code" and "Inspect" to each other
browse the web page with a browser without Javascript (when I develop scrapers I usually have one browser with Javascript for research and documentations and another one for checking web pages without Javascript)
In this case, you have to manually create your FormRequest for this web page. I was not able to spot any form of CSRF protection on their form, so it might be as simple as:
FormRequest(url='https://www.athletic.net/account/auth.ashx',
formdata={"e": "foo#example.com", "pw": "secret"})
However, I think you cannot use formdata, but instead they expect you to send JSON. Not sure if FormRequest can handle this, I guess you just want to use a standard Request.
Since they heavily use Javascript on their front end, you cannot use the source code of the page to find these parameters either. Instead, I used the developer console of my browser and checked the request/response that happened when I tried to login with invalid credentials.
This gave me:
General:
Request URL: https://www.athletic.net/account/auth.ashx
[...]
Request Payload:
{e: "foo#example.com", pw: "secret"}
Scrapy has a JsonRequest class to help with posting JSON. See here [https://docs.scrapy.org/en/latest/topics/request-response.html]
So something like the below should work
data = {"password": "pword", "username": "user"}
# JSON POST to API login URL
return JsonRequest(
url=url,
callback=self.after_login,
data=data,
)
I'm totally new to RESTful API and html and was wondering if I could get some advice.
Basically, I've made an application with a restful api using RestX, see picture, that can succesfully retrieve info, like a list of strings with node addresses.
And I want to make a HTML page that looks roughly like this (mockup):
I'm totally unsure how to actually do this however. Also, I'm unsure of how to display, for example, the list of strings I've received. In the mockup, the list of registered nodes should dynamically be made from the list received from the application, for example.
I've made a sample HTML text file (from another overflow post), but that doesn't really do anything...
See code:
<!DOCTYPE html>
<html>
<head>
<script src="the/Path/To/The/Downloaded/JQuery.js"></script>
<script>
//Usually, you put script-tags into the head
function myFunction() {
//This performs a POST-Request.
//Use "$.get();" in order to perform a GET-Request (you have to take a look in the rest-API-documentation, if you're unsure what you need)
//The Browser downloads the webpage from the given url, and returns the data.
$.get( "http://192.168.59.130:8080/api/#/ui/api-docs/#/operation/list/GET/___list___nodes", function( data ) {
//As soon as the browser finished downloading, this function is called.
$('#demo').html(data);
alert( "Load was performed." );
});
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
I'm lost, can anybody help?
Currently you are not using the REST APIs, but the URLs to access Restx UI interface.
The first thing you should do is to update the URL you are using to something like: http://192.168.59.130:8080/api/list/nodes
You'll get back a list of entities (at least, that's what the name of the API method suggests) in json that you can use in your javascript to populate the HTML form.
I need to remotely control a solenoid with an Arduino, from about 2000 feet away. So far, it works: I designed a control circuit that fires based upon a logic-level signal from pin 9.
My problem: the initial Arduino code sent up a web page over ethernet each time the form was submitted, but if the user tried to toggle the state too quickly, the transmission was interrupted and the whole system puked. It was also slow to load.
My attempted solution: I created an HTML document on a local page to do what I need done, and indeed it does: I can control the Solenoid. However once the links which control the commands are submitted, there's no redirect back to the local control page, and after much Google-fu I can't seem to implement it in this way. Is this possible? Is this a good approach?
<HTML>
<HEAD>
<TITLE>Sensor-Cleaning Control</TITLE>
</HEAD>
<BODY>
<H1>Solenoid Remote Actuation</H1>
<hr />
<br />
Turn On Solenoid
Turn Off Solenoid<br />
<button type="button" onclick="location.href='http://192.168.0.88/?sol_on'">On</button>
<button type="button" onclick="location.href='http://192.168.0.88/?sol_off'">Off</button>
<button type="button" onclick="location.href='http://192.168.0.88/?toggle'">Toggle</button>
<br />
<p>(Check pin 9 LED ''L9'' to make sure this code is working)</p>
</BODY>
</HTML>
So if the Arduino sees "sol_on" it turns the solenoid on; "sol_off" off, and you can guess what "toggle" does. I'm pretty comfortable coding, but I know nothing of javascript, CSS, or PHP. I'm not afraid of implementing those, it just needs to be clear for me to do so. Note that there's some redundancy in the code above, I left it so that I could test multiple approaches to the UI.
If I'm understanding you correctly, your best approach would probably be to use Ajax, where your web page uses an asynchronous Javascript call to do the toggling/on/off.
Effectively, you have the web page as shown, but instead of links to the Arduino "pages", clicking each link fires off an asynchronous request to the Arudino page, leaving your current page in the browser while still prodding the URL on the Arduino web server.
If you're not that familiar with Javascript, possibly a sensible approach would be to use jQuery, a Javascript library which insulates you somewhat from differences between browsers, and encapsulates things like Ajax requests quite nicely.
Here are some simple steps:
1) Download the latest production jQuery. I'm using 2.0.3 from here for this example.
2) Put it in the same directory as your web page, so we can include it easily.
3) Convert your web page to use Ajax with jQuery. (I've also converted it to something a little closer to the current web standard, HTML5):
<!DOCTYPE html>
<html>
<head>
<title>Sensor-Cleaning Control</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Include jQuery so we can use its simple goodness -->
<script src="jquery-2.0.3.min.js"></script>
<script>
/* This function will be called by the onclick handlers of the buttons */
function solenoid(url) {
// Use jQuery's Ajax functionality to prod the given URL without
// reloading this page or visiting another one:
$.ajax(url);
}
</script>
</head>
<body>
<h1>Solenoid Remote Actuation</h1>
<button type="button" onclick="solenoid('http://192.168.0.88/?sol_on');">On</button>
<button type="button" onclick="solenoid('http://192.168.0.88/?sol_off');">Off</button>
<button type="button" onclick="solenoid('http://192.168.0.88/?toggle');">Toggle</button>
<p>(Check pin 9 LED ''L9'' to make sure this code is working)</p>
</body>
</html>
The main things to note are:
1) The inclusion of the jQuery library, so we can use its ajax() call and fire off http requests in the background with ease no matter which browser we're on.
2) I've replaced your existing onclick events with a call to a new function called solenoid, that takes a URL as a parameter.
3) The solenoid function, defined in the <script> at the top, takes the URL that was passed in and uses jQuery's ajax() call to poke the given URL. This happens in the "background", i.e. without any page (re)load.
From here, you could expand this in all sorts of ways. This code could, for example, read a short response from the Arduino and handle it in the background, too, perhaps indicating the current state of the solenoid.
(Given the simplicity of what I'm doing here, I'm sure this could be done in a more "lightweight" way in pure Javascript without jQuery, but that would have involved a chunk more slightly scary code in this example to ensure the Ajax stuff worked in many different browsers -- there's some browser inconsistency in how the underlying object (an XMLHttpRequest) used by Ajax is created. I figured for a Javascript beginner, simpler was probably better...)
Well, i don't know your Arduino's based http server, but it certainly shall reply all requests, either with an 200 http status, that means "OK" or with any other error message like 400, that means "Bad Request". While your web application is waiting for a response, you can block (or hide) the page (or some elements) so the user will be unable to start a click-frenzy and mess up everything while he should be waiting the server's (Arduino) response.
You can use an ajax call using JQuery, so you will be able to "do something" after calling the url with your "Arduino code", either in case of success or fail.
Please see the example below:
<html>
<head>
<script src="../scripts/jquery-2.0.3.min.js"></script>
<script>
function callArduinoCode(var code) {
jQuery.ajax({
type: "GET",
url: "http://192.168.0.88/?" + code,
data: dados,
beforeSend: function() {
// Hide links, show loading message...
$("#controls").css("display","none");
$("#loading").css("display","block");
},
success: function( data ){
// Hide loading message, show links again...
$("#controls").css("display","block");
$("#loading").css("display","none");
},
error: function (xhr, ajaxOptions, thrownError){
alert("Failed, HTTP Status was " + xhr.status);
// Hide loading message, show links again...
$("#controls").css("display","block");
$("#loading").css("display","none");
}
});
return false;
}
</script>
</head>
<body>
<div id="controls">
<!-- your links here -->
<a onClick="callArduinoCode('sol_on'); return false;">Turn Solenoid ON</a>
<a onClick="callArduinoCode('sol_off'); return false;">Turn Solenoid OFF</a>
</div>
<div id="loading" style="display:none;">
Loading, please wait...
</div>
</body>
</html>
You can get JQuery at jquery.com
Good Luck!
No need to add any library / framework to accomplish what you need. Even you can achieve it without javascript at all. Simply add an invisible IFRAME in your HTML file with name attribute set. In following example we'll use "Arduino" as the IFRAME's name, but you can use any valid element name you'd like.
<IFRAME name="Arduino" style="display:none"></IFRAME>
Next, add target attribute on your link element (the 'A' tags) with value specified as the IFRAME's name, i.e.:
Turn On Solenoid
When you click on the link, request sent to your Arduino and resulting response will be directed to the the invisible IFRAME without navigating away from currently viewed page.
For the button element, prefix location.href in onclick handler with the IFRAME's name:
<BUTTON onclick="Arduino.location.href='//192.168.0.88?sol_on';">On</BUTTON>
Lets say I have example.html and inside that i have a code like
<iframe src="x.com" id="x"></iframe>
from x.com, I would like to get everything inside
<div class="content">...</div>
into example.html inside
<div class="xCodes">ONTO HERE</div>
So I tried to get the elements inside x.com to show up on example.html and I heard it's not possible to access them for cross domain problems.
I was wondering if there was another way to retrieve HTML tags from x.html into example.html
Maybe without using <iframe />??
Sourced from: http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
$('.xCodes').load('http://x.com/x.html');
OR
$.ajax({
url: 'http://x.com/x.html',
type: 'GET',
success: function(res) {
var data = $(res.responseText).find('.content').text();
$('.xCodes').html(data);
}
});
If I understand correctly you want to rip the content from a DIV on one site and display it on another. There are several issues with this, but I'll focus on the technological aspect and assume you are acting in good faith with pulling the content.
The real issue you're running up against here is that you don't have access to DOM elements of pages that haven't loaded yet. As such you need to tell the browser to load the data for that page so that you can access the elements that should have loaded on the page and then pull the information out. JQuery has a nice little method to help with that called .load() (http://api.jquery.com/load/).
As an important side note however you can't do this as all modern broswers forbid cross site access in such a manner:
From the JQuery .load() page:
Additional Notes:
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
And check out:
http://en.wikipedia.org/wiki/Same_origin_policy
One more bit of warning. If you don't control the code on the other site you are potentially exposing yourself to serious security issues so only do this in situations where you have control of the other site or for some reason have absolute faith in that site. Alternatively you should try to, if available, use APIs for the sites/services you are trying to get data from.
I'm currently trying to build a new website, nothing special, nice and small, but I'm stuck at the very beginning.
My problems are clean URLs and page navigation. I want to do it "the right way".
What I would like to have:
I use CodeIgniter to get clean URLs like
"www.example.com/hello/world"
jQuery helps me using ajax, so I can
.load() additional content
Now I want to use HTML5 features like pushstate to
get rid of the # in the URL
It should be possible to go back and forth without a page refresh but the page will still display the right content according to the current URL.
It should also be possible to reload a page without getting a 404 error. The site should exist thanks to CodeIgniter. (there is a controller and a view)
For example:
A very basic website. Two links, called "foo" and "bar" and a emtpy div box beneath them.
The basic URL is example.com
When you click on "foo" the URL changes to "example.com/foo" without reloading and the div box gets new content with jQuery .load(). The same goes for the other link, just of course different content and URL.
After clicking "foo" and then "bar" the back button will bring me back to "example.com/foo" with the according content. If I load this link directly or refresh the page, it will look the same. No 404 error or something.
Just think about this page and tell me how you would do this.
I would really love to have this kind of navigation and so I tried several things.
So far...
I know how to use CodeIgniter to get the URLs like this. I know how to use jQuery to load additional content and while I don't fully understand the html5 pushstate stuff, I at least got it to work somehow.
But I can't get it to work all together.
My code right now is a mess, that's the reason I don't really want to post it here. I looked at different tutorials and copy pasted some code together. Would be better to upload my CI folder I guess.
Some of the tutorials I looked at:
Dive into HTML5
HTML5 demos
Mozilla manipulating the browser history
Saner HTML5 history
Github: History.js
(max. number of links reached :/)
I think my main problem is, that everybody tries to make it compatible with all browsers and different versions, adds scripts/jQuery plugins and whatnot and I get confused by all the additional code. There is more code between my script-tags then actual html content.
Could somebody post the most basic method how to use HTML5 for my example page?
My failed attemp:
On my test page, when I go back, the URL changes, but the div box will still show the same content, not the old one. I also don't know how to change the URL in the script according to the href attribute from the link. Is there something like $(this).attr('href'), that changes according to which link I click? Right now I would have to use a script for every link, which of course is bad.
When I refresh the site, CodeIgniter kicks in and loads the view, but really only the view by itself, the one I loaded with ajax, not the whole page. But I guess that should be easy to fix with a layout and the right controller settings. Haven't paid much attention to this yet.
Thanks in advance for any help.
If you have suggestions, ideas, or simple just want to mention something, please let me know.
regards
DiLer
I've put up a successful minimal example of HTML5 history here: http://cairo140.github.com/html5-history-example/one.html
The easiest way to get into HTML5 pushstate in my opinion is to ignore the framework for a while and use the most simplistic state transition possible: a wholesale replacement of the <body> and <title> elements. Outside of those elements, the rest of the markup is probably just boilerplate, although if it varies (e.g., if you change the class on HTML in the backend), you can adapt that.
What a dynamic backend like CI does is essentially fake the existence of data at particular locations (identified by the URL) by generating it dynamically on the fly. We can abstract away from the effect of the framework by literally creating the resources and putting them in locations through which your web server (Apache, probably) will simply identify them and feed them on through. We'll have a very simple file system structure relative to the domain root:
/one.html
/two.html
/assets/application.js
Those are the only three files we're working with.
Here's the code for the two HTML files. If you're at the level when you're dealing with HTML5 features, you should be able to understand the markup, but if I didn't make something clear, just leave a comment, and I'll walk you through it:
one.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>One</title>
</head>
<body>
<div class="container">
<h1>One</h1>
Two
</div>
</body>
</html>
two.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>Two</title>
</head>
<body>
<div class="container">
<h1>Two</h1>
One
</div>
</body>
</html>
You'll notice that if you load one.html through your browser, you can click on the link to two.html, which will load and display a new page. And from two.html, you can do the same back to one.html. Cool.
Now, for the history part:
assets/application.js
$(function(){
var replacePage = function(url) {
$.ajax({
url: url,
type: 'get',
dataType: 'html',
success: function(data){
var dom = $(data);
var title = dom.filter('title').text();
var html = dom.filter('.container').html();
$('title').text(title);
$('.container').html(html);
}
});
}
$('a').live('click', function(e){
history.pushState(null, null, this.href);
replacePage(this.href);
e.preventDefault();
});
$(window).bind('popstate', function(){
replacePage(location.pathname);
});
});
How it works
I define replacePage within the jQuery ready callback to do some straightforward loading of the URL in the argument and to replace the contents of the title and .container elements with those retrieved remotely.
The live call means that any link clicked on the page will trigger the callback, and the callback pushes the state to the href in the link and calls replacePage. It also uses e.preventDefault to prevent the link from being processed the normal way.
Finally, there's a popstate event that fires when a user uses browser-based page navigation (back, forward). We bind a simple callback to that event. Of note is that I couldn't get the version on the Dive Into HTML page to work for some reason in FF for Mac. No clue why.
How to extend it
This extremely basic example can more or less be transplanted onto any site because it does a very uncreative transition: HTML replacement. I suggest you can use this as a foundation and transition into more creative transitions. One example of what you could do would be to emulate what Github does with the directory navigation in its repositories. It's an intermediate manoever that requires floats and overflow management. You could start with a simpler transition like appending the .container in the loaded page to the DOM and then animating the old container to {height: 0}.
Addressing your specific "For example"
You're on the right track for using HTML5 history, but you need to clarify your idea of exactly what /foo and /bar will contain. Basically, you're going to have three pages: /, /foo, and /bar. / will have an empty container div. /foo will be identical to / except in that container div has some foo content in it. /bar will be identical to /foo except in that the container div has some bar content in it. Now, the question comes to how you would extract the contents of the container through Javascript. Assuming that your /foo body tag looked something like this:
<body>
foo
bar
<div class="container">foo</div>
</body>
Then you would extract it from the response data through var html = $(data).filter('.container').html() and then put it back into the parent page through $('.container').html(html). You use filter instead of the much more reasonable find because from some wacky reason, jQuery's DOM parser produces a jQuery object containing every child of the head and every child of the body elements instead of just a jQuery object wrapping the html element. I don't know why.
The rest is just adapting this back into the "vanilla" version above. If you are stuck at any particular stage, let me know, and I can guide you better though it.
Code
https://github.com/cairo140/html5-history-example
Try this in your controller:
if (!$this->input->is_ajax_request())
$this->load->view('header');
$this->load->view('your_view', $data);
if (!$this->input->is_ajax_request())
$this->load->view('footer');