in my rails app, I have a select field by itself in a form. When the field changes I would like it to submit the form, and remotely retrieve the results.
Here is my current code (EDIT - this part works, I'm trying to add more to it):
$(function() {
$("#statusFilter").live("change", function() {
this.submit();
});
});
In a different part of the app I have the following, for a hyperlink, when clicked, returns the link remotely. So I'd like the same effect for the above form.
$(function() {
$("#posts_container th a").live("click", function() {
$.getScript(this.href);
return false;
});
});
here is another example of how it works with a search form
$("#dash_search input").keyup(function() {
$.get($("#dash_search").attr("action"), $("#dash_search").serialize(), null, "script");
return false;
});
The content I'm trying to remotely refresh lives in the posts_container
I personally wouldn't use a form around the select field in this instance if you are not using the form to house any other form elements.
From what you have said it looks like you are trying to achieve the following:
A user changes the select field.
The new value in the select field is then used to update the posts_container field.
If I have this correct I would code the following:
Select Field
<div>
<select id="statusFilter">
<option value="1">Option 1</option>
<!-- Other options... -->
</select>
</div>
JavaScript
<script type="text/javascript">
$(document).ready(function() {
$("#statusFilter").change(function() {
// Possibly show an ajax loading image $("#ajax_loading").show();
$("#posts_container").load("somepage.php", { value: $(this).val() }, function() {
// Do something to say the data has loaded sucessfully
// Possibly hide the ajax loading image $("#ajax_loading").hide();
});
});
});
</script>
I don't know if that helps or is on the right lines, but let me know and I will try and help further if not.
Try this
$(function() {
$("#statusFilter").live("change", function() {
//$(this).closest("form").submit();
var $form = $(this).closest("form");
$.post( {
url: $form.action,
data: $form.serialize(),
success: function(){ //Write code here to handle on success }
});
});
Related
When I add the ajax it only runs once.
I try that when I enter a letter in the search engine or change a select field, it sends me the new search to display it on the screen.
formMenu is a form containing a select and an imput text.
$('#formMenu').on('keyup change',function() {
$.ajax(
{
url: '/calendar',
success: function( data ) {
$('body').html(data);
}
}
);
});
You can Try using the below.
$(document).on('keyup change', '#formMenu', function() {
// Your Ajax Call here
})
You instance of #formMenu is not existing after you replace the body even if the same element exists in the new body its still a different instance.
You have to register the listener on the highest parent that is not replaced (in this case the body):
$("body").on("keyup change", "#formMenu", function() {
//ajax call
});
I have two pages, on the first page you can select an item with a <select> </select>. When you select an item, a form is automatically displayed through an AJAX Call. In this form, data is automatically loaded from a mysql db in a <textarea> </textarea>. The moment you submit your form, I want the new data to be added to the <textarea> </textarea> I just can't manage this, who can help me?
$(document).ready(function () {
$("#btnAdd").click(function (e) {
/* Retrieving value from textboxes */
var besproken = $('#besproken').val();
$.post("save.php", {
besproken: besproken,
}, function (data) {
$("#autoSave").html("Coaching ");
$("#btnAdd").attr("disabled", true);
});
return false;
});
});
If all you want to do is insert the data into the textarea just use jQuery to selected the element $("textarea") then call the text method and pass in your data .text(data). The result call will look like $("textarea").text(data)
$(document).ready(function() {
$("#btnAdd").click(function(e) {
/* Retrieving value from textboxes */
var besproken = $('#besproken').val();
$.post("save.php", {
besproken: besproken,
}, function(data) {
$("#autoSave").html("Coaching ");
$("#btnAdd").attr("disabled", true);
$("textarea").text(data);
});
return false;
});
});
You can take a div. When you click submit you will get a ajax response, load this inside the div.
success: function(data){
$("#status").load("url of the php-file");
or
$("#status").html(data);
}
I have a form, where the user fills in their details and can check, if the billing details are the same. In that case the same data gets copied to the billing section. The script for this works just fine.
However, in case the user clicks accidentally, the data should get deleted after clicking on the checkbox "billing info is different". I'm using a similar script, but instead of copying, I'm trying to add val(""). Could you please suggest, what I'm doing wrong?
Copy script:
jQuery(document).ready(function($) {
$('input#choice_2_42_1').click(function() {
if($(this).is(':checked')) {
$('#input_2_35').val($('#input_2_9').val());
$('#input_2_36').val($('#input_2_10').val());
$('#input_2_37').val($('#input_2_4_1').val());
$('#input_2_38').val($('#input_2_4_3').val());
$('#input_2_39').val($('#input_2_4_5').val());
$('#input_2_40').val($('#input_2_33').val());
$('#input_2_41').val($('#input_2_34').val());
};
});
});
Erase code:
jQuery(document).erase(function($) {
$('input#choice_2_20_1').click(function() {
if($(this).is(':checked')) {
$('#input_35').val("");
$('#input_36').val("");
$('#input_37').val("");
$('#input_38').val("");
$('#input_39').val("");
$('#input_40').val("");
$('#input_41').val("");
};
});
});
If you see, on the copy code, you have id's like this
#input_2_35
#input_2_36
and on the erase, you have different id's
#input_35
#input_36
just change your erase code to fit the id's
jQuery(document).erase(function($) {
$('input#choice_2_20_1').click(function() {
if($(this).is(':checked')) {
$('#input_2_35').val("");
$('#input_2_36').val("");
$('#input_2_37').val("");
$('#input_2_38').val("");
$('#input_2_39').val("");
$('#input_2_40').val("");
$('#input_2_41').val("");
};
});
});
Move the content of the erase function into the ready function and then it should works.
Look at the example here
$(document).ready(function() {
$('#check').click(function() {
if($(this).is(':checked')) {
$('#text2').val($('#text').val());
};
});
$('#check2').click(function() {
if($(this).is(':checked')) {
$('#text2').val('');
};
});
});
this is my server-side code:
modify_emp.php
<?php
echo $_POST[id];
?>
And this is my Javascript in my html page:
<script>
$(document).ready(function () {
var alreadyClicked = false;
$('.element').hover(
//mouseenter function
function(){
$('.element').click(
function(){
$(this).css("color","blue");
var objName = $(this).attr('name');
var objColumn = $(this).attr('id');
if(!alreadyClicked){
alreadyClicked = true;
$(this)
.prepend('<form method="POST" class="newInput"><input type="text" name="newInput" style="width:140px"></input></form>');
var elemento = $(".newInput");
var position = elemento.position();
$(".newInput").css({
'position': 'absolute',
'top': position.top + 15,
'opacity':0.9,
'z-index':5000,
})
.focus();
//on enter keypress
$(document).keypress(function(e) {
if(e.which == 13) {
$.ajax({
url: 'modify_imp.php',
type: 'post',
data: { id : objName, column : objColumn },
success: function(data, status){
$("#debug").html(data);
}
});
}
});
} //if (!alreadyClicked) end
}); //end mouseenter function
},
//mouseleave function
function () {
alreadyClicked = false;
$(this).css("color","red");
$(".newInput").remove();
}
); //end .hover
});
The debug is a <div id="debug"> </div> at the end of my html page where i want to show my response from server. When i press 'ENTER' I can actually see the value for 0.1s inside that div, but then it disappears.
I already tried to pass the return value to a local or global variable but it didn't work.
For some reason the value inside response is lost after 0.1s, even if i pass it to another variable elsewhere.
Can someone explain me why and how can i "store" the server response?
EDIT: Just edited with my entire <script>
Since you see the result momentarily, I'm going to hazard a guess that you have a form element on your page and when you hit return, it's actually submitting the form. You briefly see the result of the ajax operation and then your form submits causing the page to reload as a new blank page. This is a common issue and always has these same symptoms.
You can either remove the form element or block the default submission of the form with javascript.
If you show us more of your actual HTML, we could help more specifically with how to prevent the form from submitting.
You can solve this by calling the function in the form tag i.e,
<form action="javascript:AnyFunction();">
your code goes here
.
Another way would be to assign a BUTTON to trigger the ajax, and set the button outside of the FORM
I have a blockUI plugin for jquery through which i call another php file in a overlaid box. I want to activate the function through more than one button of same id(here it is pageDemo1). But when i do so, only one button works while all other don't.Can anyone explain why is it so? and what should i do to make it work?
$(document).ready(function() {
$('#pageDemo1').click(function() {
$.blockUI({ message: $('#domMessage') });
test();
});
$('#submit').click(function() {
var action = $("#form1").attr('action');
var form_data = {
message: $("#message").val(),
is_ajax: 1
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'success')
$("#form1").slideUp('slow', function() {
$("#message").html("<p class='success'>message</p>");
});
else
$("#message").html("<p class='error'>message</p>");
}
});
return false;
});
});
On first look dont use html elements with the same id. you can attach your events on elements with the same class, name etc.
Are you saying that you have two elements (buttons) with the same ID? If so, this is not valid HTML (See W3C standards). You could try using a class instead. Also remember you can use multiple classes to still keep the buttons unique in some way. E.g.
<input type="button" class="pageDemo pageDemo1" value="My Click does this"/>
<input type="button" class="pageDemo pageDemo2" value="My Click also does this/>
Then to access these in your JS:
$('.pageDemo').click(function() {
// Put code here which should happen when either of your elements with class 'pageDemo' get clicked
});
$('.pageDemo.pageDemo1').click(function() {
// Put code here which should only happen when elements with 'pageDemo1' class get clicked
});