First of all I am disappointed that the plugin itself is only in English. If the user clicks the Apply with LinkedIn button and logs into a French profile, for example, it displays correctly. Only to return to a page with the plugin displaying "Already Applied" in English.
To get around this I wrote some javascript to replace the "Apply with LinkedIn" and "Share" text with French equivalents after the buttons load. The issue I now have is with the "Already Applied" version of the button. It appears that it loads asynchronously to the actual plugin meaning that it overrides my French text in some cases, but other cases it does not.
I know that I can harness the onsuccess event when an application is submitted. However when that LinkedIn user revisits the page the "Already Applied" text does not always appear in the correct language.
Question 1: Has anyone had luck with any techniques to achieve the desired results?
Question 2: When oh when will LinkedIn finally properly support this?
Any help or direction is much appreciated.
Thanks!
UPDATE:
I can confirm that Igor F.'s solution to use the setInterval function and check every 100ms for a change was the best option and worked flawlessly in all tested browsers.
Thanks for all the help and suggestions!
The plugin seems to receive its information asynchronously from the server and act upon it, i.e. change the content of the page. Have you tried listening to DOM mutation events?
Here is an example how they work when the user causes a change in the web page:
<html>
<!-- This is just mock-up to allow user to modify the DOM -->
<body>
Text to add: <input id="in1" type="text"/>
<button onclick="addNode();">Add node</button>
<p id="toAdd"></p>
</body>
<script type="text/javascript">
function addNode() { // adds a text node to the <p> element
document
.getElementById("toAdd")
.appendChild(document
.createTextNode(document
.getElementById("in1")
.value
)
);
}
///////////////////////////////////////
// Here comes the interesting part: !!!
document
.getElementById("toAdd") // listen to modifications of the <p> element
.addEventListener(
"DOMSubtreeModified", // in this case all modifications of its subtree
function() {
alert('Modified!'); // change this to whatever fits your purpose
}
);
</script>
</html>
More about mutation events here. If you want to support IE < 9, you'll need a different approach. Maybe periodically check, e.g. every 100 ms, whether the web page contains the English button and change it into French. See setInterval(). This should be future-proof (mutation events are deprecated), but probably even more inefficient (slow).
In any case, it's a hack. Only LinkedIn can provide a clean solution, e.g. allowing for a language code parameter for the plugin.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With