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!
Related
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'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 :)
This seems like a relatively simple question, and I am pretty new to using ajax, but I saw a post about being able to call a PHP script when an OnClick event has been triggered. I am trying to destroy a session upon a user clicking the "Log Out" link, so I want to call the logout.php file when the OnClick event has occurred. My problem is that nothing happens when the link is clicked.
Here's my code:
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
//when the user clicks the logout button
$.ajax({
url: "logout.php"
)};
});
});
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li><?php if(isset($_SESSION['username'])){echo $_SESSION['username'];}else{echo 'Hello Guest!';}?></li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Log Out</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
I suppose that you expect the output of the logout.php file to show. I think that your code might be working but that you forgot to tell the ajax where to put the data that it receives.
Try something like this:
$.ajax({
url: 'logout.php',
success: function(data) {
$('.result').html(data);
alert('Logout completed.');
}
});
Where "result" points to the div you want to load the response into.
Using $.ajax isn't the same as clicking regular links. $.ajax doesn't "follow" the link, it loads the data from that link into the document without refreshing the page.
What you need to do is do what you want in your logout.php file and then you sent information on whether logout succeeded or not. You do that by outputting HTML, XML or JSON, which you check in your javascript code and take appropriate action (redirect user, lock down the UI or whatever).
Try doing this:
$(document).ready(function() {
alert('loaded!')
// Expand Panel
$("#open").click(function(){
//when the user clicks the logout button
$.ajax({
url: "logout.php"
)};
alert('clicked!')
});
});
If this displays a popup saying clicked! then the event is being triggered. Tell me what happens so we can narrow it down to the $.ajax failing or the click event not being triggered.
If you are using firebug then you can go to the console panel and inspect XmlHttpRequests to closely look at any responses coming back from the remote script, if you have sent any back from the script that is.
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