I'd like to point your kind attentions to my question, topic should be similar to this post.
In a WP website i have two columns:
Column n.1 There is a CF7 form that is autofilled by an url from a CRM and injects data to a GSheet.
Column n.2 There is an iframe for booking an appointment with an external calendar tool that should pick data from the form (i have no way to edit form, but just the iframe link, for example:
Is there the possibility for this link to "pick" the data from the form or also from the crm url? Do you think that is possible or am I a fool?
Many thanks for your help :)
You should look into using JavaScripts postMessage() functionality to pass data to/from iFrames.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Use something like this on the WordPress page
// This will get the value of the input and send it to the iFrame on the fly
$('#form-id input:not([type=submit])').each(function() {
var val = $(this).val();
$(window).postMessage(val);
});
Then on the iFrame page:
// Create browser compatible event handler.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen for a message from the WP page
eventer(messageEvent, function(e) {
if (e.data.length < 1) return;
// jQuery
$('#input-id').val(e.data);
// Pure JS
document.getElementById('input-id').setAttribute('value', e.data);
}, false);
If the forms on different domains I think this is the only method for doing this.
Related
I'm trying to develop a wordpress plugin, I need to get users input data from any form in a specific page (not knowing its action) I come up so far with this solution which is to get values using javascript and then passing it to php:
jQuery(function ($) {
$(document).ready(function(){
$( "form" ).submit(function( event ) {
if($( "form" ).valid()){
var inputs = $( "form input" );
var inputValues = [];
inputs.each(function(index){
if($(this).attr('type') !== 'submit')
inputValues.push($(this).val());
});
}
event.preventDefault();
});
});
});
I tried to pass the Javascript variable inputValues to my plugin using Ajax
$.ajax({
type: 'POST',
url: '../wp-content/plugins/myplugin/myplugin.php',
data: {'variable': inputValues},
});
But I get problems with the url for some pages and I couldn't use $_POST['variable'] in myplugin.php file.
Is there a way to accomplish what I'm trying to do, or do you know an alternative solution?
Thanks in advance.
in terms of how to implement AJAX calls using WordPress, please check out the WordPress Codex. You're not doing it correctly.
JavaScript seems like a round about way of doing this. I would suggest to hook into one of hooks that are being called almost every single time like template_redirect (https://codex.wordpress.org/Plugin_API/Action_Reference/template_redirect).
Then you can check what's in the $_POST variable and do what you need to do with it. This would even Capture AJAX forms as long as the URL links to a proper AJAX WordPress endpoint.
Hope this helps
My problem is that the backend server (written in grails) is automatically converting my request URL to be a different URL. Specifically, it is changing it from /UXChallengeAwards/processSelectedNotifications to /UXChallengeAwards/index.
--
In a template gsp file, I have defined a button that makes a jQuery ajax call when clicked on:
<button class="blue-link"
onclick="jQuery.ajax({type:'POST',
data:jQuery(this).parents('.multiSelectForm').serialize(),
url: '/ici/UXChallengeAwards/processSelectedNotifications/${challenge.id}',
success:function(data,textStatus){},
error:function(xhr,textStatus,errorThrown){}
})" >
The method UXChallengeAwardsController.processSelectedNotifications exists. It performs some work and then redirects to another action in the controller. In fact, this used to work. But somehow in the process of adding a second button I made a change which seems to have broken things.
When the button is now clicked, the request URL gets switched to /ici/UXChallengeAwards/index and a 404 is returned because index does not exist as an action in this controller.
I've googled, and the most common answer for when this happens is that a controller must return some results for the view. But I've seen plenty of examples of redirects in controllers, and I do not see what I am doing wrong. (I did try variants of rendering results, but with no success.)
Here is what my controller action looks like:
def processSelectedNotifications = {
def challenge
def checkboxes = params.list('selectCheckbox');
for (checkbox in checkboxes) {
// the checkbox contains the id of a ChallangeAward that should be published
ChallengeAwards challengeAwards = ChallengeAwards.get(checkbox.toInteger())
if (challengeAwards) {
// grab a challenge for use in the redirect, they are all the same
challenge=challengeAwards.challenge
publish(challengeAwards)
}
}
if (challenge) {
redirect action: 'challengeAwardsRemote', id: challenge.id
return
}
// render a failure message if we got here
render messageNS(code:"UX.ChallengeAwards.Publish.failure")
}
I would really appreciate any insights into what might be wrong, or how to go about tackling this issue. I've checked my UrlMappings, and this is the rule that should handle this controller/method request:
"/$controller/$action?/$id?"{ constraints {} }
Thank you very much!
I'm going to go ahead and answer my own question, in case it is helpful for other newbies.
It turns out that I was not getting an automatic redirect. Rather, I had an error in the button setup code, so that grails was using its default link behavior. (Which is to go to the controller that matches the view, and if no action is specified, use the index method.)
The code above was originally created using a remoteSubmit tag, but I found that the generated code did not support handling multiple forms on a single page very well. So, I copied that generated code and then tweaked it to handle the multiple forms. However, I wanted the styling to match up with what was already in place on the page, so I switched it to be a button. That's when things went awry.
Eventually, I ended up specifying an onClick function for the button, and then writing the ajax submit code in javascript. Which turned out to be much simpler.
Here is what the button specification ended up looking like:
<button type="submit" id="notifications" class="blue-link" >
<i class="fa fa-envelope-o"></i>
<g:messageNS
code="UX.DiscussionBoard.ChallengeAward.Button.notify" />
</button>
And the associated JavaScript:
jQuery(document).ready(function() {
var clkBtn = "";
jQuery('button[type="submit"]').click(function(evt) {
clkBtn = evt.target.id;
});
jQuery('.multiSelectForm').submit(function() {
var url = '/ici/UXChallengeAwards/processSelectedNotifications';
if (clkBtn == 'deletes') {
url ='/ici/UXChallengeAwards/processSelectedDeletes';
}
var errorTarget = jQuery(this).parents().find('.recipientMessage').val();
var requestData = jQuery(this).parents('.multiSelectForm').serialize();
var options = {
data : requestData,
type : 'POST',
url : url,
target : '#awardsTab',
error : function(data) {
jQuery('#' + errorTarget).html(data.responseText).show();
},
success : function(data) {
console.log("in success");
}
};
jQuery(this).ajaxSubmit(options);
return false;
});
anyone using framework7 to create mobile website? I found it was great and tried to learn it by myself, now I meet this problem, after I create my App, I want to do something on the starter page initialization, here, my starter page is index.html, and I set data-page="index", now I write this below:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
// in my browser console, no "index page" logged
if (page.name === 'index') {
console.log("index page");
});
// but I changed to any other page other than index, it works
// my browser logged "another page"
if(page.name === 'login') {
console.log('another page');
}
});
Anyone can help? Thank you so much.
I have also encountered with the same problem before.
PageInit event doesn't work for initial page, only for pages that you navigate to, it will only work for index page if you navigate to some other page and then go back to index page.
So I see two options here:
Just not use pageInit event for index page - make its initialization just once (just make sure you put this javascript after all its html is ready, or e.g. use jquery's on document ready event)
Leave index page empty initially and load it dynamically via Framework7's mainView.loadContent method, then pageInit event would work for it (that was a good option for me as I had different index page each time, and I already loaded all other pages dynamically from underscore templates)
I am facing same issue and tried all solutions in various forums.. nothing actually worked. But after lot of RnD i stumbled upon following solution ...
var $$ = Dom7;
$$(document).on('page:init', function (e) {
if(e.detail.page.name === "index"){
//do whatever.. remember "page" is now e.detail.page..
$$(e.detail.page.container).find('#latest').html("my html here..");
}
});
var me = new Framework7({material: true});
var mainview = me.addView('.view-main', {});
.... and whatever else JS here..
this works perfectly..
surprisingly you can use "me" before initializing it..
for using for first page u better use document ready event. and for reloading page event you better use Reinit event.
if jquery has used.
$(document).on('ready', function (e) {
// ... mainView.activePage.name = "index"
});
$(document).on('pageReinit', function (e) {
//... this event occur on reloading anypage.
});
i have a link google adword :
http://example.com?utm_campaign=Testcam&utm_medium=referral&utm_source=Blog&utm_content=blogers&utm_term=Test
When visitor click the link above to navigate to mysite. And then he submit a Marketo form (non Marketo form for landing page on my site).
I follow this article to create Mkto form on my site: http://community.marketo.com/MarketoResource?id=kA650000000GsPJCA0 to make sure when it submit it will get values from url parameters.
My problem on here is : Normally, this form just submit to the server to handle register. Beside that, when this form submmited, i also need it submit to Marketo for tracking. That a reason, Marketo form will be submit via iframe.
When i submit marketo form, it will be target to this iframe.
So, i need pass the url parameter into iframe to make sure when submit form, hidden fields will automatic get values from url parameters. But on this iframe, as you can see, it haven't src. I had try to add this to iframe:
$("#mktoformhidden").src = window.location.href;
but it doesn't work well.
What's the iframe src should be on here?
Thanks,
I would do something like this! Just replace "URL HERE" with your iframe url and of course update the sizing that you need in BOTH loactions.
<noscript>
<iframe src="YOUR URL HERE" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>
</noscript>
<script type="text/javascript">
var iframeurl = 'YOUR URL HERE';
var params = window.location.search;
var thisScript = document.scripts[document.scripts.length - 1];
var iframe = document.createElement('iframe');
iframe.setAttribute('src', iframeurl + params);
iframe.setAttribute('width', '100%');
iframe.setAttribute('height', 500);
iframe.setAttribute('type', 'text/html');
iframe.setAttribute('frameborder', 0);
iframe.setAttribute('allowTransparency', 'true');
iframe.style.border = '0';
thisScript.parentElement.replaceChild(iframe, thisScript);
</script>
My guess is that an iframe is not the best solution here. The iframe can create all sorts of cross site scripting and permission based concerns.
Why not just use the new forms functionality in Marketo so you can drop the form either on a landing page or embed on your site (they come with an embed source code).
Also, the munchkin tracking code automatically grabs "query" parameters so you can use those in smart lists or reporting.
Like sahutchi said, embedding the actual Marketo form into your site could be the way to go. I opted for the iframe approach to get Marketo to automatically fill in fields based on mkt_tok. This might be possible using Marketo forms, but I wasn't able to figure it out a month or two ago.
Here's a decent overview of ways that you can integrate Marketo forms with your site: http://www.elixiter.com/marketo-landing-page-and-form-hosting-options/
If you insist on doing it the iframe way, here's my setup to pass query string params down to the embedded iframe:
This is in http://yourdomain.com/my-marketo-page:
<div class="lazy-iframe" data-src="//pages.yourdomain.com/MyMarketoPage.html" style="width: 960px; height: 1000px;">
</div>
And in some shared library (but you can have it on the same page, and simplify it a bit):
<script>
$(function() {
var $lazyIframe = $('.lazy-iframe');
if ($lazyIframe.length) {
var src = $lazyIframe.attr('data-src');
if (src) {
var $iframe = $('<iframe src="' + src + location.search + '"></iframe>');
$iframe.attr({
scrolling: 'no',
frameborder: 0
});
$lazyIframe.replaceWith($iframe);
}
}
});
</script>
Given that pages.yourdomain.com is your CNAME to your Marketo domain.
In my email, I just link to http://yourdomain.com/my-marketo-page, and Marketo will automatically add the mkt_tok for that email recipient to the end of that URL (becoming http://yourdomain.com/my-marketo-page?mkt_tok=BLAHBLAHBLAH). Then the iframe is constructed with the data-src URL and all of the parameters attached, and with no scrolling nor frameborder (up to you).
I have set up external link tracking as Goals in Google Analytics according to the GA documentation.
Here is the page in question: http://playmoreatthey.org/ - the external links on the page are formatted such as
Bayside Family YMCA
I set up the goal as a "head match" to the URL: /G1/bayside_family.com
I checked back four days later, and there are no results in the goals or pageviews for the phony "pagename" (/G1/bayside_family.com) specified in the JavaScript attached to each external link.
Looks like on your page you are using GA's async style code _gaq.push(...) but in your onclick you are using their old, "traditional" style code. You need to use
onclick="_gaq.push(['_trackPageview','/G1/bayside_family.com']);"
If you are using jQuery you can automatically track all the links on your site using this script:
// Outbound Link Tracking with Google Analytics
// Requires jQuery 1.7 or higher (use .live if using a lower version)
$("a").on('click', function(e){
var url = $(this).attr("href");
if($.trim(url).indexOf("javascript:") == 0) return;
if (e.currentTarget.host != window.location.host) {
_gaq.push(['_trackEvent', 'Outbound Links', e.currentTarget.host, url, 0]);
var target = $(this).attr("target");
if (e.metaKey || e.ctrlKey || target == "_blank") {
var newtab = true;
}
if (!newtab) {
e.preventDefault();
if(target) {
setTimeout('window.open("' + url + '", "' + target + '");', 100);
} else {
setTimeout('document.location = "' + url + '"', 100);
}
}
}
});
I found the script here: http://wptheming.com/2012/01/tracking-outbound-links-with-google-analytics/comment-page-1/#comment-39716
At the site you can find a debug version that will let you confirm that the script is working correctly.
I deviated from the original script by adding support for links with javascript (aka href="javascript:..."). Also I added code to honor the target attribute.
Here is a jsFiddle so you can see the script in action: http://jsfiddle.net/luisperezphd/45NPe/
One recommended way of doing this is through Events. That way your pageviews metric will not be inflated by the virtual pageviews tracked using the _trackPageview method.
http://support.google.com/analytics/bin/answer.py?hl=en&answer=1136920
I add this as an answer because Crayon Violent's comment above contains a broken link. At least someone will be able to edit this answer if the link needs to change again in the future.