Thanks for this stworthy.

However, it isnt quite doing what i am after.

if a user clicks on a specific cell, i need the row to remain in its selected/unselected state and then for a msgbox to pop up.

with your code supplied, clicking on the specific cell will deselect the row.


so for example.

user has the following rows selected:

row 1 = selected
row 2 = unselected

user then clicks row 1 cell 3 and a msgbox pops up
row 1's selected state will remain selected

user then clicks row 1 cell (not 3) (no popup box)
row 1's selected state will change to unselected (should toggle between selected/unselected)


does that make sense?

Hi,

Long story short, when a user clicks on a row, i want it to tick the checkbox (if invoiced = 0) of that row and highlight it.

I have done this (fairly simple/standard function), however, when the user clicks a certain cell, i dont want it to check/highlight the row i want a message to appear instead.

At the moment, when the user clicks on a cell it will check and highlight the row.

How do i only check/highlight the row when they click o na cell not in the list?

Code:

    onClickCell:function(index,field,value){
        //alert(index);// index of row clicked
        //alert(field);// db field name eg. date_edited
        //alert(value);// value of cell/db field eg. 2018-01-01

        var row = $('#dgPOs').datagrid('getRow', index); // Gets row details from datagrid

        // will unselect/uncheck line if it has already been invoiced
        if (row.invoiced == 1){
            $(this).datagrid('unselectRow',index);
        }

        // Switch statement to show msgbox depending on which cell is clicked
        switch(field) {
            case "notes":
                alert(value);
            break;
            default:
                $('#dgPOs').datagrid('highlightRow', index);
                //$('#dgPOs').datagrid('selectRow', index);
                //$('#dgPOs').datagrid('checkRow', index);
        };

    },

Hi,

I have a datagrid in a panel and i want to resize the panel when a new row is added to the datagrid by the end user.

How do i go about doing this?

HTML

Code:

            <div id="sectionA" class="easyui-panel" title="Section A" style="padding:5px;height:250px;">
                <table id="dg"
                    toolbar="#toolbar" 
                    pagination="false"
                    pageList="[10,20,30,40,50,100]"
                    singleSelect="true"
                    fitColumns="false"
                    fit="true"
                    nowrap="true"
                    rownumbers="false"
                    autoSave="true"
                    idField="id">
                </table>
                <div id="toolbar">
                    <a id="btnAdd" href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="fncAddSave(1)">Add</a>
                    <a id="btnSave" href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="fncAddSave(2)">Save</a>
                </div>

JS

Code:

function fncAddSave($addsave){
$('#sectionA').panel('resize',{
    //height: 600
});
$('#dg').datagrid('resize',{
    //height: 600
});

    if($addsave == 1){
        $('#dg').edatagrid('addRow',{
            index: 0,
            row:{
                randNBR:randNBR
            }
        });
        $('#btnAdd').hide();
        $('#btnSave').show();
    } else if($addsave == 2){
        $('#dg').edatagrid('saveRow');
        $('#btnAdd').show();
        $('#btnSave').hide();
    }
};

Hi,

Is there an autosave feature for form data?

What i am looking for is a way to autosave/restore form data preferably locally (localstorage? maybe) in the event that the users internet drops etc etc.

Is there a native function/plugin for this or do i need to look elsewhere for this?

On a side note, i did find Sisyphus.js which is meant to do this but i was unable to get it to work. Does anyone have any experience with this?

Regards,

Mart

Cheers jega, works like a charm.

I knew it would be something as simple as this that i overlooked (its been a long day of overthinking things).

Hi,

i need to stop users from entering a date manually into the datebox so wanted to show the calender when the user clicks on the datebox.

Can this be done?

Regards,

Mart

Hi,

sorry for delay, had to work on another area first.

Anyways, still havnt been able to figure this out and here is the code i have so far.


index.php

Code:

<div id="addOrder" class="easyui-panel" closed="true"></div>
<div id="dlgBlockRef" class="easyui-dialog" style="width:600px;height:420px;padding:10px"
        data-options="
        	title: 'Block/Section reference?',
		    closed: false,
		    cache: false,
		    modal: true,
            buttons: [{
			    text:'Ok',
			    iconCls:'icon-ok',
			    handler:function(){
			        addOrder();
			    }
			},{
			    text:'Cancel',
			    iconCls:'icon-cancel',
			    handler:function(){
			    	$('#fm').form('clear');
			        $('#dlgBlockRef').dialog('close');
			    }
			}],
        ">
    <form id="fm" method="post" enctype="multipart/form-data" novalidate>
		<div class="fitem" id="bref">
			<input id="block_ref" name="block_ref" label="Block Reference" class="easyui-textbox" labelWidth="200px" style="width:550px; height: 36px; line-height: 36px; padding-bottom: 10px;">
		</div>
		<div class="fitem">
			<input id="order_note" name="order_note" label="Order notes" labelWidth="200px" class="easyui-textbox" style="width:550px;height:150px; line-height: 36px; padding-bottom: 10px;" multiline="true" labelPosition="left">
		</div>
		<HR>
		<div class="fitem">
			<input id="delay_po" name="delay_po" label="Delay Procesing" labelWidth="200px" type="text" class="easyui-datebox" style="width:550px;" data-options="panelWidth:500,panelHeight:500,tooltip:{content:'Leave BLANK to process immediately',position:'bottom'}">
		</div>
		<div class="fitem">
			<label class="textbox-label" style="width: 190px; height: 36px; line-height: 36px;">HOLD Order Indefinitely</label>
			<input id="hold_order" name="hold_order" class="easyui-switchbutton" style="width:179px" data-options="onText:'Yes',offText:'No'">
		</div>
	</form>
