I want to input data from multiselect (right side) to database, I use the default form smart wizard from gentelella template, to get data from multiselect I make function:
function selectAll(theSel) {
var selLength = theSel.length;
for(i=selLength-1; i>=0; i--) {
theSel.options[i].selected = true;
}
}
I added this :
<form class="form-horizontal form-label-left" action="<?=site_url('index.php/biodata/commit'); ?>" method="POST" onsubmit="selectAll(document.getElementById('region_id_assign')); selectAll(document.getElementById('region_out_id_assign')); return;">
and change the code onfinish to true :
$.fn.smartWizard.defaults = {
selected: 0, // Selected Step, 0 = first step
keyNavigation: true, // Enable/Disable key navigation(left and right keys are used if enabled)
enableAllSteps: false,
transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
contentURL:null, // content url, Enables Ajax content loading
contentCache:true, // cache step contents, if false content is fetched always from ajax url
cycleSteps: false, // cycle step navigation
enableFinishButton: false, // make finish button enabled always
hideButtonsOnDisabled: false, // when the previous/next/finish buttons are disabled, hide them instead?
errorSteps:[], // Array Steps with errors
labelNext:'Next',
labelPrevious:'Previous',
labelFinish:'Finish',
noForwardJumping: false,
onLeaveStep: null, // triggers when leaving a step
onShowStep: null, // triggers when showing a step
onFinish: true // triggers when Finish button is clicked
};
how to solve it so that the data into the database?
sorry, I'm new this time try using smart wizard
Related
I am using Jquery-option-tree plugin on a standalone website not based on Wordpress as in example 7 on the demo page, except that I am not passing a .txt file but a PHP page is generating the array of < options > to be passed to the plugin.
http://kotowicz.net/jquery-option-tree/demo/demo.html
This perfectly works: so let's say that the user wants to select a category for a new product, the plugin suits the purpose generating a nice: " Food -> fruit -> apples " upon user clicks. (see demo page ex. 7)
What instead if a product already exists with its categories assigned? I want to show it to the user when he edit that product, preloading the tree.
I have the ids path coming from database, so it would just be a matter of having the plugin to run without the user interact, using the value I pass. I saw this question: jQuery simulate click event on select option
and tried to simulate user' click with this (and other) methods with no luck.
$('#select')
.val(value)
.trigger('click');
Here the call to the function:
$(function() {
var options = {
empty_value: '',
set_value_on: 'each',
indexed: true, // the data in tree is indexed by values (ids), not by labels
on_each_change: '/js/jquery-option-tree/get-subtree.php', // this file will be called with 'id' parameter, JSON data must be returned
choose: function(level) {
return 'Choose level ' + level;
},
loading_image: '/js/jquery-option-tree/ajax-load.gif',
show_multiple: 10, // if true - will set the size to show all options
choose: ''
};
$.getJSON('/js/jquery-option-tree/get-subtree.php', function(tree) { // initialize the tree by loading the file first
$('input[name=parent_category_id]').optionTree(tree, options);
});
});
Here you can see the plugin:
https://code.google.com/p/jquery-option-tree/
I don't know that plugin, but looking at the examples there seems to be one that fits your need; Example 6 - AJAX lazy loading & setting value on each level change.
This would, in theory, just require some config options:
preselect: {'demo6': ['220','226']}, // array of default values - if on any level option value will be in this list, it will be selected
preselect_only_once: true, // prevent auto selecting whole branch when user maniputales one of branch levels
get_parent_value_if_empty: true,
attr: "id" // we'll use input id instead of name
If this doesn't fit you need though, you could initiate it from an event, like change, keyup, etc.
$(document).on('change', '#select', function() {
$('#nextSelect').val($(this).val());
})
$(document).on('change', '#nextSelect', function() {
$('#finalInput').val($(this).val());
})
Yes, you are right Mackan ! I saw that "preselect" option but I was initially unable to use it transferring the path from database to javascript, I ended up with my "newbie" solution to match the syntax:
preselect: {'parent_category_id': [0,'2','22']},
PHP
$category_path comes from DB query and is like "0,2,76,140,"
$path = explode(',', $category_path);
$preselect="";
foreach ($path as $value) {
$int = (int)$value;
if ($int != 0) $preselect.= "'". $int ."',";
else $preselect.= $int.","; // have to do this as ZERO in my case has to be without apostrophes ''
}
$preselect = "{'parent_category_id':[".$preselect."]}"
JS
var presel= <?php echo($preselect); ?>;
var options = {
preselect: (presel),
}
Any suggestion for a better code ?
Thanks a lot !!
I am using the PHP template from Avant (http://avant.redteamux.com/tables-editable.php) to create an Editable Table where you select a row in the table and when you click on the Edit button, a popup window appears with the fields from this row. I am trying to add backend code for this that calls a web service to update the database. The stage I am at is, on clicking the Edit button, the popup window appears as expected, I can edit the fields and the call to the web service is successfull. My main issue is how to close the popup window after that and have the updates reflected in the table. My code is:
// editor is successfully initialized with jsondata
var table = $('#editable').dataTable({
"sDom":"<'row'<'col-sm-6'T><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
"aaData":jsondata,
"bServerSide": false,
"bAutoWidth": false,
"bDestroy": true,
"aoColumns":columnsjson,
"oTableTools":{
"sRowSelect":"multi",
"aButtons":[
{ sExtends:"editor_create", editor:editor },
{ sExtends:"editor_edit", editor:editor,
"formButtons": [
{
label: "Update",
className: "btn-primary btn",
fn: function (e) {
// Code to call the service: this is successfull
// This is what I need to figure out, I've tried: editor.submit(); | $(this).close();
// (I tried several alternates for "this")
}
}
]
},
{ sExtends: "editor_remove", editor: editor }
});
Thanks.
So it turned out quite simple actually. This is the statement for it: editor.close();
I have four membership package and each of them have two payment option like 6 month and 12 month but as the laws forces to show an agreement during an e-commerce I need to show the agrement after the user select the type of duration and membership. How to know which package is selected and wich option before redirection to paypal since the price will be in that agreement. How can I solve this.
My form has four dorpdown selectbox with two options of each and those buttons are created by paypal button menager. Then I have written a jquery code for the proccess like following;
<script>
var packageForm,canBeSubmitted = false;
jQuery(function($) {
$('form').on('submit',function(e){
if(canBeSubmitted == false){
packageForm = $(this);
e.preventDefault();
var on0 = $(this).find('input[name="on0"]')[0];
var os0 = $(this).find('select[name="os0"] option:selected')[0];
var dur = $(os0).val();
on0 = $(on0).val();
os0 = $(os0).text();
os0 = os0.split(' ');
$('span.package').text(on0);
$('span.duration').text(dur);
$('span.price').text(os0[2]+" "+os0[3]);
SqueezeBox.setContent( 'adopt', $('#agreement').html());
SqueezeBox.resize({x: 800, y: 600});
}
});
$('body').on('click','.accept',function(){
if(packageForm == 'undefined'){
alert('Select a membership.');
return false;
}
console.log("accepted");
canBeSubmitted = true;
SqueezeBox.close();
if(canBeSubmitted == true){
$(packageForm).submit();
}
return true;
});
$('body').on('click','.deny',function(){
console.log("denied");
SqueezeBox.close();
});
$('body').on('click','#printAg',function(){
$(this).siblings('div.inner').addClass('printable');
console.log("printable");
$('div.printable').printThis({
debug: true,
importCSS: true,
printContainer: true,
loadCSS: "<?php echo JURI::root(true);?>/components/com_dratransport/assets/css/print.css",
pageTitle: "<?php echo JFactory::getConfig()->sitename; ?>",
removeInline: false
});
});
});
The form is the form which contain the paypal button. A hidden div is placed somewhere in the page with a text which contains span tags with classes to be captured by the jquery to change the content.
Form is prevented to be submitted. And the div is adopted in the squeez box after the content/(agreement text about the payment) is change with the selected button's informations. The if accept button is clicked form continue to be submited, if deny is clickt modal box is closed without doing anything.
I have been trying to figure this out for hours to no avail.
I have the following
http://vitalets.github.com/x-editable/docs.html#newrecord
the new record module/code. Its functionality is, once all the rows have their data, and it is submitted, it retains its value so that it can stay editable.
I have tried adding input, select clearing code in the success of the ajax request and tried putting the .editable function inside an ajaxComplete function to see if it would reload the element on submit but it didnt. look at the demo. enter data, and submit. it then makes the data "permanent" so that it can continue to be editable.
I have removed the code that hides the button.
What i want it to do is, submit the record and reset so i can submit another with the form being 'Empty' and back to default.
I am developing an equipment tracker and would love if techs could just enter records, one after another. im sure its a simple fix to reset the form, i just cannot figure it out.
I have attached a screencast video of it.
http://www.youtube.com/watch?v=dPDuQCgOOSw
as it's popular question, I've added Reset button to documentation.
$('#reset-btn').click(function() {
$('.myeditable').editable('setValue', null) //clear values
.editable('option', 'pk', null) //clear pk
.removeClass('editable-unsaved'); //remove bold css
$('#save-btn').show();
$('#msg').hide();
});
It's better to use .editable('setValue', null) instead of .text('Empty') as we need also to reset internal value.
HTH
If you look how the "save new user button" is implemented, it just selects the anchor tags that have classname myeditable
Either you bind a function to your 'reset' button or have this script onclick
IF onclick:
jQuery.each($('.myeditable'),function() {
$(this).text('Empty') ; //this is your default text
});
OR as a function
function reset_myeditable()
{
jQuery.each($('.myeditable'),function() {
$(this).text('Empty') ; //this is your default text
});
}
and attach this to the onclick handler of your reset button
This I assume you will be putting a 'reset' button
EDIT
Ok zoom in to your $('#save-btn').click(function() success handler
success: function(data, config) {
if(data && data.id) { //record created, response like {"id": 2}
$(this).editable('option', 'pk', data.id);
//remove unsaved class
$(this).removeClass('editable-unsaved');
//show messages
var msg = 'New user created! Now editables submit individually.';
$('#msg').addClass('alert-success').removeClass('alert-error').html(msg).show();
$('#save-btn').hide();
$(this).off('save.newuser');
/**this the edited part**/
jQuery.each($('.myeditable'),function() {
$(this).text('Empty') ; //this is your default text
});
/**end of edit**/
} else if(data && data.errors){
//server-side validation error, response like {"errors": {"username": "username already exist"} }
config.error.call(this, data.errors);
}
},
I am new to jquery and jqgrid, but i am comfortable with javascript. However I have managed to install jqgrid after some effort.
I have been trying a to find a solution to enable ore disable the delete feature from the navigation bar based on the value of the 'lock' column. I read the following link
jqgrid: how to set toolbar options based on column value in row selected
But I was not able to get the contents of 'lock' cell for the javascript. I also tried to format the lock string without effect.
the jqgrid is loaded via php. The script is here http://www.trirand.net/demophp.aspx
The php script is the following
require_once("JQGrid/jq-config.php");
require_once("JQGrid/php/jqGridASCII.php");
require_once("JQGrid/php/jqGridPdo.php");
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
$grid = new jqGridRender($conn);
$grid->SelectCommand = 'SELECT * FROM `device_assignement` ';
$grid->dataType = 'json';
$grid->setColModel();
$grid->setUrl('Grid_ecu_display.php');
$grid->setColProperty("company",
array("label"=>"Dealer Name",
"width"=>350
),
array( "searchrules"=>
array("searchhidden"=>false, "required"=>false, "search"=>false)));
$grid->setGridOptions(array(
"sortable"=>true,
"rownumbers"=>true,
"rowNum"=>40,
"rowList"=>array(10,50,100),
"sortname"=>"ecu",
"width"=>940,
"height"=>400,
"shrinkToFit"=>true,
"hidden" => true,
"hoverrows"=>true ));
$grid->toolbarfilter = true;
$grid->setFilterOptions(array("stringResult"=>true));
$grid->setColProperty("ecu", array(
"label"=>"ECU Number" ,
"sortable"=>true
));
$grid->setColProperty("lock", array(
"label"=>"<i>Lock</i>" ,
"width"=>60,
"sortable"=>false,
"editable"=>true
));
etc etc...
$ecu = jqGridUtils::GetParam('ecu');
// This command is executed immediatley after edit occur.
$grid->setAfterCrudAction('edit', "UPDATE `ecu_master` SET `lock` = '1' WHERE `ecu` =?",array($ecu));
$grid->navigator = true;
$grid->setNavOptions('navigator', array("pdf"=>true, "add"=>false,"edit"=>true,"del"=>false,"view"=>false, "excel"=>true));
$grid->setColProperty('company',array("searchoptions"=>array("sopt"=>array("cn"))));
$oper = jqGridUtils::GetParam("oper");
if($oper == "pdf") {
$grid->setPdfOptions(array(
// set the page orientation to landscape
"page_orientation"=>"L",
// enable header information
"header"=>true,
// set bigger top margin
"margin_top"=>27,
// set logo image
//"header_logo"=>"logo.gif",
// set logo image width
//"header_logo_width"=>30,
//header title
"header_title"=>"Autograde CMS ECU Allocation List",
// and a header string to print
"header_string"=>"$SoftwareVersion"
));
}
// Run the script
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
This is included in another php script where.
All I want is to enable or disable the delete row button based on the "lock" value
If this seems too basic and ridiculous please let me know I will understand.
If the user click on a cell of the grid the whole row will be selected and the callback function onSelectRow will be called. So you should implement the callback function onSelectRow which has the rowid (the id of the <tr>) as the first parameter. Inside of the onSelectRow handler you can call getCell method. Depend on the value of the 'lock' column (which can be hidden if needed) you can enable of disable "Edit" and "Delete" buttons of the navigator bar.
So the code can be about the following:
$('#list').jqGrid({
... all other jqGrid options which you need
pager: '#pager',
onSelectRow: function (rowid) {
var gridId = $.jgrid.jqID(this.id);
// test 'lock' column for some value like 'yes'
if ($(this).jqGrid('getCell', rowid, 'lock') === 'yes') {
// disable the "Edit" and "Delete" buttons of the navigator
$("#edit_" + gridId).addClass('ui-state-disabled');
$("#del_" + gridId).addClass('ui-state-disabled');
} else {
// enable the "Edit" and "Delete" buttons of the navigator
$("#edit_" + gridId).removeClass('ui-state-disabled');
$("#del_" + gridId).removeClass('ui-state-disabled');
}
}
}).jqGrid('navGrid', '#pager');
Because you are new in jqGrid I want comment the usage of $.jgrid.jqID() function. In the most cases if returns the value of the input parameter: 'list' in case of the example. It's needed for more common case if the id of the grid (the id of the <table> element) contains meta-characters. $.jgrid.jqID() function include additional escape characters (two backslashes: \\) before any meta-character.