I am trying to get the LiveAddress website plugin to work in a Wordpress website. The form is loaded dynamically via javascript.
It seems that the form is not visible to the plugin at the time the plugin loads.
The plugin shows the following message in the javascript console:
NOTICE: No matches found for selector #field_96764599. Skipping...
The form I am trying to use is generated by Podio (podio.com), but I have tried the same without success using a form hosted by jotform.com. If I copy the HTML of the form and paste it on the page, it works. The problem happens when the form is loaded via javascript.
Can someone see what I am doing wrong? Thanks.
<!-- BEGIN Podio web form -->
<script src="https://podio.com/webforms/12651261/927644.js"></script>
<script type="text/javascript">
_podioWebForm.render("927644")
</script>
<noscript>
Please fill out the form
</noscript>
<div class="podio-webform-container">
A webform by Podio
</div>
<!-- END Podio web form -->
<script src="//d79i1fxsrar4t.cloudfront.net/jquery.liveaddress/2.8/jquery.liveaddress.min.js"></script>
<script type="text/javascript">
var ss = jQuery.LiveAddress({
key: 'HERE IS WHERE I PUT MY KEY',
waitForStreet: true,
debug: true,
addresses: [{
street: '#field_96764599'
}]
});
</script>
I know this is a bit late but have you tried using .ready() with jQuery?
<script type="text/javascript">
$( document ).ready(function() {
var ss = jQuery.LiveAddress({
key: 'HERE IS WHERE I PUT MY KEY',
waitForStreet: true,
debug: true,
addresses: [{
street: '#field_96764599'
}]
})
});
Problem
Let's assume I go to a website called RENT.com. Let's also assume for this chrome extension there is a script A (JS) that is injected to RENT.com. Script A is a large script file that does a lot of interacting with RENT.com's HTML elements such as form fields. Before the script runs however, it needs some DOM ID's of a couple elements such as the email field because it modifies them.
Objective
I'd like to create a couple input fields (let's call them InputEmail and InputName) in popup.html to enter in the ID's of the elements on RENT.com. Obviously I'd be looking up the ID's manually by viewing the source, this is intentional.
A button in popup.html let's call it "GO BUTTON" will then read the value of InputEmail and InputName and send it to Script A. Script A now has everything it needs to function properly and is now injected into the page.
The appropriate interactions from Script A and RENT.com are now completed.
I've tried a few things, read a ton of information from Docs and Stack but I don't understand I think fundamentally how this can work. I want to pass data to Script A via popup.js before I execute content_script which ultimately is just injecting Script A. Seems like a chicken/egg problem and I'm not hungry for breakfast or lunch ;).
Thanks guys!
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
</head>
<body>
<ul>
<li><label>Email ID</label><input type="text" id="emailID"></input></li>
<li><label>Company ID</label><input type="text" id="nameID"></input></li>
</ul>
<input type="button" id="Modify" style="" value="GO BUTTON"></input>
<script src="popup.js"></script>
</body>
</html>
Popup.js
function click(e) {
//Ideally pass these values to Script A somehow
var email = document.getElementById("emailID").value;
var company = document.getElementById("nameID").value;
//then execute this or pass the ID's to content_script, inject into Script A, then inject into page
chrome.tabs.executeScript(null, {file:"contentscript.js"});
window.close();
}
document.addEventListener('DOMContentLoaded', function () {
var d = document.getElementById("Modify");
d.addEventListener('click',click);
});
ContentScript to inject Script A
var s2 = document.createElement('script');
s2.src =chrome.extension.getURL("ScriptA.js");
s2.async = false;
s2.onload = function() {
s2.parentNode.removeChild(s2);
};
(document.head||document.documentElement).appendChild(s2);
There are several ways to accomplish this. One would be:
function click(e) {
var elementIDs = {
email: document.getElementById("emailID").value,
company: document.getElementById("nameID").value
};
chrome.tabs.executeScript({
code: 'window.elementIDs='+JSON.stringify(elementIDs)
}, function() {
chrome.tabs.executeScript({file: "ScriptA.js"});
});
window.close();
}
This way, ScriptA will be able to access the values in window.elementIDs. This will work because content scripts from the same extension on the same page will share the execution environment, and the chaining of the calls to chrome.tabs.executeScript ensures that the script defining the global variable has run before ScriptA is run.
I am using tinyMCE as a plugin in my ASP.NET MVC4 web application. I am also using SignalR to establish an open connection between the server and the clients. What I am trying to do is a real-time editor similar to Google Docs.
Until now I managed to find a way to write in an editor in one browser and have it displayed in another open document in another browser. I previously had a problem with the cursor position since when I was using the setContent() method in tinyMCE, the cursor was being put to the front and therefore the output was reversed.
This was solved by these two statements:
ed.selection.select(ed.getBody(), true);
ed.selection.collapse(false);
However now the problem I have is that with Chrome the output is as I wish for it to be i.e. writing with the cursor at the back however when I write from a Firefox browser, the space button is ignored, when I press space, the cursor goes back.
Is there a particular reason why this happened? Also, there seems to be a speed issue with the connection i.e when I type fast the latest content (1 or 2 letters) are not submitted.
This is all the code I have regarding this problem:
#{
ViewBag.Title = "- Editor";
ViewBag.ContentStyle = "/Content/CSS/editor.css";
}
<script src="/Scripts/jquery-1.6.4.min.js" ></script>
<script src="/Scripts/jquery.signalR-1.0.0.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript" src="~/Content/tinyMCE/tiny_mce.js" ></script>
<script type="text/javascript" src="~/Scripts/EditorHandler.js"></script>
<script type="text/javascript">
$(function () {
tinyMCE.init({
mode: "textareas",
theme: "advanced",
plugins: "emotions,spellchecker,advhr,insertdatetime,preview",
// Theme options - button# indicated the row# only
theme_advanced_buttons1: "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
theme_advanced_buttons2: "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false,
setup: function (ed) {
ed.onKeyUp.add(function (ed, e) {
var chat = $.connection.editorHub;
chat.client.broadcastMessage = function (message) {
tinyMCE.activeEditor.setContent(message);
ed.selection.select(ed.getBody(), true);
ed.selection.collapse(false);
tinyMCE.activeEditor.focus();
};
$.connection.hub.start().done(function () {
var text = tinyMCE.activeEditor.getContent();
chat.server.send(text);
});
});
}
});
});
</script>
<form method="post" action="somepage">
<textarea id="editor" name="content" cols="100" rows="30"></textarea>
</form>
Looks like you might want to check out the possibility to get a tinymce bookmark.
There are html bookmarks which are implemented using hidden spans with a certain class.
And there are non-html bookmarks - i would use those.
// gets you a non-html bookmark which you can transfer to another server if need be
var bookmark = editor.selection.getBookmark(2, true);
editor.setContent(content);
editor.selection.moveToBookmark(bookmark);
In my page I've added Facebook Comments as well as Share button. Everything was done according to their instruction, so :
I've included loading script :
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '161771113844567', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
and then on pages that use comments/share:
<div class="facebook-comments">
<fb:comments xid="{{star.uniq.id}}" url="" title="Test"></fb:comments>
</div>
and:
<a name="fb_share" type="box_count" share_url="url"
href="http://www.facebook.com/sharer.php">
Share
</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
but the comments are loaded only from time to time (otherwise a FB.provide is not a function error is shown) and share button shows 0 all the time. Is there a way to fix this ? I've tried downloading all.js but then comments where not loaded at all.
You are using both the old javascript SDK and the new one. The facebook sharer.php is no longer recommended an is being replaced by the like button. The solution is to remove the Facebook Share and replace it with a like button. This way you will only be using the new Javascript SDK http://connect.facebook.net/en_US/all.js. You cannot use both of these at the same time. static.ak.fbcdn.net/connect.php/js/ is the old SDK and is being deprecated.
Basically, Google Adwords give you a code so you can track how well your campaigns are working. You put in on your order thank you page to track and order, so you can see which keywords bring in the most orders. It gives me a code like this:
<!-- Google Code for Purchase/Sale Conversion Page -->
<script language="JavaScript" type="text/javascript">
<!--
var google_conversion_id = xxxxxxxxxx;
var google_conversion_language = "en";
var google_conversion_format = "1";
var google_conversion_color = "666666";
var google_conversion_label = "purchase";
//-->
</script>
<script language="JavaScript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<img height="1" width="1" border="0" src="http://www.googleadservices.com/pagead/conversion/xxxxxxxxxx/?label=purchase&guid=ON&script=0"/>
</noscript>
When the user clicks one of my ads it sets a cookie with the keyword he clicked from etc, and then when he reaches this bit of a JS on the thank you page it realises he has a cookie and does the necessary tracking.
The problem is, for the thing I'm promoting right now the order thank you page is not on my server. I can place javascript on the page to track orders but only in the following format:
<SCRIPT language="javascript" src="xxxx"></SCRIPT>
With the 'xxxx' bit being the only thing I can change.
If I put the Google JS code in a file on my server, and then call the file on my server from his thank you page, will it achieve the same effect? If not is there any way to do this using what I have available?
If you are not tracking prices or anything but just conversions as defined by a page hit, then you could also go the iframe route. Have the client site open an iframe pointing to your server which then includes the googel code. Personally though, I think the pixel option is better, so long as it is not disallowed or ignored by Google (you will have to experiement to find out if this is the case)