I m having a page with two date fields and a dropdown... based on the values selected from those fields i have to call a server method which fetches the data and then bind the grid.. how is this possible using jquery grid... currently i know that i can call $("#list").jqGrid({}); on a button click which is inside a function... but the problem is that i want to pass additional parameters also...
$(function() {
$('#someButton').click(function() {
// when the button is clicked
// send an AJAX call to the server to fetch data:
$.ajax({
url: '/home/someaction',
data: {
// Use the data hash to send values to the server action
date1: $('#date1').val(),
date2: $('#date2').val(),
ddlValue: $('#ddl').val()
},
success: function(result) {
//TODO: setup jqGrid here based on the results
// returned from the server action
}
});
});
});
Related
I have a GUI with various fields in which user can enter data.
I have a button.
I want to pass values entered by user on the GUI, and on the button click, I want to pass those values to another page where i can use them.
Note: No form/No onSubmit/No form action, it is just a page redirect to another page using a button.
Based on some markup:
<div id="x">Some data</div>
<div id="y">Some more data</div>
jQuery script to retrieve the data you want:
$("my button/link/whatever").click(function(e) {
e.preventDefault();
var data = {
x: $("#x").text(),
y: $("#y").text()
};
var req = $.ajax({
url: "the page to send data to",
type: "post",
data: data
});
req.done(function(response) {
// Do something here once the request is complete
});
});
Or use a second form.
I have seen form file upload example in ExtJS4 and i need customize progress of the file upload.
I see waitMsg config property, but i don't want use that and i don't want use extjs 3rd party plugins.
So, how i can get simply current upload progress from upload form in extjs?
The waitMsg uses a message box with an infinitely auto-updating progress bar. So you can't just create a progressbar that displays the current upload.
You could create your own Ext.ProgressBar and estimate the upload time and when its done you set it to the max value. But I guess you don't want that.
To answer your question: You cannot simply track the current upload progress.
If you really need this user experience you can try a 3rd party component.
To quote the docs:
File uploads are not performed using normal "Ajax" techniques, that is
they are not performed using XMLHttpRequests. Instead the form is
submitted in the standard manner with the DOM element
temporarily modified to have its target set to refer to a dynamically
generated, hidden which is inserted into the document but
removed after the return data has been gathered.
To show real progress you can use onprogress callback of XMLHttpRequest:
Ext.override(Ext.data.request.Ajax, {
openRequest: function (options) {
var xhr = this.callParent(arguments);
if (options.progress) {
xhr.upload.onprogress = options.progress;
}
return xhr;
}
});
Then use like here:
Ext.Ajax.request({
url: '/upload/files',
rawData: data,
headers: { 'Content-Type': null }, //to use content type of FormData
progress: function (e) {
console.log('progress', e.loaded / e.total);
}
});
See online demo here.
buttons: [{
text: 'Upload',
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '/upload/file',
waitMsg: 'Uploading your file...',
success: function (f, a) {
var result = a.result,
data = result.data,
name = data.name,
size = data.size,
message = Ext.String.format('<b>Message:</b> {0}<br>' +
'<b>FileName:</b> {1}<br>' +
'<b>FileSize:</b> {2} bytes',
result.msg, name, size);
Ext.Msg.alert('Success', message);
},
failure: function (f, a) {
Ext.Msg.alert('Failure', a.result.msg);
}
});
}
}
}]
Live demo with progress window is here
I am new for extjs.
I am having one store in which i am having some data coming from json file.
I have created a form.
i want to save new data in that store through form.
How can I create button and submit form on that button's click?
please let me know.
Thanks in advance
If you're using ExtJS 4 and your form is bound to a 'model' instance, then you get get a reference to your model in your buttons click handler and call:
model.save();
Which will send a post request to the url defined as the proxy on the model class.
Post your code and perhaps we can be some more direct help.
In the API of ExtJS is a good example on how to create a Ext.form.Panel with a button. When you click on this button the form gets submitted.
This example doesn't work because it doesn't submit to a page but it is very configurable.
Snippet of the button+handler:
buttons: [{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '', //this is the url where the form gets submitted
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}]
I'm investigating the suitability of the jQM history management for my organization's mobile web site. Part of our requirement is that when a user posts a form, it posts using Ajax. When a user taps "back" and then "forward" browser buttons, we need to re-post the form using Ajax again. Here's a diagram:
[home.php: post to new.php] =>
[new.php: post to list.php] =>
[from list.php, click back twice to home.php] =>
[* home.php: click fwd, does a GET request to new.php *] =>
[* new.php: click fwd, does a GET request to list.php *]
[*] not the behavior I want. I want to re-POST data from steps 1 and 2
During steps 4 and 5, I want to intercept the jQM execution at the "pagebeforeload" event (seems like the right place), and modify the data.options.data (to include the serialized post data) and data.options.type (to POST) properties of the data object which is passed to the event handler. Then I'd let the pageload process move on with the modified values. This, I think, would give me the behavior I want.
So far, I see that I can intercept the pagebeforeload event and modify the values with the below event handler:
$(document).bind("pagebeforeload",
function( e, data ) {
console.log(data.toPage);
console.log(data.options);
data.options.type = "POST";
data.options.data = "edit=Hanford";
}
);
But the missing piece is, how can I "store" the information in steps 1 and 2, such that when I intercept the pagebeforeload event in 4 and 5, I can know to modify the "type" and "data" properties properly.
I've made a jquery/browser History prototype to illustrate the behavior I would like to get from jQuery Mobile. The JavaScript is:
$(window).load(function() {
//listen to the history popstate event
$(window).bind('popstate',
function(e) {
if (e.originalEvent.state && e.originalEvent.state.type && e.originalEvent.state.type == "post") {
//do an ajax post based on what is stored in history state
$.post(e.originalEvent.state.path,
e.originalEvent.state.data,
function(data) {jaxer(data,'POST')});
} else if (e.originalEvent.state !== undefined){
//do an ajax get
$.get(location.pathname,
function(data) {jaxer(data,'GET')});
}
});
//add event listeners
addClickHandler();
});
function jaxer(data, msg) {
if (msg) {console.log(msg+' request made using ajax');}
$('#slider')[0].innerHTML = data;
addClickHandler();
}
//hijax hyperlinks and form submissions
function addClickHandler() {
$('a').click(function(e) {
history.pushState({
path: this.path
},
'', this.href);
$.get(this.href,
function(data) {jaxer(data,'GET')});
e.preventDefault()
});
$('form').submit(function(e) {
var formData = $(this).serialize();
console.log('saving serialized form data into historyState: '+formData);
history.pushState({path: this.action, data: formData, type: "post"},'',this.action);
$.post(this.action,
$(this).serialize(),
function(data) {jaxer(data,'POST')});
e.preventDefault();
});
//add the form submit button to the form as a hidden input such that it will get serialized
$('form input[type="submit"]').click(function() {
$(this.form).append("<input type='hidden' name='" + this.name + "' value='" + this.value + "'/>");
});
console.log("event handlers added to DOM");
};
When a user-initiated POST occurs, I put the serialized POST data into the history's state object. Then, when a popstate event occurs, I can query the state object for this information. If I find it, then I can perform an ajax POST. I would like to get the same functionality within the jQuery Mobile history handling. That way I can take advantage of the page change animations, etc.
I'm trying to manipulate forms with Mootools. My purpose is to inject the response content of a form into a div element named result.
Here a code that works, but it replaces the content of the result div. This is not what I want : I want to ADD the form response content to the result div existing content. I just can't find on the web how to do this, and I've tried many things that are not working ... Please help
window.addEvent('domready', function() {
$('myform').addEvent('submit', function(e) {
e.stop();
var result = $('result').empty();
this.set('send',{
url: this.get('action'),
data: this,
onSuccess: function() {
result.set("html", this.response.text);
}
}).send();
});
});
If it's only text you want to add, just remove the empty method, and replace result.set() with result.appendText().
If you need to append an element tree, repeat the first step, and do:
onSuccess: function(){
Elements.from(this.response.text).inject(result);
}
Btw. It's all in the documentation - http://mootools.net/docs/core/Element/Element