Guriddo » Topic: Send and changing parameter via url

Send and changing parameter via url

Guriddo
datepicker, passing parameters
Send and changing parameter via url

Tagged: datepicker, passing parameters

This topic has 10 replies, 2 voices, and was last updated 11 years, 3 months ago by tony.

Creator

Topic
January 7, 2015 at 11:28 am #115151
wikvip
Participant
Hello
Everyday Im loading to mysql DB almost 2000 row.
I would like to load to jqGrid table only rows from specific date(mostly current date).
I made php code that loading only data from one day, but I would like have also possibility to have load data from different date.
My idea was to send parameter ‘today’ via url, and this is working, but now how to have change this?

JavaScript

jQuery("#page").jqGrid({ url: "test.php?today=2015-01-05", datatype: "json", mtype: "GET",

1
2
3
4

jQuery("#page").jqGrid({
        url: "test.php?today=2015-01-05",
        datatype: "json",
        mtype: "GET",

Can anyone help?
Would be possible do this via ‘Custom Button’?
- This topic was modified 11 years, 3 months ago by wikvip.
- This topic was modified 11 years, 3 months ago by wikvip.
- This topic was modified 11 years, 3 months ago by wikvip.
- This topic was modified 11 years, 3 months ago by wikvip.
- This topic was modified 11 years, 3 months ago by tony. Reason: Use crayon editor to post code
Creator

Topic

Viewing 10 replies - 1 through 10 (of 10 total)

Author

Replies

January 7, 2015 at 3:53 pm #115162

tony

Keymaster

Hello,

Yes this is possible. You can do this using postData parameter and setGrid param.
Suppose you want to load a records fro 2015-01-01 to 2015-01-07 then the code will like:

$("#mybuttonid").click(function() {
    $("#grid").jqGrid('setGridParam', { postData: { fromdate: '2015-01-01', todate: '2015-01-07' } } ).trigger('reloadGrid');
});

$("#mybuttonid").click(function() {

$("#grid").jqGrid('setGridParam', { postData: { fromdate: '2015-01-01', todate: '2015-01-07' } } ).trigger('reloadGrid');

});

At your server you should accept fromdate and todate parameters and return the appropriate records.

Kind Regards

January 7, 2015 at 4:34 pm #115163

wikvip

Participant

Could you please help me with code? Where to add this? And how to sent var ‘date’ to url parameter?
Below I have is my code.
One thing I don’t need range of dates, I want have availability to choose only one date at time.

<script type="text/javascript">
$(function () {
    jQuery("#page").jqGrid({
        url: "get_data.php?today=2015-01-07",
        datatype: "json",
        mtype: "GET",
        colNames: ["A", "B", "C", "D", "E", "F", "G", "H", "I"],
        colModel: [
            { name: "a", index:'a', width: 130, sorttype:'string' },
            { name: "b", index:'b', width: 80, sorttype:'string' },
            { name: "c", index:'c', width: 80, sorttype:'string' },
            { name: "d", index:'d', width: 80, sorttype:'integer' },
            { name: "e", index:'e', width: 80, sorttype:'string' },
            { name: "f", index:'f', width: 70, sorttype:'string' },
            { name: "g", index:'g', width: 200, sorttype:'string' },
            { name: "h", index:'h', width: 250, sorttype:'string' },
            { name: "i", index:'i', width: 70, sorttype:'string' }
        ],
        pager: '#ppage',
		height: 500,
		width: 1450,
        rowNum: 100,
        rownumWidth: 40,
        rownumbers: true,
        rowList : [20,50,100,200,500],
        sortname: 'ID',
        sortorder: "asc",
        viewrecords: true,
        loadonce: true,
        gridview: true,
        autoencode: true,
        jsonReader: {
			repeatitems : false
		},
		viewsortcols: true,
        caption: "XXX"
    });
	jQuery("#page").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
	jQuery("#page").jqGrid('navGrid','#ppage',
	{edit:false,add:false,del:false},
	{},
	{},
	{},
	{multipleSearch:true, multipleGroup:true}
	);

});
});
</script>

$(function () {

jQuery("#page").jqGrid({

url: "get_data.php?today=2015-01-07",

datatype: "json",

mtype: "GET",

colNames: ["A", "B", "C", "D", "E", "F", "G", "H", "I"],

colModel: [

{ name: "a", index:'a', width: 130, sorttype:'string' },

{ name: "b", index:'b', width: 80, sorttype:'string' },

{ name: "c", index:'c', width: 80, sorttype:'string' },

{ name: "d", index:'d', width: 80, sorttype:'integer' },

{ name: "e", index:'e', width: 80, sorttype:'string' },

{ name: "f", index:'f', width: 70, sorttype:'string' },

{ name: "g", index:'g', width: 200, sorttype:'string' },

{ name: "h", index:'h', width: 250, sorttype:'string' },

{ name: "i", index:'i', width: 70, sorttype:'string' }

pager: '#ppage',

height: 500,

width: 1450,

rowNum: 100,

rownumWidth: 40,

rownumbers: true,

rowList : [20,50,100,200,500],

sortname: 'ID',

sortorder: "asc",

viewrecords: true,

loadonce: true,

gridview: true,

autoencode: true,

jsonReader: {

repeatitems : false

viewsortcols: true,

caption: "XXX"

});

jQuery("#page").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});

jQuery("#page").jqGrid('navGrid','#ppage',

{edit:false,add:false,del:false},

{},

{multipleSearch:true, multipleGroup:true}

);

});

</script>

This reply was modified 11 years, 3 months ago by wikvip.
This reply was modified 11 years, 3 months ago by tony.

January 7, 2015 at 6:45 pm #115177

tony

Keymaster

Hello,

Then send only one parameter like this:

$("#mybuttonid").click(function() {
    $("#grid").jqGrid('setGridParam', { postData: { today: '2015-01-01' } } ).trigger('reloadGrid');
});

$("#mybuttonid").click(function() {

$("#grid").jqGrid('setGridParam', { postData: { today: '2015-01-01' } } ).trigger('reloadGrid');

});

Kind Regards

January 8, 2015 at 9:58 am #115179

wikvip

Participant

Hello
How to send this to url parameter?

January 8, 2015 at 10:16 am #115181

tony

Keymaster

Hello,

I think that you will need to read some documentation before to proccess with this.
postData is a grid option (object) which add a parameter to the url. These parameters can be changed in the runtime with java script and are easy to maintained. Please look here what postData option is.

If you prefer the more clear for you way you can use setParam to change the url like this

$("#mybuttonid").click(function() {
    $("#grid").jqGrid('setGridParam', { url: 'get_data.php?today=2015-01-08' } ).trigger('reloadGrid');
});

$("#mybuttonid").click(function() {

$("#grid").jqGrid('setGridParam', { url: 'get_data.php?today=2015-01-08' } ).trigger('reloadGrid');

});

Kind Regards

This reply was modified 11 years, 3 months ago by tony.

January 9, 2015 at 3:25 pm #115219

wikvip

Participant

Ok I solved a problem with variables etc..
But now I have problem with datepicker..
I would like to add new button vi function ‘jqGrid(‘navButtonAdd’…’, and display calendar, select date and assgine selected date to varaibale. It’s possible do like this?

January 12, 2015 at 11:20 am #115245

tony

Keymaster

Hello,

Yes, this is possible. You will need to learn more for datepicker functions and events.
You can do this if you visit jQuery UI Datepicker.
Look at the demos and datepicker events.

Kind Regards

This reply was modified 11 years, 3 months ago by tony. Reason: tipo

January 13, 2015 at 6:22 pm #115282

wikvip

Participant

Can you please show me some example, I’m tring to make working but without a success 🙁

I have additional button

        jQuery("#page").jqGrid('navButtonAdd','#ppage',{
			id:'datepicker',
			caption:'Date',
			title: 'Load data',
			buttonicon:'ui-icon-calendar',
            onClickButton:function()
            {
			.....

			} 
        });

jQuery("#page").jqGrid('navButtonAdd','#ppage',{

id:'datepicker',

caption:'Date',

title: 'Load data',

buttonicon:'ui-icon-calendar',

onClickButton:function()

{

.....

}

});

datepicker outside of jqGrid it’s working, but not in jqGrid..

$("#datepicker").datepicker({
	dateFormat: "yy-mm-dd",
	onSelect: function () {
            selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
    }
	}).datepicker("setDate", "0");

$("#datepicker").datepicker({

dateFormat: "yy-mm-dd",

onSelect: function () {

selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));

}

}).datepicker("setDate", "0");

This reply was modified 11 years, 3 months ago by tony.

January 14, 2015 at 12:18 pm #115289

tony

Keymaster

Hello,

You can build a modal window (using jQuary UI dialog) and attach a input field to its content where a datepicker is used.
Visit the jQuery UI site demos for the modal and datepicker.

After you have this you can simple call the function in navButtonAdd.

Regards

This reply was modified 11 years, 3 months ago by tony. Reason: typo fix

January 16, 2015 at 11:06 am #115346

Send and changing parameter via url

Search Forum

Recent Replies

Forum Statistics

UserOnline