I have a form that includes several input text fields and a list that's sortable (se code below). The function below retrieves the new positions that's saved to an array (order). However, what I want is to include the array in the form so that when the user is finished with the sorting, has filled in the text fields and submits the form this array will be apart of the form.
So, how could I get this array into the form with AJAX?
$('#listElements').sortable({
//revert: true,
update: function(event, ui) {
var order = [];
$('.listObject li').each(function (e) {
order.push($(this).attr('id'));
});
$.ajax({
url: "/index.php?type=list&action=showList&listId=1",
type: "post",
data: {
order_data: order
}
}).success(function (data) {
console.log(data);
});
}
});
NOTE: To make it clear, I want to get the array into the form.
send it as a JSON encoded string and decode it serverside. As far as I know jquery has a array to JSON function and php got json_decode()
Related
I have been trying to implement the functionality to allow the user to select from a list which is created as the user types text in the input element using the autocompelte jquery api. However, my implementation is not working as it should, currently, I am able to log the text to the console as the user types but the same text is not binding to the input element that as it should. That is, the option to allow the user to select their option from a list.
I was able to accomplish the desired result using the $getJSON method, however, this method only works when the data source is not changing. This method does not work when I try to get the text that the user has entered in the text box.
$(document).ready(function(){
$("#autocomplete1").keyup(function(){
$.ajax({
type: "POST",
url: "search1.php",
data:'keyword='+$(this).val(),
success: function(data){
console.log(data);
$("#autocomplete1").autocomplete({
source: data
});
}
})
});
});
The contents of search1.php are as follows:
header("Content-Type", "application/json");
$items = get_merchant_name_by_user_input($_POST['keyword']);
echo json_encode($items);
The format of the JSON data returned is:
[
{"value":"amazob","label":"amazob"},
{"value":"Amazon","label":"Amazon"},
{"value":"amazon","label":"amazon"}
]
Just use dataType: "JSON"
$(document).ready(function(){
$("#autocomplete1").keyup(function(){
$.ajax({
type: "POST",
dataType: "JSON",
url: "search1.php",
data:'keyword='+$(this).val(),
success: function(data){
console.log(data);
$("#autocomplete1").autocomplete({
source: data
});
}
})
});
});
This is in script .ready() function which fetch existing files from database and putting in jquery var splitfiles. which is in array formate.
var splitfiles = '<?php echo #$projectDetails->upload_file; ?>';
this line gives array of attached file from view in controller
$arrayoffiles = json_encode($joinfiles);
I want to get this splitfiles var in controller and then merge with $arrayoffiles after that store in database with other form data.
I tried with this solution to pass 'splitfiles' to controller by this bellow code but i am not getting in the controller
$(document).ready(function() {
$.ajax({
url: '<?php echo site_url("trusts/fundsRaisingModule"); ?>',
type: 'GET',
dataType: 'json',
data: {
splitfiles:splitfiles,
// key : value pair. You can send as many pair as you want like this
}
});
});
In controller i am not getting the 'splitfiles'
$files=$_REQUEST['splitfiles'];
giving error :undefined index 'splitfiles'
so help me to pass jquery variable from view to controller in codeigniter
after that i will try to merge the two arrays
Thanks in advance.
To achieve this use jquery ajax() and send the js variable to controller method and use it as you want.
Its syntax is:
$(document).ready(function(){
$.ajax({
url: 'controller_method',
type: 'POST',
data: {
splitfiles :splitfiles,
// key : value pair. You can send as many pair as you want like this
},
success: function(response){ // response from process
// do your stuff here
}
});
});
controller_method
$splitfiles = $_REQUEST['splitfiles'];
// do your stuff here
Note: Don't forget to add the jquery library in your code.
First send that jQuery variable into any hidden input of the view, and then get that input value into controller through GET or POST method.
I'm using jQuery ui's sortable. A list of objects is retrieved from the db an dynamically put into a list, the user drag and drops the list objects and the new order of the list should get saved.
Below is the jQuery code for sortable, which include creating an array of the new list order. However, next step is to do something so that I'm able to use this array in my php code.
The thing is that the user, apart from sorting the list objects also should be able to add some comments and do some other stuff and then submit it all. That is, I'm using a form for this. By that reason I must be able to put in the array with the list order into the form in some way, and here's where I need some help.
What method should I use? Ajax? Local storage? How could this be accomplished?
$('#listElements').sortable({
update: function(event, ui) {
var order = [];
$('.listObject li').each( function(e) {
order.push($(this).attr('id'));
});
}
});
You'll want to use AJAX to send the order array to PHP like so:
$('#listElements').sortable({
update: function (event, ui) {
var order = [];
$('.listObject li').each(function (e) {
order.push($(this).attr('id'));
});
$.ajax({
url: "/save_order_to_db",
type: "post",
data: {
order_data: order
}
}).success(function (data) {
console.log(data);
});
}
});
I have the following codes which sends an array to the function /chat in codeigniter
$(document).ready(function () {
$('#submit').live('click', function (eve) {
eve.preventDefault();
$.ajax({
url: "http://localhost/fq/index.php/splash/chat/",
type: 'JSON',
data: a,
success: function (html) {
alert(html);
}
});
});
Let us assume that array a contains names of people only. ( John, James, Smith)
I want to be able to retrieve the all the values from the array in the function chat.
How can it be done?
Edit:
I need to retrieve the values from the JSON encoded array in this function (codeigniter)
public function chat()
{
//code to retrieve values
$this->load->view('chat');
}
data: a,
should
data: $('form').serialize(), // 'form' may need to replace by your form selector
But if you want to send only an array like ['John', 'James', 'Smith']... then yours is just fine.
And use dataType: 'json' as configuration if you're expecting Object as response or dataType: 'html' for Html response.
Setting dataType will release you from extra parsing effort.
You should do it via JSON, by changing
type: POST
into
type: JSON
Take a look at: http://api.jquery.com/jQuery.getJSON/
Also I agree with thecodeparadox above, it's simply better practice
Hoping that using something like this demo it is possible to drag items within and between two columns, and update their order either live or with a "save" button to MySQL. Point being that you can make changes and return to the page later to view or update your ordering.
http://pilotmade.com/examples/draggable/
Doing it for just one column is fine, but when I try to pass the order of both columns, the issue seems to be passing multiple serialized arrays with jQuery to a PHP/MySQL update script.
Any insight would be much appreciated.
If you look below, I want to pass say...
sortable1entry_1 => 0entry_5 => 1
sortable2entry_3 => 0entry_2 => 1entry_4 => 2
EDIT: This ended up doing the trick
HTML
<ol id="sortable1"><li id="entry_####">blah</li></ol>
jQuery
<script type="text/javascript">
$(function()
{
$("#sortable1, #sortable2").sortable(
{
connectWith: '.connectedSortable',
update : function ()
{
$.ajax(
{
type: "POST",
url: "phpscript",
data:
{
sort1:$("#sortable1").sortable('serialize'),
sort2:$("#sortable2").sortable('serialize')
},
success: function(html)
{
$('.success').fadeIn(500);
$('.success').fadeOut(500);
}
});
}
}).disableSelection();
});
This is the PHP query
parse_str($_REQUEST['sort1'], $sort1);
foreach($sort1['entry'] as $key=>$value)
{
do stuff
}
what I would do is split them up
data :
{
sort1:$('#sortable1').sortable('serialize'),
sort2:$('#sortable2').sortable('serialize')
}
then when you post you can get the request and set them as needed, I hope that makes sense
so what I do is this
parse_str($_REQUEST['sort1'],$sort1);
foreach($sort1 as $key=>$value){
//do sutff;
}