Solution Found!
I found it, I was overlooking that I could just get the id of the variable item. So I put var item_id = item.attr('id'); and that was my solution. So much simpler than I thought. Thanks for your help everyone!
Okay, so I have multiple draggable elements in jQuery, they are all images, but each one has their own ID. Anyway, I have set up a function that is preformed once the image is dropped onto the droppable. I want to be able to pull the id of the image so I may process what image has been dropped in my database.
function foundationsInSpot(drag_item,spot)
{
var oldSpotItem = $(spot).find('img');
if(oldSpotItem.length>0) {
oldSpotItem.appendTo('#foundationinv').draggable({ revert: 'invalid' });
}
var item = $('<img />');
var item_id = "";
var bid = "<?= $bid ?>";
item.attr('src',drag_item.attr('src')).attr('id',drag_item.attr('id')).attr('class',drag_item.attr('class')).appendTo(spot).draggable({ revert: 'invalid' });
drag_item.remove();
alert('BenID: ' + bid + ' Foundation: ' + item_id);
var dataString = 'item_id='+ item_id + '&bid=' + bid;
$.ajax({
type: "POST",
data: dataString,
url: "http://motb.isgreat.org/objects/pfoundations.php",
});
}
So that's my code. I need to find item_id. Here was my guess var item_id = $('<img />').attr('id'); but it returned blank information. I also tried var item_id = ui.draggable.attr("id"); and that just stopped the rest of my function. Any ideas? Thanks in advance.
By the way here is how my draggable items look like.
<img src='http://motb.isgreat.org/objects/khhhqw4s.png' class='object foundation' id='khhhqw4s'/>
UPDATE
I moved the var item_id = ui.draggable.attr("id"); above the if statement, and now I get undefined. So I am unsure where to go from here, but I am aware my AJAX call is operating correctly as it is updating my database with undefined.
UPDATE - Again
So here is how I am calling my function if this makes it easier.
$(".foundations").draggable({ revert: 'invalid'}).addTouch;
$('#foundationinv').droppable({accept: '.foundations'});
$("#foundations").droppable({ accept: '.foundations'})
$('#foundations,#foundationinv').bind('drop', function(ev,ui) { foundationsInSpot(ui.draggable,this); });
I have never done anything like this before, so It's really beyond me. If you would like to see the page in person, go to http://motb.isgreat.org/ and click the login button, and use testbot for both the username and the password. To see where the draggables are, on the left side there is this big box with 4 smaller ones below it, click above the small box where the word is foundations. I am trying to drag those objects that appear into the small box. You can see an alert with the information I am trying to pass. Feel free to check my source for any issues, the items are called up from my database, so my PHP is probably missing from your source.
I found it, I was overlooking that I could just get the id of the variable item. So I put var item_id = item.attr('id'); and that was my solution. So much simpler than I thought. Thanks for your help everyone!
inside the droppable you have a property called drop
$("#destination").droppable({
hoverClass: 'ui-state-hover',
helper: 'clone',
cursor: 'move',
drop: function(event, ui) {
$(this).addClass('ui-state-highlight');
$(ui.draggable).addClass('ui-state-highlight');
$(ui.draggable).draggable('disable');
console.log('Dragged: ' + $(ui.draggable).attr("id"));
}
});
use that method to call what object was dropped calling $(ui.draggable).attr("id")
if you see the object, ui.draggable is only the HTML, soon you wrapp it with $() you will be able to do any jQuery operation with it.
http://jsbin.com/iboli4/edit
open the Console in Inspector to see the id's
Related
I have a small MVC5/C# Web application. In short, users will select a location from a dropdown ("#UnitList"). This fires the jquery event, to populate the next dropdown ("#CheckItem") with a list of contacts associated to the location selected.
Being very inexperienced in Jscript and Jquery, I am lost.
Additionally, on the same event, I need to populate an element (hidden text box).
In order to fill the hidden elements, I use this code
$(function () {
$("[name='UnitList']").change(function () {
$("#DeliveryUnitID").val($(this).val());
});
});
To run the Jquery that populates the second dropdown:
$(document).ready(function() {
$("#UnitList").change(function() {
var batchId = $(this).val();
var urlForModesl = getURLBase() + "ICS_Requisitions/Details";
urlForModesl = urlForModesl + "/" + batchId;
var modelsHtml = "";
$('#CheckItem')
.find('option')
.remove()
.end()
.append('<option value="Select Contact"></option>')
.val('Contact')
$.ajax({
type: 'get',
url: urlForModesl,
contentType: 'application/json',
dataType: 'json',
success: function(jsonData) {
$.each(jsonData, function(key, value) {
modelsHtml += "<option value='" + value.LoginID + "'>" + value.ContactName + "</option>";
});
$("#CheckItem").html(modelsHtml);
$("#DeliveryUnitID").val($(this).val())
},
error: function(XMLHttpRequest, textStatus, errorThrown) {}
});
});
});
I am aware that I have two functions with the same name "$("#UnitList").change(function ()" and that this is very bad and causing conflicts. This is what I am trying to resolve.
I have tried to simply add the element update within the Jquery code, but that did not work.
I placed the following code
$("#DeliveryUnitID").val($(this).val())
Inside the Jquery, right after:
$("#CheckItem").html(modelsHtml);
But that does not work. The hidden elements are still empty.
I tried creating a function called foo, with the element update, and call that function from at the end of the jquery.
foo();
<script>
function foo() {
$("#DeliveryUnitID").val($(this).val());
}
That also left the element #DeliveryUnitID empty.
I know that I can't have two functions with the same name, but that's the only way I can get it working where the query populates the drop down, and then the hidden element is populated too. BUT . . . that's bad coding AND, for about 5% of the users, it fails.
I can't quite figure out how to make both happen with one onchange event.
It's been a while since I've used jQuery, so here's what I'm seeing:
On change Event:
Get the value of the #UnitList <select> (potential bug: these aren't being stored anywhere)
Clear the options
Re-populate with new ones from AJAX Request
Try to get value of new options (still within initial AJAX request, which might also be a bug? Like I said, it's been a while since I've used jQuery).
It looks like you might have a state-management issue?
Potential fixes:
Store values of first dropdown before you clear them.
Use the stored value to populate #DeliveryUnitID after the AJAX request
Use some if statements or remove the event listener to not constantly be running your code on change event once you get the data you need...unless you need it to be running constantly.
To me, it would seem beneficial (from a code pov and maybe also a UX perspective) to programmatically build a second dropdown to keep things clearer, but that might be overkill for what you're trying to accomplish.
I got this code from some template, it gets executed by clicking on the tabs to fetch posts into the page. All I want is to have an edited copy of this code to fetch posts by timer aside from clicking on the tabs. I have tried the setInterval but it didn't work, I appreciate any help I am so new to Ajax and JQuery.
jQuery(document).ready(function($) {
setInterval(function(){
e.preventDefault();
var bt = $(this);
var bts = bt.parent().parent();
var where = $(this).parent().parent().parent().next();
var nbs = bt.parent().parent().data('nbs');
var nop = bt.parent().parent().data('number_of_posts');
cat = bt.data('cat_id');
if (cat === '') {
cat = bt.data('parent_cat');
}
where.parent().find('.show-more').find('.nomoreposts').remove();
jQuery.ajax({
type: "post",
url: nbtabs.url,
dataType: 'html',
data: "action=nbtabs&nonce="+nbtabs.nonce+"&cat="+cat+"&nbs="+nbs+"&number_of_posts="+nop,
cach: false,
beforeSend : function () {
where.parent().append('<i class="nb-load"></i>');
},
success: function(data){
where.hide().html(data).fadeIn('slow');
bts.find('li').removeClass('active');
bt.parent().addClass('active');
where.parent().find('.nb-load').remove();
}
});
}, 5000)
})
You have to get started to some degree before we can really help you code-wise. We can't just write the code for you because we do not know what elements you want updated and how.
All I can advise you is the Jquery Ajax method is how this code retrieves url responses:
jQuery.ajax({
type: "post",
url: "<name of your url or maybe servlet>"
success: function(data){
// data is the response from your url
// in the code sample, data was html that was inserted to an element
}
});
You can put this ajax call in a function and use setInterval. You can place the setInterval call on your Jquery.ready() function.
Your first issue is that you're trying to call jQuery.setInterval, not setInterval. jQuery.setInterval is not a function, so calling it will just give you an error.
The next issue is that your script tries to alter a bunch of elements, using the clicked element as a starting point. This is bad practice because of situations like this, where changing how to function is invoked can completely break the script. Without knowing what all of this:
var bt = $(this);
var bts = bt.parent().parent();
var where = $(this).parent().parent().parent().next();
var nbs = bt.parent().parent().data('nbs');
var nop = bt.parent().parent().data('number_of_posts');
is, it's pretty difficult to give advice. The safest bet is to replace $(this) with jQuery(".nb-tabbed-head li a"), but that might cause issues because $(this) refers to only one element, whereas jQuery(".nb-tabbed-head li a") may refer to multiple.
Really the biggest issue is that you're trying to use code that a) is poorly-written and b) you don't understand yet. I highly recommend learning about AJAX, events, the DOM, and jQuery before you make a serious attempt at this. It's almost impossible to create a good product when you're gluing together pieces of code that you don't understand that were written by someone that you don't know.
I have this JQuery UI sortable list that has draggable elements and when I drag it from the bottom to the top, it saves a value corresponding to it's place in the list and saves it in the database. This works! But I need an image on my webpage to update simultaneously by chaning it's z-index. So once a item from the list has been moved to another place in the list, the z index gets stored in the database (which works) and then I need it to change the specific image to using that same z-index. My AJAX code looks like this:
$(document).ready(function () {
$("#sortable").sortable({
axis: "y",
stop: function (event, ui) {
var data = $(this).sortable("serialize");
//These next 2 lines are just a poor attempt to achieve what I want:
var change_zindex = 1;
document.getElementsByClassName('item2')[0].setAttribute("alt", change_zindex);
// POST to server using $.post or $.ajax
$.ajax({
data: data,
type: "POST",
url: "database/update_settings_sort.php"
});
}
});
$( "#sortable" ).disableSelection();
});
Well I hope you have some suggestions or advice. Thanks in advance, please tell me if you want me to provide more code.
Edit:
This is what I have now:
var change_zindex = 1;
document.getElementsByClassName('item2')[0].setAttribute("alt", change_zindex);
Only problem is to
1. Know what the change_zindex variable shall be equal to.
2. Be able to do it with all items on the list and not just only item2. I could use something like 'item' + img_id but I don't know how to retrieve that id. Hmm Thanks all
Your code works fine but make sure you are getting the value for variable 'img_id' in the following three lines
var zindex = document.getElementsByClassName('item' + img_id)[0].getAttribute('z-index');
var change_zindex = 1;
document.getElementsByClassName('item' + img_id)[0].setAttribute("z-index", change_zindex);
I'm working on a site that allows users to love an item (like an item). The event is handled with jQuery and AJAX. The item array holds quite a lot of items and each item has a button to 'love'. I decided to efficiently reduce the number of forms on the page by putting one form at the bottom of the page and just submit it remotely.
So every time a user clicks the love button, the data attribute that holds the item id is put into the form and the form is submitted. Simple stuff.
But I'm finding the data response a bit more complex because I don't know how to find the element id of the item I want to update. I can't just use this or event.target because its inside a different event. I've also tried to carry the event parameter into the submit event, but it didn't work.
$(".love_item").click (event) ->
$(".love_item_item_id").val $(this).data 'id'
$(".love_item_form").submit()
$(this).hide(200)
$("form.love_item_form").submit (evt) ->
evt.preventDefault()
$form = $ #
$form.find(':submit').prop 'disabled', true
$.post($form.attr('action'), $form.serializeArray(), type: 'json').done (data) ->
$(event.target).parent().find(".item_info_box").html data
The last line, where it says event.target is as far as I've got. Its obvious that this variable is not carried, but I don't really know what to place there to achieve my goal. Also, I know that I could pass additional parameters through the form action (in other words send them to the rails controller and back), but I'd rather not. Any ideas?
You don't need an abitrary form at all. Something like this would work:
Example Markup (notice the data attribute):
Item to like
jQuery:
$('a.likeable').on('click', function() {
var $item = $(this);
var id = $item.data('id');
$.post('url/like/' + id, function() {
// success
// do something with $item here.
});
});
If you have an element like this: <div id="foo" data-id="foo1234">Foo</div>
You can select it after your ajax post like this, assuming you still have the ID of foo1234:
$('[data-id="' + id + '"]').doSomething();
Just use jQuery's ajax functionality
$('.love_item').on('click', function(e) {
$.ajax({
type: 'POST',
url: *insert url here*,
data: 'id=' + e.currentTarget.data-id,
success: function(response) {
var element = e.currentTarget;
// do whatever
}
})
});
I've got a page that makes an ajax request and gets data back in json format.
I needed to sort this data before adding it to the DOM, so it is put into an object with the following code
function(data) {
var birthDates = {};
var uids = {};
$.each(data.users, function() {
if (!uids[this.uid]) {
uids[this.uid] = [];
uids[this.uid].push(this);
}
if (!birthDates[this.birthDate])
birthDates[this.birthDate] = [];
birthDates[this.birthDate].push(this);
});
for (var d in birthDates) {
var date = d;
$('div#holdDates').append('<ul class="dayList" id="' + date + '"><li class="date" >' + date + '</li></ul>');
$.each(birthDates[date], function() {
$('ul#' + date).append('<li class="show" id="' + this.uid + '">' + this.name + '</li>');
});
}
$('li.show').click(function() {
var getuid = $(this).attr('id');
$showArr = uids[getuid];
// now I can get the extended data about the user
this all works great when the page is loaded for the first time, however I'm running into two problems, both as a result of making a second ajax request
1) if i make the same ajax request (giving the same variables, so the same data comes back again), then the data gets added to the newly created objects (uids, and birthDates) twice, and I can't figure out how to keep that as unique
2) sometimes (and i haven't been able to debug to figure out why) i don't get any of the extended user data from uids object. (the stuff I do after the li click
Any ideas? Am i doing this efficiently?
I find it strange that you can't empty an object that you've created, but apparently everything I'm reading says that you can't.
Addition
well, after posting this, the next thing I was doing was building a dynamic tag cloud which is dependent on the returned json.
so, now I run into the same problem again. I need to tag-cloud to be new after each request. I really hope there is a way to get rid of 'legacy' data in javascript.
Thanks,
Pete
Everything declared with the var keyword inside of your function(data) will be created anew each time the function is called.
What's the symptom of your problem? Have you actually looked at the value of the uids variable in firebug and seen that items are being duplicated, or do you just see your dates/names getting doubled up on the page?
My suspicion is that this is a result of not clearing the DOM elements that you are calling .append() on before you display your results.
Try adding to the beginning of the function:
$('div#holdDates').empty();
as well as to your date display loop:
$('ul#'+date).empty();
and for good measure, at the beginning of function:
$('li.show').unbind('click');