I know this may look like a repost, but I am not able to get the code to work that the community made here.
What I am trying to do is make an array of all the classes listed in the element I am clicking on.
The element I am clicking on is a <g></g> element from a SVG object.
I would like to post the classes (in an array) to a modal and the ID of the <g> element. Here is my code:
//reveal Modal when when clicking on an item box.
$(document).ready(function() {
$('.items').click(function() {
$.ajax({
type: "POST",
url: "/includes/functions/choose_item.php",
data: { id: this.id, class: this.className}
})
.done(function() {
$('#choose_item_modal').foundation('reveal', 'open', "/includes/functions/choose_item.php") ;
})
});
});
It post it to my PHP script, and the ID works, but the class is in an array of baseval and animval, and I would like an array of all values of the baseval only.
This is the array I get:
Array ( [animVal] => items hero_item [baseVal] => items hero_item )
Thanks for any help.
SVG elements doesn't really have classes like regular elements, and the className property returns a special object, usually a SVGAnimatedString looking like
{animVal: "class class2", baseVal: "class class2"}
The class attribute is really just a regular attribute with some strangeness, so you need to use getAttribute('class') instead, or in jQuery attr() to get the value of the attribute
$(document).ready(function() {
$('.items').click(function() {
$.ajax({
type : "POST",
url : "/includes/functions/choose_item.php",
data : {
id : this.id,
'class' : $(this).attr('class')
}
}).done(function() {
$('#choose_item_modal').foundation('reveal', 'open', "/includes/functions/choose_item.php") ;
});
});
});
note that class is a keyword in javascript, so it should be quoted.
If you need an array, you can do $(this).attr('class').split(/\s+/);
TEST
Related
I wonder if it's possible to do this multistep form on one single page, so not reloading the div with the content received from the php file but append it right below..
This is what I've got so far:
$(document).on('submit', '#reg-form', function(){
var ln = $('#submit').val();
var id = $('#id').val();
var data = 'submit='+ln;
$.ajax({
type: 'GET',
url : 'step.php',
dataType : 'html',
data : data,
success : function(data)
{
$('#reg-form').fadeOut(500).hide(function()
{
$('.result').fadeIn(500).show(function()
{
$('.result'+id).append(data);
});
});
}
});
return false;
});
Also I tried to use different divs, with incremental id's to put every content in it's own div. The Problem is, I'm only getting the "second" step, so it's not going through the whole formular.
I guess it's because the form of the first page is still there and all have the same id.. Can anyone help me out here please?
id of element in document should be unique. Change the duplicate id at html source or using javascript
success : function(data) {
// change duplicate `reg-form` `id` to value
// corresponding to `.length` of elements having `id`
// containing `"reg-form"`
$(data).filter("#reg-form")
.attr("id", "reg-form-" + $("[id*='reg-form']").length);
$("#reg-form").fadeOut(500).hide(function() {
$(".result").fadeIn(500).show(function() {
$(".result" + id).append(data);
});
});
}
Unable to click on element all method. I am getting Object Object has no method filter. While researching I found out that it has to do with some strings. Please advise. Thanks
var sflag = $('a[ng-click="flagPhoto()"]');
browser.wait(EC.elementToBeClickable(sflag), 30000, "not clickable");
$('a[ng-click="flagPhoto()"]').filter(function(elem, index) {
return elem.getText().then(function(text) {
return text === 'flag for abuse';
});
}).then(function(filteredElements) {
expect(filteredElements[0].isPresent()).toBe(true);
filteredElements[0].click();
});
You are not selecting multiple elements with this selector. Only the first found element will be selected:
$('a[ng-click="flagPhoto()"]').filter...
Instead, use this:
$$('a[ng-click="flagPhoto()"]').filter
HTML
<a href="/portfolio/${portfolio.id}" data-portfolio-id="${portfolio.id}" data-bookmark-id="${bookmark.id}" class="ac-hns">
<span>${portfolio.title}</span>
<span>By ${portfolio.ownerName}</span>
<img src="${portfolio.coverImage()}" alt="">
</a>
<a href="/portfolio/${portfolio.id}" data-portfolio-id="${portfolio.id}" data-bookmark-id="${bookmark.id}" class="ac-hns">
<span>${portfolio.title}</span>
<span>By ${portfolio.ownerName}</span>
<img src="${portfolio.coverImage()}" alt="">
</a>
JS
$('.ac-hns').on('click', '.icn-close-white', function (e) {
e.preventDefault();
deleteBookmarkItem( $(this), $(this).parent().attr('data-portfolio-id'), $(this).parent().attr('data-bookmark-id') );
});
function deleteBookmarkItem( btn, itemID, bookmarkID ) {
$.ajax({
url: '/api/bookmarks/'+ bookmarkID,
type: 'DELETE',
success: function( response ) {
$('.ac-hns').remove();
console.log('delete portfolio from bookmark');
}
});
}
The items are dynamic via json. If delete one of items on the list, say 3 items under one same bookmark, one item should be removed under the same bookmark and it wouldn't be on same bookmark anymore.
But right now, click on close icon on one of the items, all the items are removed under the same bookmark which is not right.
Help or insight appreciated.
Update
Just realize - could remove data-bookmark-id="${bookmark.id}" from tag and it won't appear in the bookmark list. I tried removeData('data-bookmark-id'), but it doesn't take bookmark id out.
$('.ac-hns').remove(); in the callback is removing everything with that class. Hard to tell with your HTML structure but I think you want something like this:
function deleteBookmarkItem( btn, itemID, bookmarkID ) {
$.ajax({
url: '/api/bookmarks/'+ bookmarkID,
type: 'DELETE',
success: function( response ) {
$('[data-bookmark-id="'+bookmarkID+'"]').remove();
console.log('delete portfolio from bookmark');
}
});
}
Because $('.ac-hns').remove(); removes all element with class .ac-hns.
You have to specify on your script which element with class of .ac-hns should be removed.
And since you want to change the whole group, it's parent including other child elements, do this $(itemID).remove();
Edit: also $(this).parent().attr('data-portfolio-id') when you pass as parameter, remove the .attr so it will only pass the parent and thus when you $(itemID).remove();, the script will able to know which parent it is then remove that element including its children.
I need to display the value in html page using dom jQuery, but its does not display the value. My code:
$(document.createElement("li"))
.append(
$(document.createElement("span"))
.attr({
id: id,
name: name,
value: name
})
)
.addClass('firstli')
)}
span element doesn't have value property, you should use text instead.
var $li = $('<li/>');
$('<span/>', {
id: layer.id,
name: layer.name,
text: layer.name,
'class': 'bullet'
}).appendTo($li)
Try:
$("<li></li>").append(
$("<span></span>").attr({
id: layer.id,
name: layer.name,
}).text(layer.name)
).addClass('bullet').appendTo(document);
And may be you want to append it to document
With your above code you just have created the elements, you still need to add them to the DOM, you have several methods for that, for example you could use .appendTo() to append your elements at the end of some other existent element in the DOM, so your following line:
).addClass('bullet')
would be changed for this one:
).addClass('bullet').appendTo('#someDOMelement');
I'm not sure what I'm doing wrong but for the past 2 hours I've been trying to use prop to change the value of two items in a button. It works for one but not for the other and I have no idea why.
html:
<input type='button' value='Following' id='btnFollow' dataaction="UnFollow" datatype='topic'>
jquery:
$("#btnFollow").prop("value", "Follow");
$("#btnFollow").prop("dataaction", "Follow");
The first item changes(value) but not the second one(dataaction). I have no idea why(other then maybe its too late and my brain is rebelling). According to the documentation I'm doing it correct. I added alerts inbetween each command in case one was failing, but both alerts went off meaning jquery is not crashing or anything when it tries to change the second item. I don't see any spelling mistakes and I tried to daisy chain the commands but still no luck.
Any suggestions?
entire_code:
$(document).ready(function () {
$('#btnFollow').click(function() {
var topic_id = $(this).attr('datatopic');
var action_type = $(this).attr('datatype');
var action_type_action = $(this).attr('dataaction');
alert(action_type_action);
//$("#btnFollow").prop('value', 'Following');
if (action_type_action == 'Follow') {
$("#btnFollow").prop({'value': 'Following', 'dataaction': 'UnFollow'});
//$("#btnFollow").prop("value", "Following");
//$("#btnFollow").prop("dataaction", "UnFollow");
$.ajax({
type: 'POST',
url: '/follow_modification',
async: false,
data: {
topic: topic_id,
action: action_type_action,
follow_type: action_type
}
//complete: function(xmlRequestObject, successString){
// ymmReceiveAjaxResponse(xmlRequestObject, successString);
//}
});
} else if (action_type_action == 'UnFollow') {
$("#btnFollow").prop({'value': 'Follow', 'dataaction': 'Follow'});
//$("#btnFollow").prop("value", "Follow");
//$("#btnFollow").prop("dataaction", "Follow");
$.ajax({
type: 'POST',
url: '/follow_modification',
async: false,
data: {
topic: topic_id,
action: action_type_action,
follow_type: action_type
}
//complete: function(xmlRequestObject, successString){
// ymmReceiveAjaxResponse(xmlRequestObject, successString);
//}
});
}
})
});
Your code works just fine: http://jsfiddle.net/zerkms/Capvk/
Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute
http://api.jquery.com/prop/
So that's why you don't see it changed in html, but it is changed in DOM instead. If you want it to be changed in HTML as well - use .attr()
PS: as #ahren mentioned in the comments - it probably makes sense to use .data() and data-xxx properties
PPS: if you set the value using .prop() - you need to get it with .prop() respectively
If there is a need to set multiple properties with single jQuery .prop method,
just try this:
instead
$("#btnFollow").prop("value", "Follow");
$("#btnFollow").prop("dataaction", "Follow");
use
$("#btnFollow").prop({"value": "Follow", "dataaction": "Follow"});
Please use .attr jQuery method.
Please use properly html5 data attribute asenter code here data-action for which you have new jQuery method to access this data attribute with $('#btnFollow').data('action') For more details visit