t am having performance issues the site loads, it's the facebook chat I integrated into taking a lot of time to start. I have a reference to the article:
Facebook chat plugin "kills" Pagespeed to 33
. I followed the instructions and it worked fine, until the function FB.Event.subscribe ("xfbml.render", function() {.....} didn't work.
i'm a novice, am i missing the code, or something? Please help. thank
here is my html and js code
<button id="fb-messenger-fake-button">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 1024 1024" aria-hidden="true">
<circle fill="#00B2FF" style="fill: var(--msgr-color, #00B2FF)" cx="512" cy="512" r="512"/>
<g id="spinner" fill="#fff"><circle cx="512" cy="239" r="47"/><circle cx="375" cy="275" r="47" fill-opacity="0.9"/><circle cx="275" cy="375" r="47" fill-opacity="0.8"/><circle cx="239" cy="512" r="47" fill-opacity="0.7"/><circle cx="275" cy="649" r="47" fill-opacity="0.6"/><circle cx="375" cy="749" r="47" fill-opacity="0.5"/><circle cx="512" cy="785" r="47" fill-opacity="0.4"/><circle cx="649" cy="749" r="47" fill-opacity="0.3"/><circle cx="749" cy="649" r="47" fill-opacity="0.2"/><circle cx="785" cy="512" r="47" fill-opacity="0.1"/></g>
<path id="logo" fill="#fff" d="M512 171c192 0 341 141 341 331S704 833 512 833c-35 0-68-5-99-13-6-2-12-1-18 1l-68 30c-17 8-37-5-38-24l-2-61c0-7-4-14-9-19a324 324 0 01-107-245c0-190 149-331 341-331zM307 599c-10 15 9 32 24 21l107-82c8-5 18-5 25 0l80 60c24 18 58 12 74-14l100-159c10-15-9-32-24-21l-107 82c-8 5-18 5-25 0l-80-60a51 51 0 00-74 13L307 599z"/>
</svg>
</button>
<!-- Messenger Chat plugin Code -->
<div id="fb-root"></div>
<div id="fb-customer-chat" class="fb-customerchat">
</div>
<script>
var chatbox = document.getElementById('fb-customer-chat');
chatbox.setAttribute("page_id", "...( my id ).... ");
chatbox.setAttribute("attribution", "biz_inbox");
// Facebook SDK for JavaScript inject code
// Change language part to yours, e.g.: en_US > pl_PL
function injectFbSdkAsync(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}
var fbMessengerFakeButton = document.getElementById('fb-messenger-fake-button');
fbMessengerFakeButton.addEventListener('click', function() {
// Once #fb-messenger-fake-button is clicked triggers animated spinner inside it
// See CSS, and SVG structure inside the button
this.classList.add('active');
// Inject the Facebook SDK in async manner:
injectFbSdkAsync(document, "script", "facebook-jssdk");
// Callback on Facebook SDK init, that fires up the Messenger plugin
window.fbAsyncInit = function () {
FB.init({
xfbml : true,
version : 'v11.0',
});
// Callback when Facebook SDK finish up with rendering
FB.Event.subscribe("xfbml.render", function () {
// Opening the Facebook Messenger
FB.CustomerChat.show(true);
// Hide the fake button, so that only the real one remains!
fbMessengerFakeButton.style.display = 'none';
});
};
});
</script>
Related
I have a very simple svg
<div id="printId">
test
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" />
</svg>
</div>
and trying to print it with html2canvas and jspdf. But whatever I do I get an error
Error loading svg data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%22100%22%20width%3D%22100%22%20style%3D%22-webkit-writing-mode%3A%20horizontal-tb%3B%20-webkit-user-modify%3A%20read-only%3B%20-webkit-user-drag%3A%20auto%3B%20-web
Oe.error # html2canvas-1.1.2.min.js:20
and test.pdf file with just word test in it.
I googled this for about 3 hours, and in every place people recommend settings width/height atributes. Which, as you can see, doesn't help in my case.
I've simplified it as much as I could. Here is the full index.html I use:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="printId">
test
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" />
</svg>
</div>
<script src="../../../script/jsPDF/jspdf-2.3.1.umd.min.js" defer></script>
<script src="../../../script/jsPDF/html2canvas-1.1.2.min.js" defer></script>
<script>
function saveAsPDF(divId, usersName, certNumber = '', type = 'old')
{
const { jsPDF } = window.jspdf;
const pdf = new jsPDF();
var source = document.getElementById("printId");
pdf.html(
source, {
callback: function (pdf) {
pdf.save("test.pdf");
},
});
}
</script>
<input type='submit'
onclick='saveAsPDF();'
value='save'>
</body>
</html>
I also tried all possible versions of html2canvas:
1.1.2
1.1.5
1.2.2
1.3.2
and two versions of jspdf:
2.1.1
2.3.1
And two browsers: Chrome and Opera.
What can be my issue?
Edit:
I managed to make html2canvas work on it's own with the document below. Now the question is how to make it work with jspdf together:
<html>
<head></head>
<body>
<div id="printId">
this is circle:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" />
</svg>
</div>
<hr>
<h4>Image of above HTML content...</h4>
<div id="canvasImg"></div>
<script src="../../../script/jsPDF/html2canvas-1.3.2.min.js"></script>
<script>
html2canvas(document.getElementById('printId')).then(function(canvas) {
var canvasImg = canvas.toDataURL("image/jpg");
document.getElementById('canvasImg').innerHTML = '<img src="'+canvasImg+'" alt="">';
});
</script>
</body>
</html>
It looks like jspdf is not able to add svg as vector graphic to a page. There are three options:
Use svg2pdf instead of jspdf to convert svg to pdf on it's own.
Use addSvgAsImage function of jspdf to place an svg in the pdf page manually.
Convert svg to jpg first, then use jspdf.
I've chosen the 3rd option and wrote a function, which I run before saving canvas as pdf:
htmlToJpg: function()
{
var canvas = document.querySelector('.to-print');
screenWidth = parseFloat(window.getComputedStyle(canvas).width);
var problematic = document.querySelectorAll('.convert-to-jpg');
problematic.forEach(function(el) {
html2canvas(el,
{
scale: 2480/screenWidth // 2480px - size for A4 paper, 300 dpi
}
)
.then(function(canvas) {
var img = canvas.toDataURL("image/jpeg");
el.innerHTML = '<img src="' + img + '" class="img">';
});
});
}
import html2canvas from 'html2canvas';
import { jsPDF as JsPDF } from 'jspdf';
import { useCallback, useEffect } from 'react';
export const useDownloadPdf = (name: string, isReady: boolean) => {
useEffect(() => {
if (isReady) {
const fileName = `${name}.pdf`;
const pdf = new JsPDF({
orientation: 'p',
unit: 'mm',
format: 'a4',
putOnlyUsedFonts: true,
});
const convertElements = document.querySelectorAll('.convert-on-pdf');
const elements = Array.from(convertElements) as HTMLElement[];
if (elements.length > 0) {
Promise.all(
elements.map(async (element) => {
const canvas = await html2canvas(element);
element.replaceWith(canvas);
}),
).then(() => {
pdf.html(document.body, {
callback: (generatedPdf) => {
generatedPdf.save(fileName)
},
});
});
} else {
pdf.html(document.body, {
callback: (generatedPdf) => {
generatedPdf
.save(fileName)
},
});
}
}
}, [isReady, name, setAtribute]);}
I finished my personal website today (yey), but of course it doesn't work in IE. I wouldn't bother, if it wouldn't be for employers so my question is the following.
When I try to open the Yes I Code page the IE gives me an error message saying
SVG4601: SVG Path data has incorrect format and could not be completely parsed.
After googeling a bit, I found a few ideas that might help, but I am not generating the svg dynamically. The SVG is a data url generated via webpack from a file.
This is one of the many SVG files https://pastebin.com/En4YQwzC
This is the code that loads it via require
{
name: 'SQLite',
logo: require('../src/assets/logos/database/sqlite-seeklogo.com.svg'),
parent: [
'Database'
]
},
And this is the Vue.js component that renders the svg:
<template>
<div class="ulbricht-yes-i-code">
<div class="ulbricht-yes-i-code__framework-item" v-for="framework in frameworks" :key="framework.name">
<img class="ulbricht-yes-i-code__framework-logo" :src="dataUrl(framework.logo)" :alt="framework.name"/>
</div>
</div>
</template>
<script>
import YesICode from 'the file with all svg images';
export default {
name: "YesICode",
computed: {
yesICode() {
return YesICode;
},
frameworks() {
return YesICode.frameworks.filter(item => item.parent.includes(this.selectedGroup));
}
},
methods: {
dataUrl(input) {
return `data:image/svg+xml;charset=utf8,${encodeURIComponent(input.replace(/"/g, '\''))}`;
}
},
data() {
return {
selectedGroup: ''
}
}
}
</script>
The SVG gets injected into the DOM but is not displayed at all. Here is the rendered img tag
<img class="ulbricht-yes-i-code__framework-logo" alt="SQLite" src="data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D'0%200%20512%20228'%20version%3D'1.1'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20preserveAspectRatio%3D'xMidYMid'%3E%3Cdefs%3E%3ClinearGradient%20x1%3D'57.6615627%25'%20y1%3D'2.04644676%25'%20x2%3D'57.6615584%25'%20y2%3D'94.4387516%25'%20id%3D'linearGradient-1'%3E%3Cstop%20stop-color%3D'%2397D9F6'%20offset%3D'0%25'%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D'%230F80CC'%20offset%3D'92.024499%25'%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D'%230F80CC'%20offset%3D'100%25'%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%3E%3Cpath%20d%3D'M194.519337%2C112.044206%20C187.698564%2C112.044206%20182.152486%2C114.063211%20177.900552%2C118.099455%20C173.648619%2C122.139234%20171.491713%2C127.434452%20171.491713%2C133.922666%20C171.491713%2C137.285148%20172.027403%2C140.350953%20173.082873%2C143.160235%20C174.138343%2C145.975174%20175.780773%2C148.582909%20177.98895%2C150.939241%20C180.197127%2C153.297694%20184.617017%2C156.501413%20191.20442%2C160.5746%20C199.287514%2C165.509134%20204.577238%2C169.513908%20207.116022%2C172.640884%20C209.656575%2C175.765215%20210.917127%2C179.03947%20210.917127%2C182.453039%20C210.917127%2C187.023558%20209.412597%2C190.671912%20206.320442%2C193.414365%20C203.222983%2C196.158062%20199.080663%2C197.524862%20193.944751%2C197.524862%20C188.527735%2C197.524862%20183.809061%2C195.6153%20179.756906%2C191.823204%20C175.704751%2C188.025635%20173.659227%2C183.002703%20173.61326%2C176.707182%20L171.093923%2C176.707182%20L171.093923%2C199.558011%20L173.61326%2C199.558011%20C174.38232%2C197.394203%20175.44663%2C196.287293%20176.839779%2C196.287293%20C177.509834%2C196.287293%20179.079779%2C196.749436%20181.524862%2C197.61326%20C187.474033%2C199.730026%20192.358895%2C200.751381%20196.198895%2C200.751381%20C202.816354%2C200.751381%20208.464972%2C198.433775%20213.171271%2C193.723757%20C217.870497%2C189.015874%20220.243094%2C183.337017%20220.243094%2C176.707182%20C220.243094%2C171.56632%20218.676685%2C166.992435%20215.60221%2C163.005539%20C212.527735%2C159.013848%20206.548508%2C154.370829%20197.61326%2C149.038688%20C189.92442%2C144.419175%20184.933481%2C140.65681%20182.629834%2C137.723771%20C180.322652%2C134.794961%20179.138122%2C131.555204%20179.138122%2C128.000014%20C179.138122%2C124.154703%20180.550718%2C121.066084%20183.337017%2C118.762438%20C186.123315%2C116.457024%20189.774144%2C115.314924%20194.342541%2C115.314924%20C199.483757%2C115.314924%20203.769282%2C116.84067%20207.160221%2C119.911609%20C210.547624%2C122.987852%20212.506519%2C127.250747%20213.082873%2C132.729296%20L215.60221%2C132.729296%20L215.60221%2C112.928184%20L213.259669%2C112.928184%20C212.97326%2C113.937687%20212.708066%2C114.58299%20212.464088%2C114.872935%20C212.227182%2C115.161112%20211.77105%2C115.314924%20211.093923%2C115.314924%20C210.278895%2C115.314924%20208.825635%2C114.971941%20206.762431%2C114.29835%20C202.342541%2C112.809731%20198.267403%2C112.044206%20194.519337%2C112.044206%20L194.519337%2C112.044206%20Z%20M276.861878%2C112.044206%20C268.550718%2C112.044206%20261.005083%2C114.003101%20254.187845%2C117.922659%20C247.36%2C121.835145%20241.955359%2C127.268073%20237.966851%2C134.187859%20C233.98011%2C141.107101%20232%2C148.455772%20232%2C156.287307%20C232%2C166.808751%20235.443978%2C176.182269%20242.38674%2C184.39779%20C249.333039%2C192.608361%20257.656575%2C197.724471%20267.314917%2C199.690608%20C269.523094%2C200.841193%20272.682431%2C203.811359%20276.81768%2C208.618785%20C281.478011%2C214.044103%20285.420552%2C217.957127%20288.662983%2C220.287293%20C291.901878%2C222.618689%20295.398895%2C224.327425%20299.093923%2C225.458564%20C302.792486%2C226.584935%20306.791602%2C227.138122%20311.116022%2C227.138122%20C316.352707%2C227.138122%20321.041326%2C226.227978%20325.171271%2C224.353591%20L324.243094%2C222.055249%20C321.845746%2C222.919963%20319.289282%2C223.337017%20316.596685%2C223.337017%20C312.94232%2C223.337017%20309.249061%2C222.131978%20305.546961%2C219.712707%20C301.850166%2C217.287425%20297.226961%2C212.660162%20291.712707%2C205.834254%20C289.120884%2C202.563536%20287.331713%2C200.499978%20286.320442%2C199.690608%20C296.887514%2C197.62705%20305.577017%2C192.505635%20312.353591%2C184.309392%20C319.128398%2C176.116685%20322.519337%2C166.766518%20322.519337%2C156.287307%20C322.519337%2C143.84459%20318.092376%2C133.387499%20309.303867%2C124.861886%20C300.508287%2C116.335388%20289.691934%2C112.044206%20276.861878%2C112.044206%20L276.861878%2C112.044206%20Z%20M328.265193%2C112.044206%20L328.397719%2C114.740339%20C333.931421%2C114.740339%20337.030648%2C116.370394%20337.723686%2C119.646416%20C337.981808%2C120.818571%20338.100261%2C122.982902%20338.121476%2C126.099455%20L338.077348%2C185.723757%20C338.031381%2C190.176884%20337.396685%2C193.02011%20336.176796%2C194.254144%20C334.955138%2C195.479337%20332.890166%2C196.24663%20329.900552%2C196.552486%20L329.768027%2C199.248619%20L384.928248%2C199.248619%20L386.342612%2C185.723757%20L383.823275%2C185.723757%20C383.103717%2C189.408177%20381.454214%2C192.047565%20378.8288%2C193.546961%20C376.196314%2C195.057319%20371.541286%2C195.801105%20364.81775%2C195.801105%20L359.602281%2C195.801105%20C353.552336%2C195.801105%20350.051783%2C193.61396%20349.127143%2C189.21547%20C348.936203%2C188.345282%20348.870789%2C187.412324%20348.861949%2C186.38674%20L349.082944%2C126.099455%20C349.081529%2C121.653399%20349.643386%2C118.67404%20350.806701%2C117.215477%20C351.982391%2C115.762217%20354.10217%2C114.948957%20357.171341%2C114.740339%20L357.038815%2C112.044206%20L328.265335%2C112.044206%20L328.265193%2C112.044206%20Z%20M277.745856%2C115.314924%20C287.119558%2C115.314924%20294.773039%2C119.00677%20300.685083%2C126.453046%20C306.595359%2C133.901988%20309.524862%2C144.111211%20309.524862%2C157.038688%20C309.524862%2C169.288656%20306.552928%2C179.097289%20300.596685%2C186.475138%20C294.640442%2C193.850696%20286.712928%2C197.524862%20276.861878%2C197.524862%20C267.398011%2C197.524862%20259.723315%2C193.736133%20253.834254%2C186.121547%20C247.950497%2C178.506961%20245.038674%2C168.620906%20245.038674%2C156.464103%20C245.038674%2C143.971727%20247.985856%2C133.971631%20253.922652%2C126.497245%20C259.855912%2C119.030814%20267.801105%2C115.314924%20277.745856%2C115.314924%20L277.745856%2C115.314924%20Z%20M404.596685%2C128.132611%20C403.251271%2C128.132611%20402.225856%2C128.586975%20401.458564%2C129.502777%20C400.673591%2C130.415028%20400.433149%2C131.52%20400.707182%2C132.861893%20C400.972376%2C134.163631%20401.706077%2C135.3045%20402.872928%2C136.265208%20C404.032707%2C137.22501%20405.28442%2C137.723771%20406.629834%2C137.723771%20C407.93105%2C137.723771%20408.922873%2C137.225038%20409.635359%2C136.265208%20C410.347845%2C135.3045%20410.565304%2C134.163631%20410.298343%2C132.861893%20C410.024309%2C131.52%20409.315359%2C130.415028%20408.220994%2C129.502777%20C407.114254%2C128.586975%20405.897901%2C128.132611%20404.596685%2C128.132611%20L404.596685%2C128.132611%20Z%20M440.972376%2C137.281782%20C438.686409%2C146.075934%20433.730829%2C150.834917%20426.121547%2C151.602224%20L426.209945%2C154.121561%20L435.093923%2C154.121561%20L434.917127%2C183.911602%20C434.931271%2C189.004729%20435.086851%2C192.395669%20435.447514%2C194.121547%20C436.322652%2C198.253444%20439.020552%2C200.353591%20443.535912%2C200.353591%20C450.068508%2C200.353591%20456.921105%2C196.374276%20464.088398%2C188.41989%20L461.922652%2C186.563536%20C456.747845%2C191.801819%20452.172376%2C194.430939%20448.176796%2C194.430939%20C445.721105%2C194.430939%20444.198895%2C193.018696%20443.624309%2C190.232044%20C443.466961%2C189.555271%20443.403315%2C188.764471%20443.403315%2C187.845304%20L443.491713%2C154.121561%20L457.060773%2C154.121561%20L456.928248%2C150.099462%20L443.535982%2C150.099462%20L443.535982%2C137.281782%20L440.972446%2C137.281782%20L440.972376%2C137.281782%20Z%20M493.436464%2C148.508301%20C485.84663%2C148.508301%20479.672928%2C152.192721%20474.872928%2C159.513826%20C470.09768%2C166.847307%20468.619669%2C174.97228%20470.497238%2C183.911602%20C471.60221%2C189.14775%20473.803315%2C193.20593%20477.171271%2C196.066298%20C480.533923%2C198.925436%20484.8%2C200.353591%20489.900552%2C200.353591%20C494.649282%2C200.353591%20501.261436%2C199.151211%20504.044199%2C196.729282%20C506.834033%2C194.308766%20509.404641%2C190.38744%20511.779006%2C185.016575%20L509.878453%2C183.027624%20C506.091492%2C189.995138%20498.448619%2C193.502762%20492.685083%2C193.502762%20C484.761105%2C193.502762%20479.908066%2C189.155359%20478.099448%2C180.508287%20C477.864309%2C179.404545%20477.689282%2C178.218785%20477.569061%2C176.972376%20C486.995801%2C175.479867%20494.14011%2C172.836943%20498.961326%2C169.016575%20C503.779006%2C165.194099%20508.616133%2C161.142283%20507.712707%2C156.861893%20C507.175249%2C154.318328%20505.854586%2C152.318416%20503.823204%2C150.806644%20C501.765304%2C149.295579%20496.422541%2C148.508301%20493.436464%2C148.508301%20L493.436464%2C148.508301%20Z%20M410.475138%2C148.817694%20L394.121547%2C152.5746%20L394.121547%2C155.491727%20L399.779006%2C154.784545%20C402.519337%2C154.784545%20404.131713%2C156.02548%20404.640884%2C158.497252%20C404.812376%2C159.324485%20404.920221%2C160.486202%20404.950276%2C161.944766%20L404.773481%2C188.685083%20C404.727514%2C192.385414%20404.317348%2C194.536479%20403.491713%2C195.18232%20C402.659006%2C195.829392%20400.463204%2C196.154696%20396.906077%2C196.154696%20L396.81768%2C198.674033%20L422.762431%2C198.674033%20L422.718303%2C196.154696%20C419.113441%2C196.154696%20416.776203%2C195.870239%20415.734877%2C195.314917%20C414.711231%2C194.763145%20414.005817%2C193.758946%20413.701728%2C192.220994%20C413.46659%2C191.112656%20413.364049%2C189.202924%20413.348137%2C186.563536%20L413.436535%2C148.817694%20L410.475209%2C148.817694%20L410.475138%2C148.817694%20Z%20M489.281768%2C153.76797%20C490.860552%2C153.76797%20492.386298%2C154.377731%20493.922652%2C155.580125%20C495.43779%2C156.778275%20496.360663%2C158.110593%20496.662983%2C159.558025%20C498.142762%2C166.667159%20491.84%2C171.582048%20477.657459%2C174.320442%20C477.252597%2C169.136626%20478.150718%2C164.430865%20480.441989%2C160.17681%20C482.71558%2C155.926814%20485.676906%2C153.76797%20489.281768%2C153.76797%20L489.281768%2C153.76797%20Z'%20fill%3D'%23003B57'%3E%3C%2Fpath%3E%3Cpath%20d%3D'M157.887646%2C9.95179492%20L17.1498785%2C9.95179492%20C7.71748066%2C9.95179492%201.42108547e-14%2C17.6706899%201.42108547e-14%2C27.1027341%20L1.42108547e-14%2C182.31016%20C1.42108547e-14%2C191.741666%207.71748066%2C199.459331%2017.1498785%2C199.459331%20L109.843448%2C199.459331%20C108.79135%2C153.338017%20124.54117%2C63.8308448%20157.887646%2C9.95179492%20L157.887646%2C9.95179492%20Z'%20fill%3D'%230F80CC'%3E%3C%2Fpath%3E%3Cpath%20d%3D'M152.774718%2C14.9551098%20L17.1498785%2C14.9551098%20C10.4523315%2C14.9551098%205.00207735%2C20.4039496%205.00207735%2C27.1027341%20L5.00207735%2C170.986233%20C35.7181878%2C159.197504%2081.8193467%2C149.025535%20113.695413%2C149.487509%20C120.100971%2C115.994079%20138.926844%2C50.3540911%20152.774718%2C14.9551098%20L152.774718%2C14.9551098%20Z'%20fill%3D'url(%23linearGradient-1)'%3E%3C%2Fpath%3E%3Cpath%20d%3D'M190.71505%2C4.8724579%20C181.076155%2C-3.7233432%20169.405878%2C-0.270525525%20157.887646%2C9.95179492%20C156.178033%2C11.470469%20154.471956%2C13.1553308%20152.774718%2C14.9551098%20C133.070851%2C35.8576513%20114.781348%2C74.5758833%20109.099138%2C104.144944%20C111.312619%2C108.633784%20113.04168%2C114.361961%20114.180243%2C118.737651%20C114.471956%2C119.860303%20114.735381%2C120.914005%20114.945768%2C121.810358%20C115.446099%2C123.931729%20115.714829%2C125.307375%20115.714829%2C125.307375%20C115.714829%2C125.307375%20115.538033%2C124.638911%20114.813171%2C122.536988%20C114.675271%2C122.133894%20114.521459%2C121.693673%20114.339359%2C121.175662%20C114.261569%2C120.96174%20114.153724%2C120.70185%20114.035271%2C120.424281%20C112.749967%2C117.436436%20109.194608%2C111.130137%20107.629967%2C108.384502%20C106.291624%2C112.332347%20105.108862%2C116.025607%20104.118807%2C119.367044%20C108.635934%2C127.631883%20111.388641%2C141.795684%20111.388641%2C141.795684%20C111.388641%2C141.795684%20111.149967%2C140.877762%20110.014939%2C137.674056%20C109.007204%2C134.840546%20103.987978%2C126.046381%20102.799028%2C123.990425%20C100.765171%2C131.498587%2099.9570387%2C136.567669%20100.68579%2C137.801872%20C102.100685%2C140.193393%20103.448221%2C144.319802%20104.631514%2C148.88325%20C107.304663%2C159.163729%20109.162785%2C171.678918%20109.162785%2C171.678918%20C109.162785%2C171.678918%20109.222895%2C172.508259%20109.323669%2C173.784553%20C108.952398%2C182.417835%20109.17516%2C191.368811%20109.843448%2C199.459331%20C110.729193%2C210.169253%20112.396376%2C219.369526%20114.521459%2C224.293452%20L115.96411%2C223.506896%20C112.843669%2C213.805939%20111.576044%2C201.092568%20112.131182%2C186.430911%20C112.970961%2C164.020133%20118.128088%2C136.993747%20127.65737%2C108.824723%20C143.756376%2C66.3018502%20166.092729%2C32.1838391%20186.535602%2C15.8903585%20C167.903116%2C32.7177618%20142.684994%2C87.186712%20135.135823%2C107.35732%20C126.683227%2C129.944723%20120.693392%2C151.140929%20117.083227%2C171.4489%20C123.311735%2C152.410321%20143.450519%2C144.226624%20143.450519%2C144.226624%20C143.450519%2C144.226624%20153.328088%2C132.044885%20164.871072%2C114.641298%20C157.956597%2C116.218314%20146.602785%2C118.917983%20142.799912%2C120.516215%20C137.190188%2C122.869364%20135.678586%2C123.672016%20135.678586%2C123.672016%20C135.678586%2C123.672016%20153.849635%2C112.606381%20169.43947%2C107.595994%20C190.87947%2C73.828038%20214.237702%2C25.8563253%20190.71505%2C4.8724579'%20fill%3D'%23003B57'%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E">
I currently have no Windows environment for debugging, so it is a bit hard to tackle it down. My current environment is an Azure VM. You can check out the site here: https://imanuel.ulbricht.codes/yesicode
Any help is appreciated, maybe there is even a better way to generate the DataURLs. Loading the files via HTTP doesn't solve the problem.
Update
After removing all images except the Java logo I still get the error. The SVG of the Java logo is as follows:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 256 346" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M82.5539491,267.472524 C82.5539491,267.472524 69.35552,275.147869 91.9468218,277.745105 C119.315549,280.867375 133.303389,280.419607 163.463913,274.711273 C163.463913,274.711273 171.393396,279.683258 182.467491,283.989644 C114.855564,312.966982 29.4483782,282.311215 82.5539491,267.472524"
fill="#5382A1"/>
<path d="M74.2921309,229.658996 C74.2921309,229.658996 59.4888145,240.616727 82.0968727,242.955171 C111.333004,245.971316 134.421411,246.218007 174.373236,238.524975 C174.373236,238.524975 179.899113,244.127185 188.588218,247.190807 C106.841367,271.094691 15.79008,249.075898 74.2921309,229.658996"
fill="#5382A1"/>
<path d="M143.941818,165.514705 C160.601367,184.695156 139.564684,201.955142 139.564684,201.955142 C139.564684,201.955142 181.866124,180.117876 162.438982,152.772422 C144.294633,127.271098 130.380335,114.600495 205.706705,70.9138618 C205.706705,70.9138618 87.4691491,100.44416 143.941818,165.514705"
fill="#E76F00"/>
<path d="M233.364015,295.441687 C233.364015,295.441687 243.131113,303.489396 222.60736,309.715316 C183.580858,321.537862 60.1748945,325.107898 25.8932364,310.186356 C13.5698618,304.825251 36.67968,297.385425 43.9491491,295.824291 C51.5304727,294.180305 55.8629236,294.486575 55.8629236,294.486575 C42.15808,284.832116 -32.7195927,313.443607 17.8287709,321.637469 C155.681513,343.993251 269.121164,311.570618 233.364015,295.441687"
fill="#5382A1"/>
<path d="M88.9008873,190.479825 C88.9008873,190.479825 26.1287564,205.389265 66.6717091,210.803433 C83.7901964,213.095331 117.915462,212.576815 149.702284,209.913484 C175.680233,207.722124 201.765236,203.062924 201.765236,203.062924 C201.765236,203.062924 192.605091,206.985775 185.977949,211.510924 C122.233949,228.275665 -0.907636364,220.476509 34.5432436,203.328233 C64.5241018,188.83584 88.9008873,190.479825 88.9008873,190.479825"
fill="#5382A1"/>
<path d="M201.506444,r253.422313 C266.305164,219.7504 236.344785,187.392 215.432844,191.751447 C210.307258,192.818269 208.021876,193.742662 208.021876,193.742662 C208.021876,193.742662 209.924655,190.761891 213.558924,189.471651 C254.929455,174.927127 286.746065,232.368873 200.204102,255.11936 C200.204102,255.120291 201.206691,254.223825 201.506444,253.422313"
fill="#5382A1"/>
<path d="M162.438982,0.371432727 C162.438982,0.371432727 198.325527,36.27008 128.402153,91.4720582 C72.3307055,135.753542 115.616116,161.001658 128.37888,189.848669 C95.6490473,160.318371 71.6297309,134.322735 87.7437673,110.128407 C111.395375,74.6132945 176.918342,57.3942691 162.438982,0.371432727"
fill="#E76F00"/>
<path d="M95.2683055,344.665367 C157.466996,348.646865 252.980131,342.45632 255.24224,313.025629 C255.24224,313.025629 250.893964,324.182575 203.838371,333.042967 C150.750487,343.033484 85.2740655,341.867055 46.4393309,335.464262 C46.4402618,335.463331 54.3892945,342.043927 95.2683055,344.665367"
fill="#5382A1"/>
</g>
</svg>
My current idea is, to detect the IE via UA and then displaying PNGs instead of SVG files. But I am unsure if that is really the only solution.
I need to convert a svg into a png. I tried using this code
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: #000;
fill-opacity: .8;
}
</style>
<body>
<div id="svg">
<?php include 'small.svg'; ?>
</div>
<button id="save">Save as Image</button>
<h2>SVG dataurl:</h2>
<div id="svgdataurl"></div>
<h2>SVG converted to PNG dataurl via HTML5 CANVAS:</h2>
<div id="pngdataurl"></div>
<canvas width="960" height="500" style="display:none"></canvas>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var svg = document.querySelector( "svg" );
var svgData = new XMLSerializer().serializeToString( svg );
var canvas = document.createElement( "canvas" );
var ctx = canvas.getContext( "2d" );
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );
img.onload = function() {
ctx.drawImage( img, 0, 0 );
// Now is done
console.log( canvas.toDataURL( "image/png" ) );
};
document.getElementById("pngdataurl").appendChild(img);
</script>
but it doenst work. im pretty sure it's because im using an image pattern, rect and a clip path to product my SVG. I say that because i tried this code with just the path object and it worked fine. I also tried using image magic with this code
<?php
error_reporting(E_ALL);
$svg ="small.svg";
$mask = new Imagick('mask.png');
$im = new Imagick();
//$im->setBackgroundColor(new ImagickPixel('transparent'));
$im->readImageBlob($svg);
$im->setImageFormat("png32");
$im->compositeImage( $mask, imagick::COMPOSITE_DEFAULT, 0, 0 );
header('Content-type: image/png');
echo $im;
?>
Fatal error: Uncaught exception 'ImagickException' with message 'no decode delegate for this image format `' # error/blob.c/BlobToImage/346' in /home/[path to file]:10 Stack trace: #0 /home/path to file: Imagick->readimageblob('small.svg') #1 {main} thrown in /home/[path to file] on line 10
i would rather do this with js if possible. please help...my boss really hates me right now. Here is my svg
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 3384.2 2608.6" enable-background="new 0 0 3384.2 2608.6" xml:space="preserve">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/7/71/Weaved_truncated_square_tiling.png" x="0" y="0" width="100%" height="100%" />
</pattern>
</defs>
<rect width="3384.2" height="2608.6" clip-path="url(#shirt)" fill="url(#img1)" />
<clipPath id="shirt">
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#img1)" d="[coordinates that are too long for this post ]"/>
</clipPath>
</svg>
I had this issue recently too, at least with the pattern fills - it seems to be an issue with remote images, so if you base64 encode them into a data URL, it works fine:
var img = new Image();
img.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
canvas.getContext('2d').drawImage(img, 0, 0);
var patternImage = document.createElementNS('http://www.w3.org/2000/svg', 'image');
patternImage.setAttributeNS('http://www.w3.org/1999/xlink', 'href', canvas.toDataURL());
};
img.src = patternImageUrl;
You can then add/update this image in a pattern def (or do this once and hardcode the result of canvas.toDataURL() into the pattern image href).
I have a php-file that sends an SVG header and draws itself partly with JavaScript. Everything works fine when I show the SVG directly in the browser. However, when I embed it in an <img>, then the JavaScript seems not to be executed. Maybe I am doing something wrong?
Here is the php-file (testsvg.php):
<?php
header('Content-type: image/svg+xml');
?>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="800"
height="600"
id="example_text">
<g id="layer1">
<text
x="100"
y="100"
id="text_holder">
<?php echo filter_input(INPUT_GET, 'text'); ?>
</text>
</g>
<script type="text/javascript">
function create_from_rect (client_rect, offset_px) {
if (! offset_px) {
offset_px=0;
}
var box = document.createElementNS(
document.rootElement.namespaceURI,
'rect'
);
if (client_rect) {
box.setAttribute('x', client_rect.left - offset_px);
box.setAttribute('y', client_rect.top - offset_px);
box.setAttribute('width', client_rect.width + offset_px * 2);
box.setAttribute('height', client_rect.height + offset_px * 2);
}
return box;
}
function add_bounding_box (text_id, padding) {
var text_elem = document.getElementById(text_id);
if (text_elem) {
var f = text_elem.getClientRects();
if (f) {
var bbox = create_from_rect(f[0], padding);
bbox.setAttribute(
'style',
'fill: none;'+
'stroke: black;'+
'stroke-width: 0.5px;'
);
text_elem.parentNode.appendChild(bbox);
}
}
}
add_bounding_box('text_holder', 10);
</script>
</svg>
(The SVG/JavaScript is mostly taken from How can I draw a box around text with SVG?.)
When I open this file directly in the browser, e.g. with http://localhost/testsvg.php?text=Test it draws a proper box around the text Test.
However, when I embed it with an <img>, e.g. with <img src="testsvg.php?text=Test" alt="">, it does not show the box.
To protect user's privacy, script is not run in images. There are other restrictions.
When thinking of an image it helps to have the mental model "could I do this if I used a raster image"? If you bear that in mind you won't go far wrong as that's basically the model the browsers implement.
Your alternatives are to use <object> or <iframe> tags instead of <img> as they do allow scripting.
I am using Facebooks Javascript API , in my jquery mobile website , in order to download albums and photos from a facebook public page and present them to my website.
The API is really straightforward on how things are done and i made everything working fairly easily.
What i have done so far and IS working
When a user hits a button i load a page , where the javascript FB API is called and dynamically generate a list of all the albums of a specific facebook page , with all the photos etc. This works great. When the API is called it fetches only 25 albums and when i have more albums to fetch , i have a "More Albums" button which the user hits to make another call to the API and fetch more albums. That works great too...
The Problem
My problem appeared , when i decided that i want to have 2 different facebook pages that i would like to import albums/photos from. So i made a horizontal button with 2 options (facebook page 1 , facebook page 2) , made the navBar persistant and when i hit one of the buttons i need an API call to be made and get the albums of each page. THIS sadly doesnt work... When i make a call to one of the 2 pages , everything works. Even the "more albums" button works. But when i navigate to the other facebook page , the call to the api doesnt work... I cant understand why... The "More Albums" button works , that means i can make multiple calls to the api. But why when i navigate with ajax , to the other page on my jquery mobile site , the call cant be completed? I put an alert inside the javascript file and i see it , that means that the code is called. But when i put the alert inside the actual call to the api , i cant see anything alerted.... I guess that means that for some reason the call is blocked...
Any ideas what might be happening here?
My javascript for one of the 2 albums looks like this :
$('#photosNJ').on("pageshow", function() {
var albumPhotos = new Array();
var albumThumbnails = new Array();
var x=0;
var next;
var times=0;
var dataLength=0;
// start the entire process
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '564984346887426', // App ID from the app dashboard
channelUrl : 'channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
$.mobile.loading("show");
FB.api('169070991963/albums', checkForErrorFirst(getAlbums));
//$.mobile.loading("hide");
}
// checkForErrorFirst wraps your function around the error checking code first
// if there is no response, then your code will not be called
// this allows you to just write the juicy working code
// and not worry about error checking
function checkForErrorFirst(myFunc) {
return function(response) {
if (!response || response.error) {
alert("Error !");
} else {
myFunc(response);
}
};
}
function getAlbums(response) {
//if statement checks , if there are any more albums to load. If not we disable the "More Albums" button.
if(response.paging.next == undefined) $("#loadMoreAlbums").parent().hide();
//variable next holds the URL for the next 25(or less) albums
next = response.paging.cursors.after;
dataLength = response.data.length + dataLength;
for (var i=0; i < response.data.length; ++i) {
processAlbum(response.data[i], i+x);
}
x = x+i;
console.log(x);
}
function processAlbum(album, i) {
FB.api(album.id + "/photos?limit=300", checkForErrorFirst(populateAlbum(album, i)));
}
function populateAlbum(album, i) {
return function(response) {
for (var k=0; k < response.data.length; ++k){
albumThumbnails[i] = albumThumbnails[i]||[];
albumThumbnails[i][k] = response.data[k].picture;
albumPhotos[i] = albumPhotos[i]||[];
albumPhotos[i][k] = response.data[k].source;
}
// now that we've populated the album thumbnails and photos, we can render the album
FB.api(album.cover_photo, checkForErrorFirst(renderAlbum(album, i)));
};
}
function renderAlbum(album, i) {
times++;
if(times == dataLength) $.mobile.loading("hide");
return function(response) {
var albumName = album.name;
var albumCover = album.cover_photo;
var albumId = album.id;
var numberOfPhotos = album.count;
// render photos
$(".albums").append('<li>'+
'<a href="#Gallery' + i + '"' + 'data-transition="slidedown">'+
'<img src= "' + response.picture + '" />'+
'<h2>' + albumName + '</h2>'+
'<p>' + "Number of Photos: " + numberOfPhotos +'</p>'+
'</a>'+
'</li>').listview('refresh');
$("#photosNJ").after('<div data-role="page" data-add-back-btn="true" id=Gallery'+ i +
' class="gallery-page"' + ' data-url="Gallery' + i + '"> ' +
' <div data-role="header"><h1>Gallery</h1></div> ' + ' <div data-role="content"> ' +
' <ul class="gallery"></ul> ' + ' </div> ' +
' </div> ');
for(var n=0; n < albumPhotos[i].length; n++) {
$('#Gallery' + i + ' .gallery').append('<li><a href="' + albumPhotos[i][n]
+ '" rel="external"><img src="' + albumThumbnails[i][n] + '"' + '/> </a> </li>');
}
//adding a "More Photos" button inside every album
// $('#Gallery' + i + ' .gallery').after('<button type="button" class="loadMorePhotos">More Photos...</button>');
};
}
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//"More Albums" button
$("#loadMoreAlbums").click(function(){
// start the entire process
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '564984346887426', // App ID from the app dashboard
channelUrl : 'channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
}
//when the "More Albums" button is pressed , we make a call at the API for the next 25(or less) albums , using the "next" URL
$.mobile.loading("show");
FB.api('169070991963/albums?after=' + next +"'", checkForErrorFirst(getAlbums));
});
});
You can see the call to the api , the dynamic creation of the html page to show the albums in a listview , the population of the albums with photos , the more albums button etc... The javascript for my other facebook page is IDENTICAL and only the page ID changes. At this point , i want to point out that if i load the other page first and then this one AGAIN the second call is the one that is not working. That means that i dont have a specific problem with one of the albums , rather than a problem that the second call NEVER runs.
Here is the html page just in case you need to see what i am exactly trying to do:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
<link rel="stylesheet" href="themes/EspacioJoven.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="themes/custom.css" />
<!--Used by PhotoSwipe Plugin -->
<script type="text/javascript" src="photoSwipe/klass.min.js"></script>
<script type="text/javascript" src="photoSwipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<script type='text/javascript' src='photoSwipe/photoSwipeCall.js'></script>
<link href="photoSwipe/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="photoSwipe/photoswipe.css" type="text/css" rel="stylesheet" />
<!--Used by PhotoSwipe Plugin -->
<script type='text/javascript' src='javascript/createFb2.js'></script>
<script type='text/javascript' src='javascript/createFb.js'></script>
</head>
<body>
<div data-role="page" id="home" data-theme = "a" >
<div data-role="content">
<h2 id="banner">Joven Mobile</h2>
<div class="main_menu">
<ul data-inset="true" data-role="listview">
<li><img src="themes/icons/news.png" alt="Information" class="ui-li-icon">Es Joven</li>
<li><img src="themes/icons/research.png" alt="Information" class="ui-li-icon">La Noche es Joven</li>
<li><img src="themes/icons/staff.png" alt="Information" class="ui-li-icon">Multimedia</li>
<li><img src="themes/icons/students.png" alt="Information" class="ui-li-icon">Sar Joven</li>
</ul>
</div> <!-- /main_menu -->
</div> <!-- /content -->
</div> <!-- /page -->
<div data-role="page" id="photosNJ" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">
<!--<script type='text/javascript' src='javascript/createFbAlbums.js'></script> -->
<div data-role="header" data-id="fixedNav" data-position="fixed">
<h1>Application Title</h1>
Back
<div data-role="navbar">
<ul>
<li>Photos Noche Joven</li>
<li>Photos Esp Joen</li>
<li>Videos</li>
</ul>
</div> <!-- /navbar -->
</div> <!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" class="albums">
<!-- Here the albums are created through javascript (createAlbums.js) -->
</ul>
<button type="button" id="loadMoreAlbums">More Albums...</button>
</div> <!-- /content -->
<!-- <div id="fb-root"></div> -->
</div>
<div data-role="page" id="photosEJ" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">
<!--<script type='text/javascript' src='javascript/createFbAlbums2.js'></script>-->
<div data-role="header" data-id="fixedNav" data-position="fixed">
<h1>Application Title</h1>
Back
<div data-role="navbar">
<ul>
<li>Photos Noche Joven</li>
<li>Photos Espacio Joven</li>
<li>Videos</li>
</ul>
</div> <!-- /navbar -->
</div> <!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" class="albums2">
<!-- Here the albums are created through javascript (createAlbums.js) -->
</ul>
<button type="button" id="loadMoreAlbums2">More Albums...</button>
</div> <!-- /content -->
<!-- <div id="fb-root"></div> -->
</div>
</body>
</html>
Thank you VERY VERY much if you decided to read till this far. ANY, absolutely ANY comment or idea on this one would be super valuable to me , so please if you have any thought share with me :)
FIDDLER: http://jsfiddle.net/lessisv/GW4PK/
Go to Multimedia and there i have 2 tabs "Photos Noche Joven" , "Photos Espacio Joven". You can see that the first one is loading normally. Also if you go down you can see the "More Albums" button , that also works normally and make calls to the API. The problem is that when i go to "Photos Espacio Joven" , the call is not working for the reasons i described.
First, you don't need window.fbAsyncInit in your loadMoreAlbums handlers. You define the same function earlier - that is enough.
Second, you don't use FB.init many times - only once. Because it is defined inside window.fbAsyncInit, and that function is called by Facebook SDK when SDK is loaded. And there is a check whether the script is already loaded:
if (d.getElementById(id)) {return;}
That means you load FB script once and init FB once.
The main thing is that you cannot init FB object (FB.init) in one scope (one of the "pageshow event" handlers) and then use FB.api in another scope (the other handler). That is why you get empty result.
There are several solutions you can try.
1.You can init FB every time the page changes.
Just check for FB object is present and call window.fbAsyncInit(). You could try quickly this solution by changing
if (d.getElementById(id)) {return;}
to
if (d.getElementById(id)) {window.fbAsyncInit(); return;}
This is the ugly way.
2.You really should refactor your code.
Init FB on top level - not in the two handlers; create one handler - and call it when the page is changed. You can pass necessary parameters or use DOM elements data.
PS. A new handler for loadMoreAlbums is added every time the page changes. You switch to another album, go back and get two calls and double data, switch again and get triple data.
$(document).on("pageshow", '#photosNJ', function () {
...
$("#loadMoreAlbums").click(function () {
...
});
...
});
Well, there is a lot to say...
You do have to factor things to avoid creating your functions for each "page"
You don't have to call FB.init more than once, as the fbAsyncInit will be called only once, and the FB.api query to retrieve the albums won't be fired the next time you call FB.init (this is why you can't load the data of the second page)
Yes the more button works even if you have a FB.init, because your FB.api request is not inside the fbAsyncInit function
As your pages are public, you don't need to know if the user is connected or if he has accepted your app, so you can fire the FB.api just after the FB.init, but in other cases you would have to implement a FB.login function or at least a listener to the status change event to know if your user is connected, and then fire the requests
...
If you want to look at one way to achieve all this, look at here: http://jsfiddle.net/ZES3X/