This might be an impossible question to answer but i will try to provide you with a lot of information so that you might know the problem and maybe you have had the same problem before.
I have a form that i serialize with this method:
//Sends a serialized string with all form keys from DementiaPrototype to RiskScore-view
$(document).on("click", "#btnsubmit", function () {
if (validateForm() == true) { //a method for validating the form
if (validatepersonid() == true) { //a method for validating the form
if(validatenr() == true){ //a method for validating the form
$("#PersonBMI").removeAttr('disabled');
$.ajax({
url: "/Home/RiskScore",
type: "post",
data: $("form").serialize(),
success: function(result) {
$('.content-wrap').html(result);
//calls the functions that animates the thermometer on page loaded
countScore();
countScores();
}
});
}
}
}
});
the two methods after sucess countScore(); and countScores(); will take lot's of input values and from the form and do some calculating and then show it in a thermometer on the next page. They booth look almost the same except some different use of textboxes. The problem is that countScores() does what it should but i can't debugg it. countScore() does nothing and i can't debugg that either. The way i can't debugg it is that it just don't use the method and don't go through my debuggs. It's very strange and i just can't solve the problem :S No one on my company knows what is going on. I have deleted all cache so that can't be the problem(If it could have been).
Make sure you cancel the default action of the form to prevent the browser from redirecting away:
$(document).on("click", "#btnsubmit", function (e) {
e.preventDefault();
... your code comes here
});
Related
UPDATE
Added this error, just says "Error caught"
<script type="text/javascript">
window.onerror = function() {
alert("Error caught");
};
xxx();
</script>
This is not working, I don't understand why.
My php script inserts data properly if called by itself without an if{method=post} statement
I tried with and without an if method = post argument on the php side to get the ajax below to work but I can't tell if the script is being called at all.
My aim is to submit the data without the user knowing, it's a coordinate / dimension update for a variable design interface.
This is my ajax insert which is supposed to work when a function is invoked after the stop is triggered eg. after an object is done moving which the function is invoked properly as I have set up sequential alerts to pop up after certain lines.
$("#form").submit(function(event){
event.preventDefault();
var $form = $( this ),
url = $form.attr( 'action' );
var posting = $.post( url, {
id: $('#id').val(),
name: $('#name').val(),
wname: $('#wname').val(),
xcor: $('#xcor').val(xcor),
ycor: $('#ycor').val(ycor),
xwid: $('#xwid').val(xwid),
yhei: $('#yhei').val(yhei),
photo: $('#photo').val(),
targeturl: $('#targeturl').val()
});
posting.done(function( data ){
alert('success');
});
});
This is wrong
xcor: $('#xcor').val(xcor),
ycor: $('#ycor').val(ycor),
xwid: $('#xwid').val(xwid),
yhei: $('#yhei').val(yhei),
Those object are holding jQuery objects, not a value.
Looks like you want to set the value and use the new value. This makes me cringe, but it would do the job
xcor: $('#xcor').val(xcor).val(),
ycor: $('#ycor').val(ycor).val(),
xwid: $('#xwid').val(xwid).val(),
yhei: $('#yhei').val(yhei).val(),
You would be better off updating them before the call and just using the variable when setting the object. Or just use jQuery serialize() and don't deal with grabbing the elements.
I have a form, bunch of inputs and submit button. Some of the inputs are added and deleted dynamically. And some of them may be (or may not) disabled but I still need to get their values of the server.
So I have to add a handler to the button and collect the values of the disabled inputs manually and add them up to other, enabled. inputs. But I'd like not to go that way as it seems too complex (since some of the inputs are added / removed dynamically).
I can also add hidden inputs for each inputs which can be disabled but still it's a bit complex.
What I want is similar to 1. But instead of manually enumerating the enabled inputs by jquery selectors, I want to just get all values are being sent to the server at once by some jquery function maybe or by any other way. And then manually (by selectors) add up the values from the disabled inputs to them. Is this possible?
You could use the jQuery .serialize() for that.
The general structure of the function would look something like this
var mydata = $("#myform").serialize();
$.ajax({
type: "POST",
url: "ajaxurl",
data: mydata,
dataType: "json",
success: function(data) {
...
}
});
So I just figured you had a problem of how to get the disabled fields as well. You could use the function suggested in this thread:
Disabled fields not picked up by serializeArray
Just to make the answer complete, I will copy the plugin from there.
The usage is like this:
var data = $('form').serializeAllArray();
And here's the plugin itself:
(function ($) {
$.fn.serializeAllArray = function () {
var obj = {};
$('input',this).each(function () {
obj[this.name] = $(this).val();
});
return $.param(obj);
}
})(jQuery);
You could use a strategy like the following in your submit handler:
Select all disabled elements .. (don't lose the reference to these)
Enable all disabled elements
Serialize the form .. to get all the data
Disable the elements back
Submit your form.
I have a web page with an iFrame. It loads a web page (same domain) with a jqGrid table. What I'm trying to do now is:
You press a link called search it opens a dialog with a filter form to filter your search.
When you press search button inside the dialog, it changes jqGrid url param and it should .trigger('reloadGrid').
It does all except the reloadGrid, I don't know why.
Any suggestion?
Code:
// DIALOG-ACTION-SEARCH IS THE BUTTON CLASS
$('#dialog').find('.dialog-action-search').button({icons: {
primary: 'ui-icon-search'
}, text: true}).click(function(e) {
e.preventDefault();
$('.content-center').contents().find('#list').setGridParam({
url: 'filteredsearch.html?option=1'
}).trigger('reloadGrid');
$('#dialog').dialog('destroy');
$('#dialog').remove();
});
setGridParam returns a jqGrid object, not a jQuery object, so I'm pretty sure you can't chain the trigger method. Try this instead:
var list = $('.content-center').contents().find('#list')
list.setGridParam({
url: 'filteredsearch.html?option=1'
})
list.trigger('reloadGrid');
I've found that before calling trigger('reloadGrid') with JSON data, you should reset the datatype parameter.
$("#grid").jqGrid('setGridParam', { datatype: 'json' });
In response to your comments, I would split up the chained method calls and then put a breakpoint on e.preventDefault() in Chrome debugger so you can assure that everything is actually getting hit.
$('#dialog').find('.dialog-action-search').button(
{
icons: { primary: 'ui-icon-search' } ,
text: true
});
$('#dialog').find('.dialog-action-search').click(function(e) {
e.preventDefault();
var grid = $('.content-center').contents().find('#list');
$(grid).jqGrid('setGridParam', { url: 'filteredsearch.html?option=1' });
$(grid).jqGrid('setGridParam', { datatype: 'json' });
$(grid).trigger('reloadGrid');
$("#dialog").dialog('destroy');
$("#dialog").remove();
});
While I'm a fan of chaining when you can, in this case I don't think you're going to find the root of the issues without doing things a little more explicitly, especially when using .find. How do you know that the .find is actually returning the element that you want?
I experienced same problem. I did not have time to investigate why it was happening but found a workaround for it.
In a javascript file that loads inside iframe with your grid I declared
window.top.reloadEventList = function () {
$("#grid").trigger("reloadGrid");};
Then just call
window.top.reloadEventList()
instead of
list.trigger('reloadGrid')
I'm working on a site that allows users to love an item (like an item). The event is handled with jQuery and AJAX. The item array holds quite a lot of items and each item has a button to 'love'. I decided to efficiently reduce the number of forms on the page by putting one form at the bottom of the page and just submit it remotely.
So every time a user clicks the love button, the data attribute that holds the item id is put into the form and the form is submitted. Simple stuff.
But I'm finding the data response a bit more complex because I don't know how to find the element id of the item I want to update. I can't just use this or event.target because its inside a different event. I've also tried to carry the event parameter into the submit event, but it didn't work.
$(".love_item").click (event) ->
$(".love_item_item_id").val $(this).data 'id'
$(".love_item_form").submit()
$(this).hide(200)
$("form.love_item_form").submit (evt) ->
evt.preventDefault()
$form = $ #
$form.find(':submit').prop 'disabled', true
$.post($form.attr('action'), $form.serializeArray(), type: 'json').done (data) ->
$(event.target).parent().find(".item_info_box").html data
The last line, where it says event.target is as far as I've got. Its obvious that this variable is not carried, but I don't really know what to place there to achieve my goal. Also, I know that I could pass additional parameters through the form action (in other words send them to the rails controller and back), but I'd rather not. Any ideas?
You don't need an abitrary form at all. Something like this would work:
Example Markup (notice the data attribute):
Item to like
jQuery:
$('a.likeable').on('click', function() {
var $item = $(this);
var id = $item.data('id');
$.post('url/like/' + id, function() {
// success
// do something with $item here.
});
});
If you have an element like this: <div id="foo" data-id="foo1234">Foo</div>
You can select it after your ajax post like this, assuming you still have the ID of foo1234:
$('[data-id="' + id + '"]').doSomething();
Just use jQuery's ajax functionality
$('.love_item').on('click', function(e) {
$.ajax({
type: 'POST',
url: *insert url here*,
data: 'id=' + e.currentTarget.data-id,
success: function(response) {
var element = e.currentTarget;
// do whatever
}
})
});
Hey guys i have looked as much as i could and i could not find an answer, i am creating an admin interface that has forms all over the place and i would like to use the same jquery code for all of them, i have some code that is getting the job done but i would like to know if there is a more efficient way to do it. here is the code
function submitForm( formname )
{
$.ajax
({
type:'POST',
url: 'session.php',
data: $(formname).serialize(),
success: function(response)
{
if( $('#message_box').is(":visible") )
{
$('#message_box_msg').html ('')
$('#message_box').hide();
}
$('#message_box').slideDown();
$('#message_box_msg').html (response);
}
});
return false;
}
Now my forms look something like this:
<form id="adminForm" action="session.php" method="post" onsubmit="return submitForm('#adminForm');">
Now my question is... is there a simpler way to do this, like without having to provide the submitForm() function with the form id every time?
Thanks in advance!
You may want to delegate a handler to document or other permanent asset in the page(s) to account for any ajax loaded forms. This will replace your inline onsubmit
$(document).on('submit','form', function(){
var allowSubmit=false,
noSubmitMessage="Can't submit", /* can change message in various places in following code depending on app*/
$form=$(this);/* cache jQuery form object */
if( $form.hasClass('doValidation')){
/* class specific code to run*/
allowSubmit = validationFunction();
}
if( allowSubmit){
var data=$form.serialize()
/* do ajax*/
}else{
/* user feedback*/
alert( noSubmitMessage);
}
return false;
});
Yes, define a common class for all your forms, and use
$(".form_class").submit(function() {
//stuff that gets executed on form submission ...
return result;
})
And dump the inline "onsubmit". It's also cleaner to do this in general, as it separated view from behaviour.