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 :)
Related
I'm attempting to build a CMS page builder. At the URL below, I'm trying to get the items on the 'templates' tab to do the below.
https://profilefirst.co/admin/content-editor/content-editor.php?page_id=1
When an image is dropped into the container, instead of dropping the image I want to take the ID of that list item and run a php script to pull html content from the database and display it to then be sorted. I can't seem to work out how to not drop the image and how to get the ID passed to the PHP page (get_component.php).
I'm using JQuery Droppable and Sortable for this.
This is a list item:
<ul>
<li id="1" class="draggable ui-state-highlight"><img src="../../images/com_hero.png" /></li>
<li id="2" class="draggable ui-state-highlight"><img src="../../images/com_img_text_button.png" /></li>
<li id="3" class="draggable ui-state-highlight"><img src="../../images/com_text_button_img.png" /></li>
<li id="4" class="draggable ui-state-highlight"><img src="../../images/3-column-features.png" /></li>
</ul>
This is my JQuery droppable (that I found here somewhere) that should be running the PHP file and posting the ID dropped, that would then echo out the content:
<script>
$('#sortable').droppable({
accept: 'li'
drop: function(event, ui){
var id=$(ui.draggable).attr('id');
$.ajax({
url: 'get_component.php',
type: 'POST',
data: {id: id},
success: function(data){
//NOT SURE WHAT GOES HERE
}
})
}
});
$('img.draggable').draggable();//assuming all draggable images have a draggable class
</script>
On the PHP page, it's looking for $_POST['id'] but never gets it.
I feel like I must be missing something painfully obvious here, but I've checked all the docs and can't work this out. Any help is much appreciated!
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 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
I am working with a mobile application in which
first page has
Html
<ul>
<li>121212</li>
<li>123233</li>
<li>232323</li>
<li>4323423</li>
<ul>
when user click on "li" then he/she entered on next page which will retrieve data related to selected "li" via Ajax.
this is almost going good..
But when Ajax response come page is fluctuating 2 times.
Means one time page loading, next time page totally white and then again showing page with Ajax response.
Why ???
J query
$("clickOnLi").click(function(){
var id= $(this).val(); //get the selected li value
$('.loadingGif').css({ 'display':'block' });
$("#ulShowContent").html(''); // to remove old inner HTML to show new result html
var dataString = 'selectedid='+id;
$.ajax({
type: "POST",
url: remoteUrl+"handler.php",
data : dataString,
cache: true,
success: function(response) {
if(response){
$('.loadingGif').css({ 'display':'none' });
$("#ulShowContent").html(response);
}
}
});
})
**and the result will show in this html**
<ul id="ulShowContent" data-role="listview">
<li class="comment chatsend">
<div class="comment-meta">
data 1
</div>
</li>
<li class="comment chatsend">
<div class="comment-meta">
data 2
</div>
</li>
</ul>
You will need to change how you deal a page change and AJAX call.
What I have understand from your question, after click on LI element, page change is initialized and AJAX call is sent to a PHP server.
You will need to change this logic. Page fluctuations are cause by AJAX call which is executed during the transition from one page to an another.
This can be fixed like this:
On a first page remove HREF attribute from a list element
Add a click event to every list element
AJAX call should be executed on click event, at a same time show your custom loader (or use a default one)
When server side data is retrieved you need to store it so it can be accessed from an another page. Here you will find my other ANSWER where you can find various methods of storing data during page transitions, or find it HERE, just search for a chapter called: Data/Parameters manipulation between page transitions (your best bet is a localstorage).
Initialize a page change with changePage function
During a pagebeforeshow event (page is not yet displayed) append new data to the new container
When second page is finally shown everything will be there and
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