I'm using this to submit values from a single form when a checkbox is clicked. The form is called my-form.
$( '#my-form input[type=checkbox]' ).click( function() {
$.post(
'form.php',
$( '#my-form' ).serialize(),
function( response ) {
$( '#my-form #form-response' ).html( response );
}
);
} );
This is working fine for one form. But I'd like to have other forms, maybe 10 on the same page and re use this code.
I understand each form has to have a unique ID, but how do I submit just that form, not any of the others ?
Thanks :)
give all of your forms same class and do it like this
$( '.my-form input[type=checkbox]' ).click( function() {
var CurrectForm=$(this).parents('.my-form:first');
$.post(
'form.php',
CurrectForm.serialize(),
function( response ) {
CurrectForm.find('#form-response').html( response );
}
);
} );
my-form is the class name for all forms.
You could change the ids to classes, and just submit the parent form of the checkbox, like so:
$( '.my-form input[type=checkbox]' ).click( function() {
var $my_form = $(this).closest('.my-form');
$.post(
'form.php',
$my_form.serialize(),
function( response ) {
$( '.form-response', $my_form ).html( response );
}
);
} );
Related
I have 2 php pages, one has jquery and post function, after i post, it returns result in a div, but in this div has its own jquery functions and they are not working properly.
$( "#home" ).click(function() {
$.post( "processor.php",{
home: "home"
}, function( data ) {
$( "#main" ).html( data );
}
);
});
data has jquery scripts and they are not working on the first page
Or you can rebind on success:
function bindEvent() {
$( "#home" ).off('click').on('click', function() {
$.post("processor.php",
{
home: "home"
},
function( data ) {
bindEvent();
}
);
});
}
bindEvent();
You have to eval your response scripts:
$( "#home" ).click(function() {
$.post("processor.php",
{
home: "home"
},
function( data ) {
$( "#main" ).html( data );
$( "#main" ).find("script").each(function(i) {
eval($(this).text());
});
}
);
});
How to display database data hover dynamic description display? In my project using products pagination of some product on the product hover i want to show one popup dynamically what functionally use like ajax, json or some other technology based its possible?
Try this,
Demo Ajax Tooltip
I am using Jquery UI tooltip, It is showing your IP address in tooltip from database using ajax request,
$(function() {
$( document ).tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$that = $( this )
$.ajax({
url: 'http://ip.jsontest.com/',
success: function(result){
$that.text(result.ip)
}
});
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
});
$(function() {
$( document ).tooltip({
items: "label , [title]", //as per your html
content: function() {
$.ajax({
type: "GET",
url: 'Your url',
success: function (result) {
return result;//return result from your url should be a string
}
});
});
I'm looking for a way to send the selected items to a selectable of Jquery to a php page
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
$(function() {
$("#foo").submit(function(event){
$.post('batch.php?page=rinomina', {selectable: $('#select-result').html()});
});
});
</script>
<script>
$(function() {
$( ".direct" )
.button()
.click(function( event ) {
});
});
</script>
<form id="foo" action="" method="post">
submit
but it is wrong and do not understand where I'm wrong!
Not quite sure I fully understand. What it appears you want is the index number of each selected list item to send as a parameter to a php method? You could go about this in many ways. The easiest I can think of with what you have would be to get the indexes of the selected, then use jQuery's param method to make them URL friendly and add to your post url. For example:
Example
$(function() {
$("#selectable").selectable();
$("#foo").submit(function(e) {
e.preventDefault();
var ids = new Array();
$("#selectable .ui-selected").each(function(i) { ids[i] = "# " + ($(this).index()+1); });
// get values as URL parameters for passing to PHP
var paramSelectable = $.param({ selectable: ids });
// easiest implementation with what you have
$.post('batch.php?page=rinomina&'+paramSelectable);
});
})
I created a conformation box from jquery. I want to submit the page and view PHP echo message when click the confirm button in the confirmation box. Can you help me with code that comes for the confirmation button?
My jQuery/javascript function is here:
$(document).ready(function(){
$('#click').click(function(){
//$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Ok": function() {
// I WANT THE CODE FOR HERE TO SUBMIT THE PAGE TO WIEW PHP ECHO MESSAGE
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
});
You can use jQuery Form submit library. This will give you many options.
And according to your requirement you can call
beforeSubmit: 'YOUR FUNCTION To OPEN DIALOG',
If this returns true your form will get post and you will definitely get response.
see example here : http://malsup.com/jquery/form/#ajaxForm
Use the jQuery Post function...
$.post("test.php", { 'choices[]': ["Jon", "Susan"] });
Here is a version with a callback when the post completed...
$.post("test.php", { name: "John", time: "2pm" },
function(data) {
alert("Data Loaded: " + data);
}
);
Or if you have an existing form that you want to post use the jQuery submit function...
$("form").submit();
But before you do this you need to make sure that you populated the input fields in the form.
try this code,
var parameter_1 = 'test';
var parameter_2 = 'test';
$.ajax(
{
type: "POST",
url: "/submit_url.php",
data: "parameter_1="+ parameter_1 +"& parameter_2 ="+ parameter_2,
success: function(html)
{
alert('Submitted');
}
});
I have this problem with the jQuery autocomplete.
I use JSON data, retrieved from a mySQL db, by PHP function.
$.ajax({
dataType: 'json',
async: false,
method: 'post',
success: function(data) {
test = data;
},
url: '<?php echo site_url('products/autocomplete/'); ?>'
});
So, my JSON data is stored into the variable: 'test'.
This is my autocomplete code:
$( "#prodname" ).autocomplete({
minLenght: 2,
source: test,
focus: function( event, ui ) {
$( "#prodname" ).val( ui.item.prodname );
return false;
},
select: function( event, ui ) {
$( "#prodname" ).val( ui.item.prodname );
$( "#uname" ).val( ui.item.uname );
$( "input[name=prodname_fk]" ).val( ui.item.id );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.prodname + "</a>" )
.appendTo( ul );
};
The data loads properly and all, but the autocomplete field doesn't seem to work properly. The first item of my JSON object starts with 'b', so only when I press the letter 'b', the autocomplete(suggestions) appear.
How can I fix this? My guess is maybe because I use async: false, but that the only way I made it work a little at first place.
I need the autocomplete on my Product field, so when a user selects product, a hidden field (prodname_fk) receives the corresponding ID of the product. And the uname field (unit of measure) is only used for displaying purposes.
I attach picture for your reference.
Thank you in advance.
If your php page returns json, you can put its url directly in the autocomplete function :
<script>
$(function() {
$( "#birds" ).autocomplete({
source: '<?php echo site_url('products/autocomplete/'); ?>',
minLength: 2,
select: function( event, ui ) {
$( "#prodname" ).val( ui.item.prodname );
$( "#uname" ).val( ui.item.uname );
$( "input[name=prodname_fk]" ).val( ui.item.id );
}
});
});
</script>
In your script, you can remove the _renderitem replacement, as it's only useful if you want specific rendering, like
'<em>' + item.prodname + '</em>(' + item.id ')'
You should try to adapt the basic samples from http://jqueryui.com/demos/autocomplete/#remote then add more advanced functionality.
This is how I made it work.
$( "#prodname" ).autocomplete({
minLenght: 2,
source: "<?php echo site_url('products/autocomplete/'); ?>",
select: function( event, ui ) {
$( "#prodname" ).val( ui.item.prodname );
$( "#code" ).val( ui.item.code );
$( "#uname" ).val( ui.item.uname );
$( "input[name=prodname_fk]" ).val( ui.item.id );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.prodname + "</a>" )
.appendTo( ul );
};
Now, I use asynchronous search, so whenever the user types something in the Products field, a GET request is sent, with the term (http://localhost/ci/products/autocomplete?term=xxx), which is searched against the product names into the database, returning the matching results(JSON) into the autocomplete suggestion box.