Trying to use phantomjs to do a query on a form that has a text field with name "category" and a button with value "search", the following script will cause the button to be pressed, which triggered a POST message to be sent. However, in the POST message, I don't see the value for category.
var page = require('webpage').create();
page.open('http://www.example.com', function() {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
page.evaluate(function() {
$('input[name="category"]').value = "tmp1";
console.log($('input[name="category"]').value);
$('input[value="search"]').click();
});
//phantom.exit()
});
});
If I do the following two lines on chrome browser developer console manually, the HTTP POST message sent does contain the right value for category field. Any idea what went wrong?
Thanks.
$('input[name="category"]').value = "tmp1";
$('input[value="search"]').click();
Use .val() to update the value of a form field with jQuery.
$('input[name="category"]').val("tmp1");
The problem is that $('input[name="category"]') returns a jQuery node list (like an array). So you need to select the first one to access the value attribute:
$('input[name="category"]')[0].value = "tmp1";
console.log($('input[name="category"]')[0].value);
The change is [0].
Related
I have this function that should submit the serialized values from my form.
Using document.getElementById(form_id) I get the correct form and values, if I serialize this form with data = $(form).serialize(); the values are not correct.
The answers ot other questions suggest the name or the field being disabled being the cause, but that is not the case here.
Here my function with the results form the console.log.
var submit_form = function(form_id){
form = document.getElementById(form_id);
console.log(16, form);
data = $(form).serialize();
console.log(17, data);
url = "/routmeda/checklist/" + form_id
$.post( url, data, function( data ) {storeLogo.reload();} );
}
The checkbox "aanvraagformulier" is unchecked.
Here the output on the console from line 16, correct
And here from line 17, serialize says the checkbox is on, which is the situation when the form was loaded.
How do I get the correct serilization ?
I solved it by destroying the ExtJs window in which the form was displayed, it seems like the close button on this windows didn't do that before.
The document.getElementById(form_id); gave the value of the current window/form while jQuery's selector gave the ghost version of that window/form.
I didn't think it was a ExtJs problem otherwise I would have included that in my question. Thanks for the suggestions.
I am trying to refresh the page while pass an array from an onclick button.
Since I am using yii, posting isn't an option, and setting a session variable wasn't working. Any ideas would help. Thank you
<a style="width:100%;" onclick="my_picks_reset()" id="my_picks_reset">Reset</a>
<script>
$(function() {
/*set var picks = array of TBA and reset th my_picks div*/
$("#my_picks_reset").click(function() {
var my_picks = ['TBA','TBA','TBA','TBA','TBA','TBA','TBA','TBA'];
var url = document.URL;
$(location).attr('href',url,'my_picks',my_picks);
})
})
</script>
It seems from your comments that you're expecting POST request. Changing location of the page will give you GET request. So you have two options here:
1) Continue using location and read the the values from $_GET variable.
If you decide to use this option your need loop through my_picks array and construct the query string that would look like that:
?my_picks[]=arrayValue1&my_picks[]=arrayValue2... and do location.assign(currentLocation + composedQueryString)
2) The second better solution is to use $.ajax() to send values with post method.
I have an HTML form to update the address in the account that submits to a Java servlet.
The problem is that, the form should not accept free flowing address text. Instead the user should enter the zip code/house number/street name, and hit a search button.
This search needs to go to a webservice, perform authentication and get a list of valid addresses that match the search criteria.
This list of addresses should be displayed to the user in the same form (either unhide a hidden element or use a modal dialog), so the user can pick his address.
Only after the valid address is picked, the user should be able to hit the form submit button which sends the data back to the servlet.
I am not sure how to have these 2 buttons do different actions in the form. I am very new to JavaScript and any pointers or examples are much appreciated.
For your webservice build an output of the values based on a search result (a basic string). Put this data in a JSON statement or just a javascript array.
Return something that looks like this.
['SearchResult1', 'SearchResult2', 'SearchREsult3']
On your search box. Bind a function on change or blur.
$('#SearchBox').bind('change', function(){
var val = $(this).val();
//Please reference the Jquery Ajax function as im typing this from memory and i always mix one or two things up :).
$.ajax({
"type" : "post",
"url" : "yoururlhere",
"data" : { "search":val },
success : function(dataset){
//When it comes back here check to see if its valid data etc etc
//After you validate you can populate a picklist on the page with the values. Or do anything you want with the values like this
for(x in dataset){
$('#DocumentElement').append('<p>'+ dataset[x] +'</p>');
}
}
});
});
This should start you out. After that you can just do more things on the callback, or modify the dom in a way which suits you better :).
I am following this tutorial here http://www.trirand.com/blog/jqgrid/jqgrid.html in
LiveDataManipulation->EditRow
My grid receive data from script a.php. After the user can modify this data by the jqGrid.
jqGrid after the modification data will send data to script B.php that update my database and return a message of response like "all goes well".
I want that this response is alerted or showed to user somewhere on the page.
Reading the tutorial and here http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing I think that I've to use afterSubmit option, but I haven't understood how print on the edit panel the result.
I have written:
$("#editImpresa").click(function(){
var gr = jQuery("#tabImprese").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#tabImprese").jqGrid('editGridRow',gr,{
height:690,
width:500,
closeAfterEdit : true,
reloadAfterSubmit:false,
afterSubmit: function(response,postdata){
if(response.responseText=="ok")
success=true;
else success = false;
return [success,response.responseText]
}
});
How can I do it?
Thanks.
First of all the option closeAfterEdit:true follows to closing of the edit form after the successful server response. You should change the setting to the default value closeAfterEdit:false to be able to show anything.
Next I would recommend you to use navigator toolbar instead of creating a button after outside of the grid. In the case you can use
var grid = jQuery("#tabImprese");
grid.jqGrid('navGrid','#pager', {add:false,del:false,search:false}, prmEdit);
One more good option is to use ondblClickRow event handler
ondblClickRow: function(rowid) {
$(this).jqGrid('editGridRow',rowid,prmEdit);
}
(see here) or both ways at the same time.
In any way you have to define the options of editGridRow method (the prmEdit). It's important to know that afterSubmit will be called only if the server response not contains error HTTP status code. So you should use errorTextFormat to decode the error server response. The afterSubmit event handler you can use to display status message.
In the demo I used only errorTextFormat to demonstrate both displaying of the status and error message:
The status message goes away in 3 seconds:
The corresponding demo you will find here.
In real example you will of cause place the code writing status message inside of afterSubmit event handler and the code which returns the error message inside of errorTextFormat.
I have two list boxes. One is populated on Page_Load and the other remains empty.
The user has buttons for adding users from the first list to the second list and back.
When the form is submitted, the second list is empty, like it was when it was sent to the client. Here is the JS code:
function add() {
$('#AvailableUsers option:selected').appendTo('#SelectedUsers');
}
function addall() {
$('#AvailableUsers option').appendTo('#SelectedUsers');
}
function remove() {
$('#SelectedUsers option:selected').appendTo('#AvailableUsers');
}
function removeall() {
$('#SelectedUsers option').appendTo('#AvailableUsers');
}
How do I bring the client-side changes back to the server side?
Edit: Code for server-side:
bool canDismiss = chkCanDismiss.Checked;
string messageText = tbMessageText.Text;
PaymentsDataContext db = new PaymentsDataContext();
foreach (ListItem li in SelectedUsers.Items)
{
UserMessages newMessage = new UserMessages();
newMessage.userName = li.Text;
newMessage.messageText = messageText;
newMessage.dismissed = false;
newMessage.canDismiss = canDismiss;
db.UserMessages.InsertOnSubmit(newMessage);
}
db.SubmitChanges();
You have to append/store those items in the hidden field as well, then you can get the items from the hidden field on the server side.
This is because the changes you made at client side are not available on the server side.
If I read correctly you are trying to use the Users in "Selected Users" Server side. I would have an on form submit client side event that selects all the users in the SelectedUsers list. This eliminates the need for a hidden variable. NOTE use the following in conjunction with your existing jQuery
$(document).ready(function(){
$(form).submit(function(){
$('#SelectedUsers option').attr("selected","selected");
return true;
});
});
EDIT In response to comment: When the selected users control is originally loaded on the page there are no items and nothing selected. With your current code, options are added to the selected users list, on the client side. Currently when the form is submitted these values are not selected and therefore not posted back to the server. To post the values back to the server they need to be selected first. What the above code should do is select the users options in the SelectedUsers list and post the selected values, with the rest of the form, back to the server when the form is submitted.
Edit 2, Server Side Code: You may need to access the values via the Request.Form object. With multiple controls like multiple select boxes, multiple values are passed as a comma separated string.
string rawSelUsers = Request.Form[SelectedUsers.ClientID];
You can the perform a split on this string to break it into an array if needed.