Client Create API - Help needed

Options
jmathieson
jmathieson ✭
Ancient Membership
in Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions

I'm trying to create a sign-on box for a microsite, just an email input. I set up the code as the example client create API page provides, but get no results. Convio Support redirected me here (as an aside to Convio staff, can you explain why you offer an API for use by clients, but don't offer support for the API through your support system?)

In Firefox I get "Error: uncaught exception: Permission denied to call method XMLHttpRequest.open"

In IE7 I get an access is denied error, at the line in the API code "req.open('POST', url, true);"

I'd appreciate any clarification on where I'm going wrong, via this forum or direct by email.

I'm using the following code:

<!-- begin convio form -->

<script type='text/javascript'>

var siteID='nwlc'; //This is a unique ID for the Convio site being accessed.

var url='https://secure2.convio.net/' + siteID + '/site/CRConsAPI';

var req=null;

var console=null;

//This is the primary method referenced by the form

function createUser() {

//Establish appropriate XMLHttpRequest

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

} else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

}

if (req) {

params = buildParams(); //Parse the form parameters

req.onreadystatechange = verifyCreate; //Handles asynchronous polling and final method disposition

req.open('POST', url, true); //Convio Constituent Management API only supports POST method

req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

req.send(params); //Send request

}

}

//This function builds a urlencoded set of query arguments

//Assumes all arguments are either in text or hidden elements in form

function buildParams() {

var form=document.getElementById('createUserForm');

var params='';

var name;

var value;

for (i=0; i<form.childNodes.length; i++) {

name=form.childNodes+.name;

value=form.childNodes+.value;

if ((value!=null && value!='') && (form.childNodes+.type=='text' || form.childNodes+.type=='hidden')) {

if (params!='') {params+='&';}

params+=encodeURIComponent(name)

params+='=';

params+=encodeURIComponent(value);

}

}

return params;

}

//Monitors the state of the request and executes

//final business logic when request completes

function verifyCreate(){

if (console!=null && req.readyState==4){

//Success

if (req.status==200) {

var response = eval( '(' + req.responseText + ')'); //Instantiate an object from JSON response

alert('Created new user: ' + response.createConsResponse.cons_id); //Echo new constituent ID

addNode(req.responseText); //Update page with full response information

}

//Failure

else {

var response = eval( '(' + req.responseText + ')'); //Instantiate an object from JSON response

alert('Problems: ' + response.errorResponse.message); //Echo error message

addNode(req.responseText); //Update page with full response information

}

}

}

//Adds a new div element with full response text

function addNode(data) {

var newline=document.createElement("div");

console.appendChild(newline);

var txt = document.createTextNode(data);

newline.appendChild(txt);

}

window.onload=function(){

console=document.getElementById('console');

}

</script>

<div id='createUserForm'>

<input type="hidden" id="method" name="method" value="create"/>

<input type="hidden" id="response_format" name="response_format" value="json"/>

<input type="hidden" id="api_key" name="api_key" value="xxxxxxxxxxx"/>

<strong>Email</strong>

<input type="text" id="primary_email" name="primary_email" value=""/></br></br>

<input type="hidden" id="add_interest_ids" name="add_interest_ids" value="1030"/>

<input type="hidden" id="add_group_ids" name="add_group_ids" value="5261"/>

<input type="hidden" id="no_welcome" name="no_welcome" value="f"/>

<input type="hidden" id="redirect" name="redirect" value="/>

<input type="hidden" id="v" name="v" value="1.0"/>

<button onclick="createUser()">Sign Up</button>

</div>

<!-- end convio form -->

Tagged:

Comments

  • tommy Spann
    tommy Spann ✭
    Ancient Membership Facilitator 1

    I'd like to address the support question.

    As you can appreciate, supporting an API is an altogether different challenge to supporting a software application. Given that any use of the APIs will involve custom code, it's not feasible to debug custom code for clients, which is why we've enabled this forum and are encouraging clients, partners, as well as, our engineering and support staff to chime in and help each other out. In time we hope this community will grow to become a vibrant, active and valuable resource for API support and best practices, much like the Flickr, Google and Salesforce.com API support forums have become.

    Cheers to you for blazing the trail! We have a handful of other clients also working to build custom applications using the API and I would like to encourage them to weigh in and "lend a hand".

  • tommy Spann
    tommy Spann ✭
    Ancient Membership Facilitator 1

    Now I'd like to address the technical question.

    It looks like you have used the sample code provided on the create method page, however, it appears you've not modified the post url

    var url='https://secure2.convio.net/' + siteID + '/site/CRConsAPI';

    The script does not know your siteID.

    Find and replace this with your siteID and then give it a try.

  • Adrian Cotter
    Adrian Cotter ✭
    Ancient Membership Facilitator 2
    tommy Spann:

    Now I'd like to address the technical question.

    It looks like you have used the sample code provided on the create method page, however, it appears you've not modified the post url

    var url='https://secure2.convio.net/' + siteID + '/site/CRConsAPI';

    The script does not know your siteID.

    Find and replace this with your siteID and then give it a try.

    actually he sets the siteID variable in the line above. But perhaps it's not the right ID.

  • Jeff Mills
    Jeff Mills ✭
    Ancient Membership Facilitator 1

    The error messages indicate that the browsers are not permitting the AJAX call to be made to the Convio server. A security feature of browsers is to only allow these types of XML HTTP requests to be sent to the same server that sent the current page. To use this style of AJAX programming to send the API call the code must be in a page served by the Convio system, for example, within a secure PageBuilder page. Other alternatives are to have the AJAX code send the request to the same server that sent the page and then have that server use the server-to-server Convio API, or to change the code to call the Convio API using a form post instead of JavaScript and XML HTTP objects.

  • Matthew Andrade
    Matthew Andrade ✭
    Ancient Membership Facilitator 1 Name Dropper Photogenic
    JeffMills :

    The error messages indicate that the browsers are not permitting the AJAX call to be made to the Convio server. A security feature of browsers is to only allow these types of XML HTTP requests to be sent to the same server that sent the current page. To use this style of AJAX programming to send the API call the code must be in a page served by the Convio system, for example, within a secure PageBuilder page. Other alternatives are to have the AJAX code send the request to the same server that sent the page and then have that server use the server-to-server Convio API, or to change the code to call the Convio API using a form post instead of JavaScript and XML HTTP objects.

    I'm sorry but can you clerify that please... I don't think i'm understanding what you just explained.

  • Jeff Mills
    Jeff Mills ✭
    Ancient Membership Facilitator 1
    Matthew Andrade:

    I'm sorry but can you clerify that please... I don't think i'm understanding what you just explained.

    The XMLHttpRequest or ActiveXObject("Microsoft.XMLHTTP") object that you create has security restrictions that are built in to the browsers and that have nothing to do with the Convio API. They are in effect for any URL that you try to access with them. This is often called the "same origin policy". The restriction is that the browser will only let you access URLs on the same site that the page came from (your server). Some alternative solutions are:

    1. Use AJAX to call a URL on your own server which runs server-side code to call the Convio server-side API. Your server-side code then relays the response back to the browser as the response to your AJAX call.

    2. Build your page within Convio on a secure (SSL) PageBuilder page. This way, the AJAX code will be calling back to the same domain ("origin") to access the API and it will be allowed.

    3. Instead of AJAX, submit a form using the Convio API URL as the "action" attribute of the form.

  • Michael
    Michael ✭
    Ancient Membership Facilitator 2
    JeffMills :

    The XMLHttpRequest or ActiveXObject("Microsoft.XMLHTTP") object that you create has security restrictions that are built in to the browsers and that have nothing to do with the Convio API. They are in effect for any URL that you try to access with them. This is often called the "same origin policy". The restriction is that the browser will only let you access URLs on the same site that the page came from (your server). Some alternative solutions are:

    1. Use AJAX to call a URL on your own server which runs server-side code to call the Convio server-side API. Your server-side code then relays the response back to the browser as the response to your AJAX call.

    2. Build your page within Convio on a secure (SSL) PageBuilder page. This way, the AJAX code will be calling back to the same domain ("origin") to access the API and it will be allowed.

    3. Instead of AJAX, submit a form using the Convio API URL as the "action" attribute of the form.

    Matt, also, this is and aside and totally a personal preference... but if you're trying to write AJAX applications, I would suggest you look into some of the JS libraries out there like JQuery or Prototype. I used reinvent the wheel all the time, intentionally, because I really wanted to learn how to do things. Over the years (and i've been doing web developement for more than 10 now), I realized how silly that is. The code you provided to form, send and handle the return of your xmlHTTP request could be written in like 6 or so lines of code total with either JQuery or Prototype. There are still lots of things you have to do yourself, but all the little tricky things like cross-browser support code are handled inside the library and you never need to touch it. I am partial to Prototype, but have done lots of applications under JQuery too. They are basically the same, don't let any biased bloggers say otherwise. The trick is picking one, learning the API syntax and sticking to it....

  • Matthew Andrade
    Matthew Andrade ✭
    Ancient Membership Facilitator 1 Name Dropper Photogenic
    Michael :

    Matt, also, this is and aside and totally a personal preference... but if you're trying to write AJAX applications, I would suggest you look into some of the JS libraries out there like JQuery or Prototype. I used reinvent the wheel all the time, intentionally, because I really wanted to learn how to do things. Over the years (and i've been doing web developement for more than 10 now), I realized how silly that is. The code you provided to form, send and handle the return of your xmlHTTP request could be written in like 6 or so lines of code total with either JQuery or Prototype. There are still lots of things you have to do yourself, but all the little tricky things like cross-browser support code are handled inside the library and you never need to touch it. I am partial to Prototype, but have done lots of applications under JQuery too. They are basically the same, don't let any biased bloggers say otherwise. The trick is picking one, learning the API syntax and sticking to it....

    Michael,

    Thank you... I will take a look into taking that route. I do like learning how things are working but I see what your saying.

  • Michael
    Michael ✭
    Ancient Membership Facilitator 2
    Matthew Andrade:

    Michael,

    Thank you... I will take a look into taking that route. I do like learning how things are working but I see what your saying.

    One other thing I happened to notice in your HTML:

    <input type="hidden" id="redirect" name="redirect" value="http://www.nwlc.org/fairpay/index.html%22//>

    That URL isn't correct. Maybe an artifact of copy/pasting, but the %22// part is an error.

Categories