</div>

<script type="text/javascript">
function addOrder(){
	var x = ($('#hold_order').switchbutton('options').checked) ? 1 : 0;
	//url: 'new_panel.php?jobid=<?php echo $jobid ?>&blockref='+$('#block_ref').val()+'&delaypo='+$('#delay_po').val()+'&holdpo='+x+'&edit=0',
	$('#fm').form('submit', {
		url: 'new_panel.php?action=1',
		onSubmit: function(param){
			param.edit = 0;
			//param.test = $('#block_ref').val();
			param.test = "testtttt";
			var isValid = $(this).form('validate');
			if (!isValid){
	            $.messager.show({
	                msg:'Block/Section reference required',
	                timeout:4000,
	                showType:'slide'
	            });
			}
			return isValid;
		},
		success: function(data){
			alert(data);
			//data.test = "$('#block_ref').val()";
			var x = ($('#hold_order').switchbutton('options').checked) ? 1 : 0;
			$('#dlgBlockRef').dialog('close');
		    $('#addOrder').panel({
		        title: 'Add New Order',
		        closable: false,
		        fit: true,
		        closed: false,
		        href: 'new_panel.php?action=1',
		    });
		}
	});
};
</script>

new_panel.php

Code:

<?php
$blockRef = mysql_real_escape_string($_REQUEST['block_ref']);
$orderNote = htmlspecialchars($_REQUEST['order_note']);

$delayPO = mysql_real_escape_string($_REQUEST['delay_po']);
$holdOrder = htmlspecialchars($_REQUEST['hold_order']);

$edit = htmlspecialchars($_REQUEST['edit']);
$test = htmlspecialchars($_POST['test']);


$action = htmlspecialchars($_POST['action']);



if($action){
	echo "test" . $test . "<BR>";
	//exit;
} else {


echo "action" . $action . "<BR>";

echo "blockRef" . $blockRef . "<BR>";
echo "orderNote" . $orderNote . "<BR>";
echo "delayPO" . $delayPO . "<BR>";
echo "holdOrder" . $holdOrder . "<BR>";

echo "edit" . $edit . "<BR>";
echo "test" . $test . "<BR>";




$test2 = $_POST['test'];
echo "test2" . $test2 . "<BR>";

}



?>


<a href="#" iconCls="icon-cancel" class="easyui-linkbutton" onclick="closePanel()">Close</a><BR>
<script>
	function closePanel(){
		$('#addOrder').dialog('close');
		$('#dlgBlockRef').dialog('open');
	}
</script>

So, we have the initial form where the user will enter details.
When the form is submitted, the data gets posted (can see this in the alert box)

However, when the "success" is fired, it just loads the new_panel.php page but cannot get any of the posted values.

how do i go about passing those details to the new panel?

No, i am using chrome.

Is there a Firebug alternative for chrome?

hi,

yes, here is the form i use:

Code:

	<form id="fm" method="post" enctype="multipart/form-data" novalidate>
		<div class="fitem" id="bref">
			<input id="ref" name="ref" label="Block Reference" required class="easyui-textbox" labelWidth="200px" style="width:550px; height: 36px; line-height: 36px; padding-bottom: 10px;">
		</div>
		<div class="fitem">
			<input id="note" name="note" label="Notes" labelWidth="200px" class="easyui-textbox" style="width:550px;height:150px; line-height: 36px; padding-bottom: 10px;" multiline="true" labelPosition="left">
		</div>
		<HR>
		<div class="fitem">
			<input id="delay" name="delay" label="Delay" labelWidth="200px" type="text" class="easyui-datebox" style="width:550px;" data-options="panelWidth:500,panelHeight:500,tooltip:{content:'Leave BLANK to send immediately',position:'bottom'}">
		</div>
		<div class="fitem">
			<label class="textbox-label" style="width: 190px; height: 36px; line-height: 36px;">HOLD Indefinitely</label>
			<input id="hold" name="hold" class="easyui-switchbutton" style="width:179px" data-options="onText:'Yes',offText:'No'">
		</div>
	</form>

Hi,

i think im having a bit of a blonde moment.

I have a form that i want to submit and send the data to a panel but i cannot seem to get it to work. I cannot get the data into the panel.

Code:

		$('#fm').form('submit', {
			url: 'new_panel.php',
			onSubmit: function(){
				var isValid = $(this).form('validate');
				if (!isValid){
		            $.messager.show({
		                msg:'Reference required',
		                timeout:4000,
		                showType:'slide'
		            });
				}
				return isValid;
			},
			success: function(){
				var x = ($('#hold_order').switchbutton('options').checked) ? 1 : 0;
				$('#dlgBlockRef').dialog('close');
			    $('#addOrder').panel({
			        title: 'Add New Order',
			        closable: false,
			        fit: true,
			        closed: false,
			        //href: 'new_panel.php?jobid=<?php echo $jobid ?>&blockref='+$('#block_ref').val()+'&delaypo='+$('#delay_po').val()+'&holdpo='+x+'&edit=0',
			        href: 'new_panel.php',
			    });
			}
		});

on the new_panel.php page, we use the following to get the data:

Code:

$varX = htmlspecialchars($_REQUEST['varX']);

what am i missing?

Regards,

Mart