I have a jQuery sortable list. Ultimately what I want is a simple php array of list id's. I'm trying to take the id and position in the array and add it to a database. I would like a user to be able to change the order of the list as long as they want, and when they are satisfied with the order, click a button to submit.
I have seen many examples of sortable lists that update every time an item position is switched, but that is not what I want.
This is simplified. The id's will be dynamically generated with php.
<body>
<form>
<ul id="sortable-1">
<li id="order1">Item 1</li>
<li id="order2">Item 2</li>
<li id="order3">Item 3</li>
<li id="order4">Item 4</li>
<li id="order5">Item 5</li>
</ul>
<input type="button" value="Submit" onclick="go">
</form>
</body>
jQuery that will make the list sortable and also post every time the order is changed, not what I want. I need a separate function called go with the ajax. Also, is .sortable('toArray').toString() what I want intead of ("serialize")? It seems to make a simple array of id values.
$(function(){
$("#sortable-1").sortable({
update: function(event, ui){
var operationOrder = $(this).sortable('toArray').toString();
$ajax({
data: operationOrder,
type: 'POST',
url: 'order.php'
});
}
});
});
The php, which would hold an array of id values:
$order = array();
$string = $_POST['data'];
$order = explode(",", $string);
Thanks for any help. It may be simplistic for experienced programmers but I've been working on it for days...
In order to receive data array with $_POST['data'] you need to send array as value for key data. Also note you shouldn't have to stringify the array. jQuery will properly form encode it for you.
$ajax({
data:{data: operationOrder},// don't need to stringify this array
type: 'POST',
url: 'order.php'
});
Now to verify, learn how to inspect ajax requests in browser console network tab and you will see exactly what is sent. Browser console (F12) is always where you start when debugging ajax
Related
I have two simple HTML lists. The first one contains a bunch of entries, the second one is initially empty. The common list structure is the following:
<ul id="project-offer-list" class="connectedSortable">
<li class="ui-state-default">
<div>
<!-- formatting -->
</div>
</li>
<li class="ui-state-default">
<div>
<!-- formatting -->
</div>
The user can select some entries from the first list by dragging them to the second one. By doing so he can give a preference by sorting the elements within the second list.
The drag-drop-mechanism is realized by JQuery:
<script>
$(function() {
$("#project-offer-list, #project-selection-list").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
I want to send both the selected elements (those in the second list) and their order to a remote server with PHP. Whenever the user clicks the "Save" button, the current selection should be sent.
How can I achieve this? I would need to assign an id to each list element and somehow read the second list and its order. It is crucial that possible changes in the HTML code made by JQuery are considered.
Thanks
You Need to convert the data of the second list into json object, assign the id to each element, use the same id which you have in your database as it would be more easy to update and perform options on existing data,
var items = [];
$('ul#list_id').find("li").each(function() {
var $this = $(this);
var item = { id: $(this).attr('data-id'), title: $(this).text() };
items.push(item);
});
You will get something like this, and use an ajax to send this to your remote server
[
{"id":"1","title":"School-management"},
{"id":"2","title":"library-management"},
{"id":"3","title":"billing_software"}
]
I used jQuery's .append() to add new li elements to a ul on success in an AJAX call. The problem is, whenever I refresh the page, the newly appended list items disappear.
I've read this has to do with refreshing the original page, and that some options are to use cookies (PHP or jQuery). I also saw something about localStorage. I'm not using HTML5, if that matters.
What is the best way to go about this? If I use PHP, can I embed the script inside of jQuery? Is there a more elegant way of going about this?
Thanks
Edit: included code
AJAX
$.ajax ({
type: 'post',
url: '/classes/resources/addResource.php',
data: {
recName: $('#recName').val(),
recURL: $('#recURL').val()
},
success: function(data) {
if (data === 'added') {
var h3ID = $('#categoryList option:selected').val();
var title = $('#recName').val();
var url = $('#recURL').val();
var newListItem = '<li>' + title + '</li>';
$('ul#' + h3ID).append(newListItem);
$('span#resError').fadeIn(400).text('Resource added successfully. Add another?');
}
else
$('span#resError').fadeIn(400).text('There was an error adding this resource');
}
});
HTML
<h3 class="category" id="1">
Category 1
</h3>
<ul id="1">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
When I add List item 5 and so on, I want those new list items to remain upon refreshing the page.
If you build your page dynamically using ajax / javascript, you need to store the current state so that you can build it exactly the same way when the page is reloaded.
There are several ways to do that like sessions (server-side) or cookies / localStorage if the information you need to build the page is stored on the client side.
If you are not using html5 but you are using ajax to build the page, using sessions and doing everything server-side is probably the easiest option. Just store the current / updated state of the page every time an ajax request is made.
An additional consideration is how long the information has to persist. If you use the standard php session mechanism, your session / state will be lost pretty fast (about an hour without reloading / refreshing I think with the default settings).
I'm not too familiar with anything beyond writing markup and CSS, and I have a question..
If I have one .html page with a structure like this:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Now let's assume each of these list items has a class assigned to it, but the class is not unique, and is used multiple times. Is it possible to fetch all list items based on a certain class to another .html page? For example, summon all list items with class "red" to a page called red.html, and all items with class "blue" to blue.html.
Is there any simple way to do this with PHP or another basic method?
Any input is appreciated.
lets say that is your html:
<ul id="list">
<li class="red"></li>
<li class="blue"></li>
<li class="red"></li>
then you could accomplish this with javascript by grabbing the desired elements and then sending these using ajax method to desired page.
$(function(){
var elements = $('#list').children('.red');
$('#button').click(function(){
$.ajax({
method: 'POST',
url: 'somepage.php',
data: elements,
success: function(data) {
$('#result').html(data);
}
});
});
});
Note that i'm using jQuery here, it would look differently in plain javascript... hope this helps :)
I have these tag cloud list
<ul #id = "tag-cloud-list">
<li class = "items">Music</li>
<li class = "items">Lion</li>
<li class = "items">Dwarf</li<
</ul>
That was generated by JQuery. The items here are tags that I will insert to the database. Now my question is it possible to get all <li> items inside the ul? and put them inside a PHP array? because each of these tags will be inserted in the database. if there's no way I can get a li items using php then how would Insert these list items into the database? because I needed them since it is tag to a certain item or post
You have to make an AJAX call:
var lis = new Array();
// Iterate through the <li> items
$("#tag-cloud-list").children("li").each(function()
{
lis.push($(this).text());
});
// Make AJAX call and set data to something like "Music::Lion::Dwarf"
$.ajax({
url: "dostuff.php",
type: "POST",
data: { items: lis.join("::") },
success: function() { alert("OK"); }
});
Then in the PHP script, use
$lis = $_POST['items'];
$liarray = explode("::", $lis);
to retrieve an array of the li items
You can't get these in PHP unless you send the data back to the server somehow. PHP executes on the server, if this is coming in via a jquery, then PHP knows nothing about it.
You will need to either use javascript to get all the information and send it back to the server, or you need to send the entire page HTML (somehow) back to the server to be looked at by PHP. I suggest the first option.
Edit: I am not flash-hot with javascript, just use some basic functions, but you could write an event into a <div> or where the data is coming into along. The function would find how many <li> there are in the <ul id="tag-cloud-list"> pop them into an array and send them to the PHP server, by a form or ajax query.
Sorry that I can't help much with the js code.
You need to get all items in the ul using .find() function from JQuery and make a POST with ajax and process the information
So I am working on a registration system for the place I worked at this summer. I have a system where they can "add" things to a basket, but I figured that I also will need to give them the option to delete those items if they so wish. My question comes in here, is there a way to delete a record from the database and update the page in real time? I am using PHP, MySQL, and jQuery.
Adarsh is correct, use an Ajax post:
basic example of your cart page off the top of my head using jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
$(".deleteItem").click(function());
var dataString = "deleteID="+$(this);
$.ajax({
type: "POST",
dataType: "HTML",
url: "deleteScript.php",
data: dataString,
success: function(data) {
$("#LI"+$(this)).remove();
}
});
});
</script>
<ul>
<li id="LI1">
<input type="button" class="deleteItem" id="1"> 1st Item in your cart
</li>
<li id="LI2">
<input type="button" class="deleteItem" id="2"> 2nd Item in your cart
</li>
<li id="LI3">
<input type="button" class="deleteItem" id="3"> 3rd Item in your cart
</li>
</ul>
Then create the deleteScript.php page to handle the database interaction based on the deleteID you just posted to it.
Yes, use AJAX to fire a query to delete the item and once your method returns, update and clear the item from your basket.
Create a file which deletes items (e.g. delete-item.php?id=X&user_id=X,) and then reload their list of items. It should be as easy as that.
What you're looking for here is an AJAX solution that will POST an HTTP request to your server that results in a DELETE operation on your database.
The simplest way to do this is with one of the many AJAX frameworks out there, such as jQuery, Prototype, or Dojo.
It is vital that you do this with an HTTP POST and not a GET (which is what a simple link would do), because GET requests should never have a side-effect to their main function of retrieving data from a server.
You might want to Google the term CRUD (Create, Read, Update, Delete) along with HTTP to get some insight into this. Or just click here to save finger-work