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'
}]
})
});
Related
I want to be able to display my PnPJS code and make it show up within the Content Editor, but I am having trouble pulling the data in and displaying it.
Here is what I have so far:
1.)
I made a SharePoint list called O365RoadMap that automatically pulls new updates on Microsoft's Office 365 Roadmap and posts them
within the list using Microsoft Flow.
2.)
Here is the pnpJS code that pulls the data from the list and tried to display it within content editor.
<div class="roadMap" id="roadMap"></div>
<script src="/siteassets/bootstrap3/js/jquery-1.8.3.min.js"></script>
<script src="/publiccdnlib/PnP-JS-Core/pnp.min.js"></script>
<script type="text/javascript" src="/publiccdnlib/es6-Promise/es6-promise.auto.js"></script>
<script type="text/javascript" src="/publiccdnlib/fetch/fetch.min.js"></script>
<script src="/publiccdnlib/slick/slick.min.js"></script>
<script src="/publiccdnlib/CommonJS/CommonJS.js"></script>
<script src="/publiccdnlib/knockout/knockout.js"></script>
<script src="/publiccdnlib/knockout/knockout.simpleGrid.3.0.js"></script>
<script src="/publiccdnlib/toastr/toastr.min.js"></script>
<script src="/publiccdnlib/dialog/open-sp-dialog.js"></script>
<!--END Scripts for O365-->
<script>
$pnp.setup({
baseUrl: "/TrainingResourceCenter/O365Training"
});
<!--document.getElementById("roadMap").innerHTML = JSON.stringify(result, null, 2)-->
$pnp.sp.web.lists.getByTitle("O365RoadMap").items.get().then(function(z){
console.log(z);
var result = z.results.map(a => ({
Title: `${a.Title}`,
Description: `${a.Description}`,
Link: `${a.Link}`
})
)
console.log(result);
})
</script>
3.)
My Results are pulling in nicely using the Console log:
4.)
But for some reason, it's not displaying within the content editor and it's linked to the correct .txt file location, is there something that I am missing? All help would be appreciated.
You could insert the code to content editor directly.
What I want to do
Get a form using an external script. Prefill and disable some fields. Example:
How I do it
I retrieve a form using an external script(s) :
<!-- Lumesse js imports -->
<!--Apply-->
<script type="text/javascript"
src="https://emea3.recruitmentplatform.com/apply-app/static/apply/release/2-LATEST/apply-preloader-namespaced.js"
th:src="#{https://emea3.recruitmentplatform.com/apply-app/static/apply/release/2-LATEST/apply-preloader-namespaced.js}"
data-lumesse-apply=""
data-lumesse-apply-config-key="XXX"
data-lumesse-apply-host="https://emea3.recruitmentplatform.com"
data-lumesse-apply-description-placement="bottom"
data-lumesse-apply-menu="top"
data-lumesse-apply-menu-placement="top"
data-lumesse-apply-repeatable-style="on-demand">
</script>
<script src="https://emea3.recruitmentplatform.com/apply-
app/static/apply/release/2-LATEST/apply-application-form-namespaced.js"
th:src="#{https://emea3.recruitmentplatform.com/apply-
app/static/apply/release/2-LATEST/apply-application-form-namespaced.js}">
</script>
<!-- in comment because otherwise conflict with static/vendor/jquery.min.js -->
<!-- <script src="https://code.jquery.com/jquery-1.12.3.min.js"
th:src="#{https://code.jquery.com/jquery-1.12.3.min.js}"
th:integrity="sha"
th:crossorigin="anonymous"></script>-->
<script src="https://emea3.recruitmentplatform.com/apply-
app/static/themes/release/latest/silk/js/main.js"
th:src="#{https://emea3.recruitmentplatform.com/apply-
app/static/themes/release/latest/silk/js/main.js}"></script>
The code for prefill or disable works fine.:
<!-- custom javascript -->
<script type="text/javascript" th:inline="javascript" >
$(document).ready(function() {
// fix menu when passed
$('.masthead').visibility({
once : false,
onBottomPassed : function() {
$('.fixed.menu').transition('fade in');
$('.navbar-fixed-top').css({'top': '52px'});
},
onBottomPassedReverse : function() {
$('.fixed.menu').transition('fade out');
$('.navbar-fixed-top').css({'top': '75px'});
}
});
// create sidebar and attach to menu open
$('.ui.sidebar').sidebar('attach events', '.toc.item');
window.setTimeout(function(){
preFillForm();
},0);
});
function preFillForm(){
var gegevens = [[${gegevens}]];
for(var id in gegevens){
$("#" + id).val(gegevens[id]);
}
$("#first_name_1").attr('disabled','disabled');
$("#last_name_2").attr('disabled','disabled');
$("#e-mail_address_3").attr('disabled','disabled');
}
</script>
The problem
My fields don't get prefilled .. My guess is because they don't get reloaded or get overwritten ..
First possible solution
After many hours I added a setTimeout of 0. This seems to work. Now I discovered that this only works on a page refresh or when the user already visited the site and did a page refresh before ...
So still when a user go to the site for the first time it doesn't work ..
Any help would be much appreciated
Cheers
(PS: setTimeout of more seconds is not the way I want to go ..)
UPDATED
My application is a Spring Boot App. Working with Thymeleaf. Also use of Semantic and Jquery in FrontEnd.
Try using sessionStorage or localStorage (sessionStorage seems to be better in this situation).
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
I am trying to embed google plus posts in my application.
I have loaded platform.js file in header
<script>
window.___gcfg = {
lang: 'en-US',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer>
</script>
<script>
function renderWidget() {
gapi.post.render("widget-div", {'href' : 'https://plus.google.com/109813896768294978296/posts/hdbPtrsqMXQ'} );
}
</script>
In html page
Render the embedded post
<div id="widget-div"></div>
When I clicked on the link, it shows nothing. Is there anything to be added. Here is the reference i followed https://developers.google.com/+/web/embedded-post
You might be opening HTML file directly in browser, which could be problem in some browser(s) (i.e. In Google Chrome. You can verify the issue here).
Try running it using a local-server(XAMPP maybe) so the URL will look similar to http://localhost/yourpath/test.html
Hope this helps!!
I have updated my wordpress site to Wordpress 4.6.1 version, after that my site is showing following pop up message.
"This page requires AC_RunActiveContent_QueryString.js."
Can somebody let me know how can I fix this?
Just looking at the same problem and found your post - so in case the problem isn't fixed?
At the site I looked at there was a link set up to a non-existent JavaScript file at easyfundraising.org.uk in one of the side column text widgets:
<script src="http://www.easyfundraising.org.uk/js/AC_RunActiveContent_QueryString.js" language="javascript"></script>
... and below this (in a another widget) some JavaScript
<!-- START BANNER -->
<script language="javascript">AC_FL_RunContent_QueryString = 0;</script>
<script src="http://www.easyfundraising.org.uk/js/AC_RunActiveContent_QueryString.js" language="javascript"></script>
<script language="javascript">
if (AC_FL_RunContent_QueryString == 0) {
alert("This page requires AC_RunActiveContent_QueryString.js.");
} else {
Deleting both Text widgets removed the popup.
I am trying to set up jquery instant postcode search function (from https://ideal-postcodes.co.uk/documentation), I successfully added the fields on my website http://kyl.ri-web.com however the Postcode field is not showing up.
I am sure this is a jquery conflict issue but just can't get it to work.
The website is a Wordpress website and I have already tried deactivating all plugins to check for any conflicting.
I have installed the script from ideal-postcodes.
I have added the empty div with the ID 'lookup_field' which should be replaced by the postcode lookup but it's not showing.
The other fields should be filled once a relative postcode has been selected.
I've added the script to run in the footer.
Looks like you're calling your script before jQuery is declared. Move your script to just above the closing tag, like so:
</div><!-- #page -->
<script type='text/javascript' src='http://kyl.ri-web.com/wp-content/themes/know-your-location/js/main.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://kyl.ri-web.com/wp-content/plugins/js_composer/assets/js/js_composer_front.js?ver=4.5.3'></script>
<script type="text/javascript">
jQuery('#lookup_field').setupPostcodeLookup({
api_key: 'ak_ibm52vjdv8H63MwvUHsdyZpTO2dyb',
output_fields: {
line_1: '#first_line',
line_2: '#second_line',
line_3: '#third_line',
post_town: '#post_town',
postcode: '#postcode'
}
});
</script>
</body>
</html>
As this is a Wordpress site, it may be easier to move your jQuery file into the head section, also call jQuery using 'jQuery' not '$', see updated code