Databases
StackOverflow2013
Postsdbo
POCalling HTML forms and CSS on another site
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCalling HTML forms and CSS on another site
    primarykey
    data
    text
    <p>I'm new to HTML/javascript so I apologize if this is a bit abstract, I'm not quite sure how to word the title. I did a bit of research and I understand the same origin policy applies, so assume I have the headers set for anyone to access.</p> <p>I've always wondered how software like Olark works when integrated into another site. What I mean is they provide a short amount code to copy/paste onto your site, and then you have a wonderful looking styled and interactive form. I guess what's most puzzling to me is that there is seemingly very little HTML but obviously that's how it's generated on the page.</p> <p>I signed up for the service just to see what the code looks like and here's what they gave me to copy/paste onto my site (with my information removed)</p> <pre><code>&lt;!-- begin olark code --&gt; &lt;script data-cfasync="false" type='text/javascript'&gt;/*&lt;![CDATA[*/window.olark||(function(c){var f=window,d=document,l=f.location.protocol=="https:"?"https:":"http:",z=c.name,r="load";var nt=function(){ f[z]=function(){ (a.s=a.s||[]).push(arguments)};var a=f[z]._={ },q=c.methods.length;while(q--){(function(n){f[z][n]=function(){ f[z]("call",n,arguments)}})(c.methods[q])}a.l=c.loader;a.i=nt;a.p={ 0:+new Date};a.P=function(u){ a.p[u]=new Date-a.p[0]};function s(){ a.P(r);f[z](r)}f.addEventListener?f.addEventListener(r,s,false):f.attachEvent("on"+r,s);var ld=function(){function p(hd){ hd="head";return["&lt;",hd,"&gt;&lt;/",hd,"&gt;&lt;",i,' onl' + 'oad="var d=',g,";d.getElementsByTagName('head')[0].",j,"(d.",h,"('script')).",k,"='",l,"//",a.l,"'",'"',"&gt;&lt;/",i,"&gt;"].join("")}var i="body",m=d[i];if(!m){ return setTimeout(ld,100)}a.P(1);var j="appendChild",h="createElement",k="src",n=d[h]("div"),v=n[j](d[h](z)),b=d[h]("iframe"),g="document",e="domain",o;n.style.display="none";m.insertBefore(n,m.firstChild).id=z;b.frameBorder="0";b.id=z+"-loader";if(/MSIE[ ]+6/.test(navigator.userAgent)){ b.src="javascript:false"}b.allowTransparency="true";v[j](b);try{ b.contentWindow[g].open()}catch(w){ c[e]=d[e];o="javascript:var d="+g+".open();d.domain='"+d.domain+"';";b[k]=o+"void(0);"}try{ var t=b.contentWindow[g];t.write(p());t.close()}catch(x){ b[k]=o+'d.write("'+p().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};ld()};nt()})({ loader: "static.olark.com/jsclient/loader0.js",name:"olark",methods:["configure","extend","declare","identify"]}); /* custom configuration goes here (www.olark.com/documentation) */ olark.identify('');/*]]&gt;*/&lt;/script&gt;&lt;noscript&gt;&lt;a href="https://www.olark.com/site//contact" title="Contact us" target="_blank"&gt;Questions? Feedback?&lt;/a&gt; powered by &lt;a href="http://www.olark.com?welcome" title="Olark live chat software"&gt;Olark live chat software&lt;/a&gt;&lt;/noscript&gt; &lt;!-- end olark code --&gt; </code></pre> <p>To me, it looks like the javascript is dealing with passing of information back in forth from the chat. However, where is the form itself generated? I don't see any HTML elements or anything for the structure. </p> <p>Say I have a simple HTML form hosted on my server and I want others to be able to generate this simple form on their site.</p> <pre><code>&lt;form method = "post" id="simpleform"&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="textbox" name="simpletext"/&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="submit" name="submittext"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; </code></pre> <p>I'm not asking for someone to explicitly write out the code, but in a general sense how would I accomplish this? Would I have to make an html file and then give the link to be included or would I do something like put it in a javascript function and call that from the site?</p> <p><strong>edit- It was pointed out to me that using JSONP this can be accomplished. I have found a tutorial <a href="http://www.w3resource.com/JSON/JSONP.php" rel="nofollow">here</a> which gives me an idea, but I still have no idea how to generate HTML from this. Say I wanted to make that form which I mentioned, how could I pass HTML elements?</strong></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser2443591
    1. USuser2443591
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCalling HTML forms and CSS on another site
      1. This table or related slice is empty.
      1. VTDownMod
    1. COJSONP http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about
      singulars
      1. POCalling HTML forms and CSS on another site
      1. USYe Liu
    2. CO@jaux I see that it works based on callbacks, but can I pass HTML structure through a callback?
      singulars
      1. POCalling HTML forms and CSS on another site
      1. USuser2443591
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload