I have a draggable div, that needs to be dropped on a droppable. If it is dropped correctly, the droppable calls an AJAX request. If the draggable does not have a valid id or the AJAX request fails, the draggable should be reverted to it's original position. Is that something that can be done with jQuery?!
Any help is greatly appreciated!!
$("div.draggable").livequery(function(){
$(this).draggable({
revert: 'invalid',
distance: 20
})
});
$("#trash").droppable({
tolerance: 'touch',
drop: function(event, ui)
{
var item = ui.draggable;
var id = item.attr('id');
if (id)
{
$.ajax(
{
type: "POST",
url: "delete.php",
data: "id=" + id,
success: function(html)
{
if (html)
{
item.remove();
}
else
{
// FAILED AFTER AJAX
// is it possible to revert the draggable from here??
}
}
});
}
else
{
// FAILED BEFORE AJAX
// is it possible to revert the draggable from here??
}
}
});
I had the same problem,
You can simply do:
item.css({"top":0, "left":0});
tip: draggable has relative position.
Im not too familiar with jquery - but id suggest using the prototype framework (along with scriptaculous) - within prototype you can definately achieve this effect.
If you can guess what it's original position was in the fail block, just use a selector to find it and the manipulation functions to remove it from its current position and move it to the old one.
If you need to, perhaps you can store the original position (parent and child-index) when it is dragged, then move it back there when it fails
Related
I'me trying to implement an on/off button on a php loop but I can't make it work because of the id of jQuery event. How can I get the correct id on click and pass it to the rest of the script?
The problem is in the $('#myonoffswitch')...
<script type="text/javascript">
$(document).ready(function(){
$('#myonoffswitch').click(function(){
var myonoffswitch=$('#myonoffswitch').val();
var wnfID=$('#wnfID').val();
if ($("#myonoffswitch:checked").length == 0) {
var a="2";
var b=wnfID;
} else {
var a="3";
var b=wnfID;
}
$.ajax({
type: "POST",
url: "ajax_wnf_status.php",
data: "statusWnf="+a+"&wnfID="+b,
success: function(html) {
$("#display").html(html).show();
}
});
});
});
</script>
I'm generating different id's for the loop rows (ex: id="#myonoffswitch1" ; id="#myonoffswitch2"; etc).
I'm not certain I fully understand the question, but .val() will not get the ID of an element. You should use .attr('id') instead.
Also, it looks like you're trying to format data for a GET request, not a POST.
If I understand the question correctly, I think you're looking for
event.target.id
where 'event' is passed in to your handler:
('#myonoffswitch').click(function(event){
id = event.target.id
. . .
Though at that point, you might not need the id, since you can just use event.target directly.
In my script I'm experimenting with jquery draggable & droppable, See here. I'm trying to grab the data (to eventually put in a database) from each draggable element that's dropped into the droppable div. Right now I have it so that I can only get the data from the div the was last dropped.
$('#sortcard, #dropbox, #dropbox1').droppable({
accept: '.sorting',
hoverClass: 'border',
tolerance: 'touch',
drop: function(e, ui) {
$(this).append(ui.draggable.html() + '<br/>');
$("#add_friend").show().fadeOut(12000);
$(e.target).droppable("disable");
$(e.target).append("<input type='button' name='Sub' value='clear'/>").click(function() {
$(this).empty().droppable("enable");
});
var dropbox = $('#dropbox').html();
var dropbox1 = $('#dropbox1').html();
if(dropbox && dropbox1 !== '') {
$.post("account_main.php", {data: $(this).text()}, function(data) {
$('#demo').html(data);
});
}
}
});
I'm thinking the culprit may be
{data: $(this).text()}, function(data) {
$('#demo').html(data);
});
I have toyed with it and still not getting the results I desire. I feel maybe my coding on this is sketchy and needs a makeover, but I just need some ideas to push me in the right direction to make it efficient and would be very appreciative as well of any tips.
You're only getting the data from the last droppable because your sending $(this).text().
In that context $(this) is the last droppable that was dropped. Since you want more than that, you'll want to replace:
{data: $(this).text()}
with something like:
{
sortcard: $('div#sortcard').text(),
dropbox: $('div#dropbox').text(),
dropbox1: $('div#dropbox1').text()
}
Which will send the data from those three DIVs.
First I want to show you guys what I am trying to do.
I am trying to create a search functionality in my application using AJAX, jquery and php
and as for the framework I am using Codeigniter, but it's not necessary to be CI, this could be similar to all(well I suppose).
I have this piece of code to observe a focus and blur event.
$("#searchbox").on({
keyup : debounce(function(){
MSI.Interface.search();
},350,false),
blur : function(){
$("#search_results").hide();
}
});
I have not finished it yet that is why the blur event has only .hide() . I can't think of what other else to include, maybe reset the html of the #search_results to make it blank, but I don't know if that is reasonable.
1st question: What do you think is a more reasonable solution for that?
As you can see in the previous code, i have the debounce function, just to prevent per character request on the server, I wonder if that is correct.
Then I have this search function
search : function() {
var keyword = $("#searchbox").val();
if (keyword == '') {
} else {
$.ajax({
url : MSI.variables.base_url + 'search',
type: 'POST',
data: {
keyword : keyword
},
dataType : 'json',
success: function(output) {
$.each(output, function() {
$.each(this, function(key, value){
$("#search_results").show().prepend("<p>"+value+"</p>");
});
});
}
});
}
}
With that code, the script will be able to add contents to the #search_results div.
2nd Question: What do you think is a better solution for this?
I want to do an update statement in my database, after an element gets dropped on a jQuery UI droppable element.
$("#pictures th div").droppable({drop: function(ev, ui) {
alert('You filled this box with a picture');
var this_id = $(ui.draggable).attr("alt");
var draggableId = ui.draggable.attr("id");
}
I know how to get the information (see the code above) I need, but how can I put them now into the database ?
Thank you !
At this point, you can use jQuery's $.post() method to post to a PHP file you've written. In the $.post(), you can pass the ids you would like to have written to your database.
So something like this:
$.post("/save.php", { imageId: this_id, draggedId: draggableId }, function (data) {
alert("success!");
});
Post the variable values to other page lyk this:
$.ajax({
type: "POST",
url: "data.php",
data: "Cat=" + id + "&Wid=" + WID
});
and then on data.php page get the values lyk this:
$Cat=$_POST['Cat'];
$WID=$_POST['Wid'];
simply store them in database by using insert query,hope it will help you.
While working with jQuery and PHP a problem occurs with loading new data from "give-me-more-results-below-the-div.php".
I have the tooltips working below with '.live', but the values of the new loaded content are not available.
Now, how would one get info from new data, loaded in a div, but (naturally) not showing in the page code? :-)
As you can see, I only need three variables to pass: main_memberID, like_section and the like_id.
I'm seriously lost here. So any help is highly appreciated.
So far, I got this on the jQuery functioning part:
$(".ClassToLike img[title]").live('hover', function() {
$('.ClassToLike img[title]').tooltip({ position: 'center left', offset: [0, -2], delay: 0 })
});
$('.like_something').live("click", function (event) {
var value = $(this).attr ( "id" );
$(this).attr({
src: '/img/icons/checked.gif',
});
$(".tooltip").live().html('you like ' + this.name);
$.ajax({
type : 'POST',
url : 'like_something.php',
dataType : 'json',
data: {
main_memberID: $('#main_memberID').val(),
like_section: $('#like_section').val(),
like_id: this.id,
},
success: function(){ //alert( 'You have just clicked '+event.target.id+' image');
},
error: function(){
alert('failure');
}
});
});
I often id the div like
<div class="like_something" id="div_memberID_sectionName_anotherID"/>
Then
$('.like_something').live('click',function(){
var info = $(this).attr('id'); // get the id
var infoArr = info.split('_'); // split the id into an array using the underscore
// retrieve your values
var memberID = infoArr[1];
var sectionName = infoArr[2];
var id = infoArr[3];
});
To fix the problem, first open up your browser's requests panel, in Chrome it's a "Network" tab in Dev tools. When you click .like_something, is a request sent? And are there any console errors? If the request is sent, look at the Response tab and see what the server is sending back.
Also, you could store the data you need to send with the request in an attribute with the data- prefix, like this:
<a href="#" class="like_something" data-section="section" data-member-id="Member id">
...
</a>
This is most likely not your exact HTML, but you get how it works.
Then you can retreive it in the jQuery like this:
data: {
main_memberID: $(this).attr('data-member-id'),
like_section: $(this).attr('data-section'),
like_id: this.id,
},
I hope this helps!
Still getting the hang of working on this site, but this one is my closing (as posted under Nathan's answer):
Super thanks for the input you all! Nathan gave me the best way to retrieve and pass the info I needed. Again, this place is great. Thanks for all the efforts!