I'm trying to find out if it is possible to implement an Analytics Event to track conversions in the Muse WebPro.js Form widget on successful submit?
Here is the code from the Muse WebPro.js that executes the Form submit:
Muse.Utils.initWidget('#widgetu2128', ['#bp_infinity'], function(elem) {
return new WebPro.Widget.Form(elem, {
validationEvent: 'submit',
errorStateSensitivity: 'high',
fieldWrapperClass: 'fld-grp',
formSubmittedClass: 'frm-sub-st',
formErrorClass: 'frm-subm-err-st',
formDeliveredClass: 'frm-subm-ok-st',
notEmptyClass: 'non-empty-st',
focusClass: 'focus-st',
invalidClass: 'fld-err-st',
requiredClass: 'fld-err-st',
ajaxSubmit: true
});
}); /* #widgetu2128 */
My idea is to insert the Analytics Event tracking code here, as example here:
Muse.Utils.initWidget('#widgetu2128', ['#bp_infinity'], function(elem) {
return new WebPro.Widget.Form(elem, {
validationEvent: 'submit',
errorStateSensitivity: 'high',
fieldWrapperClass: 'fld-grp',
formSubmittedClass: 'frm-sub-st',
formErrorClass: 'frm-subm-err-st',
formDeliveredClass: 'frm-subm-ok-st',
notEmptyClass: 'non-empty-st',
focusClass: 'focus-st',
invalidClass: 'fld-err-st',
requiredClass: 'fld-err-st',
onSuccess: function(){
ga('send', 'event', 'Form', 'Send', '');
},
ajaxSubmit: true
});
}); /* #widgetu2128 */
But it does not seem to be working. Anybody have any suggestions. Can't find any WebPro.js docs or support about this topic online.
Thanks!
//validate
Muse.Utils.initWidget('#widgetu812', function(elem) {
new WebPro.Widget.Form(elem,
{
validationEvent:'submit',
errorStateSensitivity:'high',
fieldWrapperClass:'fld-grp',
formSubmittedClass:'frm-sub-st',
formErrorClass:'frm-subm-err-st',
formDeliveredClass:'frm-subm-ok-st',
notEmptyClass:'non-empty-st',
focusClass:'focus-st',
invalidClass:'fld-err-st',
requiredClass:'fld-err-st',
ajaxSubmit:true
}
);
});/* #widgetu812 */
//submit
<script> $(document).ready(function() {
$("#widgetu812").ajaxComplete(function() {
if (typeof ga !== 'undefined') {
ga('send','event','order','sent');
}
}); }); </script>
Related
Last year i build a form for one of our costumers, when visitors submitted the form they
got a message on the same page. But now he asks me if it is possible to
make a succes page if the form is filled in correctly.
I can't make it work. It's a bit out of my league.
So i hope anyone of you can help me out!
$(document).ready(function() {
$("#ajax-contact-form").submit(function() {
$('#load').append('<center><img src="ajax-loader.gif" alt="Currently Loading" id="loading" /></center>');
var fem = $(this).serialize(),
note = $('#note');
$.ajax({
type: "POST",
url: "contact/contact2.php",
data: fem,
success: function(msg) {
if ( note.height() ) {
note.slideUp(500, function() { $(this).hide(); });
}
else note.hide();
$('#loading').fadeOut(300, function() {
$(this).remove();
// Message Sent? Show the 'Thank You' message and hide the form
result = (msg === 'OK') ? '<div class="success">Uw bericht is verzonden, we nemen z.s.m. contact met u op!</div>' : msg;
var i = setInterval(function() {
if ( !note.is(':visible') ) {
note.html(result).slideDown(500);
clearInterval(i);
}
}, 40);
}); // end loading image fadeOut
}
});
return false;
});
<form id="ajax-contact-form" target="_blank" method="post" action="javascript:alert('success!');" >
Instead of displaying the "success" message, redirect to a new page:
window.location = successPageUrl;
Just redirect to success page after ajax success.
I use jqgrid, when i add a row, i want push a file on the server.
I have read many many post, but i don't find a working example.
Many example don't work from jquery 1.5.
I found people who council:
http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html#api
http://malsup.com/jquery/form/#file-upload
But, i don't knows howto use this with jqgrid.
Someone could give me a complete example of a solution to upload a file with jqgrid?
Thank,
Well, i have find:
<script type="text/javascript" src="/static/jqueryform/jquery.form.js"></script>
<script type="text/javascript"> $(function(){
$("#citype").jqGrid({ url:"/api/citype/getdata",
datatype:'json',
mtype:'POST',
colNames:['No', 'Name', 'Icon'],
colModel :[
{ name:'id',
index:'id',
width:55,
editable:false,
key:true,
hidden:true
},
{
name:'name',
index:'name',
width:55,
editable:true
},
{
name:'icon',
index:'icon',
edittype:'file',
width:80,
align:'right',
editable:true},
],
pager:'#pager',
rowNum:10,
rowList:[10,20,30],
sortname:'citype_id',
sortorder:'desc',
viewrecords:true,
gridview:true,
caption:'List',
useDataProxy: true,
dataProxy : function (opts, act) {
opts.iframe = true;
var $form = $('#FrmGrid_citype'); //use name of the grid
//Prevent non-file inputs double serialization
var ele = $form.find('INPUT,TEXTAREA,SELECT').not(':file');
ele.each(function () {
$(this).data('name', $(this).attr('name'));
$(this).removeAttr('name');
});
//Send only previously generated data + files
$form.ajaxSubmit(opts);
//Set names back after form being submitted
setTimeout(function () {
ele.each(function () {
$(this).attr('name', $(this).data('name'));
jQuery("#citype").trigger('reloadGrid');
});
}, 200);
},
editurl:"/submit"
});
// Action Option jQuery("#citype").jqGrid('navGrid','#pager',
{}, //options
{ // edit options
closeAfterEdit:true,
height:280,
reloadAfterSubmit:true,
closeOnEscape : true,
useDataProxy: true,
onInitializeForm : function(formid){
$(formid).attr('method','POST');
$(formid).attr('action','');
$(formid).attr('enctype','multipart/form-data');
}
},
{ // add options
closeAfterAdd:true,
height:280,
reloadAfterSubmit:true,
closeOnEscape : true,
useDataProxy: true,
onInitializeForm : function(formid){
$(formid).attr('method','POST');
$(formid).attr('action','');
$(formid).attr('enctype','multipart/form-data');
}
},
{ // del options
reloadAfterSubmit:true
},
{} // search options );
I have a edit user form. The form is loaded from a Json store with this code:
var store = Ext.create('cp.store.form.Paciente',{});
store.load({params:{idUsuario: idPaciente}});
var form = Ext.create('cp.view.form.EditPaciente',{
action: 'bin/paciente/modificar.php'
});
// note: write this lines in the controller
form.on('afterrender',function(form,idPaciente){
form.getForm().loadRecord(store.first());
form.getForm().findField('idUsuario').setValue(idPaciente);
});
var win = Ext.create('cp.view.ui.DecoratorForm',{
aTitle: 'Editar paciente',
aForm: form
});
win.show();
The load code works fine. The submit code is:
var me = this;
console.log('Submit...');
console.log(this.url);
// WHY NOT SUBMIT !!!!
this.getForm().submit({
console.log('submit !');
success: function(form,action){
if(action.result.success === true){
Ext.create('cp.view.ui.AlertOk',{mensaje:action.result.msg}).showDialog();
me.up('decoratorForm').close();
}else{
Ext.create('cp.view.ui.AlertErr',{mensaje:action.result.msg}).showDialog();
}
}
});
So, the submit code starts running. FireBug shows the first and second "console.log", and the "this.url" value is correct. But, the third "console.log" not execute, and the form not send to the server.
Firebug not says 404 error for "this.url" value.
Any ideas ?
Thanks !
Add the form definition:
Ext.define('cp.view.form.EditPaciente',{
extend: 'Ext.form.Panel',
alias: 'widget.editPaciente',
bodyPadding: '5px 5px 5px 5px',
bodyStyle: 'border: none',
fieldDefaults: {
labelWidth: 65,
labelAlign: 'top'
},
initComponent: function(){
this.url = this.action,
this.method = 'POST',
this.items = [ .... ]
this.callParent(arguments);
}
});
You cant put log statements inside object literals.
submit({ <-- This is an object literal
console.log('submit !'); <-- This can not be in an object literal
success: function(form,action){
if(action.result.success === true){
Ext.create('cp.view.ui.AlertOk',{mensaje:action.result.msg}).showDialog();
me.up('decoratorForm').close();
}else{
Ext.create('cp.view.ui.AlertErr',{mensaje:action.result.msg}).showDialog();
}
}
});
I have little problem with Media Uploader in new WordPress 3.5. I created own plugin which is upload the picture. I'm using this code JS:
<script type="text/javascript">
var file_frame;
jQuery('.button-secondary').live('click', function( event ){
event.preventDefault();
if ( file_frame ) {
file_frame.open();
return;
}
file_frame = wp.media.frames.file_frame = wp.media(
{
title: 'Select File',
button: {
text: jQuery( this ).data( 'uploader_button_text' )
},
multiple: false
}
);
file_frame.on('select', function() {
attachment = file_frame.state().get('selection').first().toJSON();
jQuery('#IMGsrc').val(attachment.url);
});
file_frame.open();
});
</script>
The code works fine, but unfortunately forms appears incomplete. When I select any picture doesn't show me 'Attachment Display Settings' on right side. I don't know why. I try add options to media:
displaySettings: true,
displayUserSettings: true
But it also doesn't work.
Does the page have the <script type="text/html" id="tmpl-attachment-details">... template in the source? If not, you'll need to call wp_print_media_templates(), to write the styles from wp-includes/media-template.php
This is the code I use. Source: http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/ It seems to work pretty well, but the sidebar on the left is missing. (Intentional, but I don't want it anyways).
<?php wp_enqueue_media(); ?>
<script>
function showAddPhotos() {
// Uploading files
var file_frame;
// event.preventDefault();
// If the media frame already exists, reopen it.
if ( file_frame ) {
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: jQuery( this ).data( 'uploader_title' ),
button: {
text: jQuery( this ).data( 'uploader_button_text' ),
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on( 'select', function() {
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
// Do something with attachment.id and/or attachment.url here
});
// Finally, open the modal
file_frame.open();
}
</script>
Very early days playing Javascript, Jquery and Validate.
I am using the Submit Button onClick method for form submission.
<input class="submit" type="submit" value="Submit" onClick="submitForm()" />
I am using the submit, in case no data or not every field has been tested.
The logic is working, but the AJAX call does not appear to be working. I have stripped down the PHP to
<?php
touch('phpTouch.txt');
phpinfo();
sleep(30;)
?>
The javascript is
$(document).ready(function () {
$('#formEnquiry').validate();
});
function submitForm() {
$('#msgid').append('<h1>Submitting Form (External Routine)</h1>');
if ($('#formEnquiry').validate().form() ) {
$("#msgid").append("<h1>(Outside Ready) VALIDATED send to PHP</h1>");
$.ajax({
url: "testPHP.php",
type: "POST",
data: frmData,
dataType: "json",
success: function () {
alert("SUCCESS:");
},
error: function () {
alert("ERROR: ");
}
});
} else {
$('#msgid').append('<h1>(Outside Ready) NOT VALIDATED</h1>');
}
return false; // Prevent the default SUBMIT function occurring (is this a fact ??)
};
Can anyone advise as to what I am doing wrong.
Thanks
Do these things
Change onClick="submitForm()" on the HTML markup to onclick="submitForm(event)"
Now change the submitForm function like this.
function submitForm(evt) {
$('#msgid').append('<h1>Submitting Form (External Routine)</h1>');
if ($('#formEnquiry').valid() ) {
$("#msgid").append("<h1>(Outside Ready) VALIDATED send to PHP</h1>");
$.ajax({
url: "testPHP.php",
type: "POST",
data: frmData,
contentType: "application/json;",
success: function () {
alert("SUCCESS:");
},
error: function (a, b, c) {
alert(a.statusText);
}
});
} else {
$('#msgid').append('<h1>(Outside Ready) NOT VALIDATED</h1>');
}
evt.preventDefault();
};
Please note these things
Check .valid() to determine form validity
Call .preventDefault() instead of return false; ( Its more jQuery-ish )