I have an ajax image uploader that I am currently trying to do a delete link for, I have the delete script working, but on success I want it to also remove the div and replace with "Image Deleted" text, but I am a little confused on how to remove a div where the id will always be different (set from a var).
$(function(){
$(document).on('click','.trash',function(){
var image_id= $(this).attr('id');
$.ajax({
type:'POST',
url:'/includes/delete_image.php',
data:{'image_id':image_id},
success: function(data){
if(data=="YES"){
$('#image_id').remove()
}else{
alert("can't delete the row")
}
}
});
});
});
That's the code, so on data=="YES" I want this:
<div id="image_id">
<img src=\"/uploads/articles/article_images/image_name" class='imgList'><br />
BBCode: <input type="text" class="form-control" value="[img]http://www.prxa.info/uploads/articles/article_images/{$image_name}[/img]\" /><br />";
Delete Image
</div>
To be deleted, where "image_id" will be a number set as "image_id" in the ajax code, any pointers? I am doing it horribly wrong right now heh.
"image_id" is different everytime of course.
you have more than 1 element with the same id, so to get the div you could try:
$("div[id='image_id']").remove();
have you tried to change this:
$('#image_id').remove();
to this:
$('#'+image_id).remove();
As it seems you have the image_id as a variable. So you should be able to use in your success callback.
$('#'+image_id).html('image was deleted successfully...');
You can give the id's different prefixes like
'div_' + image_id and 'img_' + image_id
use this
$("#"+image_id).remove();
instead of
$('#image_id').remove();
Assuming the HTML div is repeating, you won't want them to all have the same id. Change this to a class of image, or something else meaningful to your css.
You do this two ways. Either set a data attribute on the div, or use the parent jquery function to get the parent div of the link you clicked.
Setting the data attribute is probably considered better practice. Add the attribute data-image-id, and then you can select the div based on that attribute's value, and then remove it.
<div data-image-id="[your image id]">
Then you can then select the div based on the attribute as explained in the jquery docs
Related
I try get value for style and also in side this tag values for background-image
I do this little script :
function url_image(id){
var valimg = jQuery("."+id+". cycle-slide").attr("src");
alert('' + valimg);
}
<div onclick="url_image('imm_1');" class="imm_1 cycle-slide" style="background-image:url('website.com/image.jpg')"></div>
The idea it´s that when i do click over the div, send the value of background-image to the script and show, but no get this because i don´t know how get the value from tag style. That´s all problem
You can use :
var valimg = jQuery("."+id+".cycle-slide").css("background-image")
Like #Musa mentioned in comment.
Hope this helps.
What I'm trying to do is, when one of six divs is clicked, a separate div will have 3 specific divs appear in it. Each of the original six divs have three similar but different divs related to it.
http://jsfiddle.net/petiteco24601/hgo8eqdq/
$(document).ready(function () {
$(".talkbubble").mouseout(function(){
$(".sidebar").show();
});$
$(".talkbubble").click(function(){
$
How do I make it so that when you click a "talkbubble" div, a different "sidebar" div appears with all its contained elements, and when you mouseout, the first talkbubble div automatically activates?
Here is a demo of how to do this: http://jsfiddle.net/n1xb48z8/2/
The main part of this example is some javascript that looks like this:
$(document).ready(function(){
showSideBar(1);
$('.expander').click(function(){
var sidebarIndex = $(this).data('sidebar-index');
showSideBar(sidebarIndex);
});
$('#Container').mouseleave(function(){
showSideBar(1);
});
});
function showSideBar(index){
$('.sidebarContent').hide();
$('.sidebarContent[data-index="' + index + '"]').show();
}
.data('some-name') will get you the attribute data-some-name="" on the specific element, this is a html 5 attribute and if you do not want to use it you can instead give each of the elements their own class names such as:
<div class="sidebarContent subBarContent_1">
<!-- content -->
</div>
and use the '.subBarContent_1' as your jquery selector instead. You would then also have to have some sort of data attached to your clickable divs to identify which one you wanna show, you could use a hidden field to do that like:
<input type="hidden" class="subContentSelector" value="subBarContent_1" />
The javascript for that looks like this:
$(document).ready(function(){
showSideBar(1);
$('.expander').click(function(){
var sidebarSelector = $(this).find('.subContentSelector').val();
showSideBar(sidebarSelector );
});
$('#Container').mouseleave(function(){
showSideBar('subBarContent_1');
});
});
function showSideBar(selector){
$('.sidebarContent').hide();
$('.sidebarContent.' + selector).show();
}
Ps. the overflow:hidden css is because chrome was messing up the placement of the sidebar content otherwise... oh chrome, you silly goose
What I'm trying to do is append to text from a input field to a div as the user is typing...
So they can see what the text will look like.
What I have is the below.
jQuery('#options_6_text').keyup(function() {
jQuery('.product_zoom').appendTo(jQuery(jQuery(this).val()));
console.log(jQuery(this).val())
});
Now the console.log is working as I would have thought, however the text does not seem to be appending to the .product_zoom div, any ideas what I'm doing wrong??
Thanks!
EDIT
jQuery('#options_6_text').bind('keyup blur', function() {
jQuery('.product_zoom').text(jQuery(this).val());
});
This allowed me to do exactly what I was after.
Thanks
Change to this:
jQuery('.product_zoom').html(this.value);
You're going to want to use .html() for this, this way it replaces the div content each time the user types, the append() was adding to the current content each time.
Demo: http://jsfiddle.net/rRnSB/
Simply doing it like this: SIMPLE FIDDLE
$('#options_6_text').keyup(function() {
$('.product_zoom').text(this.value);
});
i'm a little confused.
i want to actually reload the same page and fetch a div with a certain id from it. so i'm trying to reload a part of website into the same part of the website. ;) i know it sounds weird.
somehow i don't get what i'm doing wrong or better how i have to do it.
var $sv = $('#server_view');
$sv.load('/server/ftp/' + goToURL + " #server_view");
so in this case the same div gets loaded into the same div and that's not what i want.
it then looks like:
<div id="#server_view"> <div id="#server_view"> blabla</div> blabbla </div>
i actually just want to grab the contents of the div inside and reload them. how can i solve this little problem.
You can grab the children with the selector you're passing to .load(), like this:
var $sv = $('#server_view');
$sv.load('/server/ftp/' + goToURL + " #server_view>*");
All we're doing different is getting all direct children to insert using the > child selector.
use .get and replace the element
$.get('/server/ftp/' + goToURL, function(response){
var newContent = $(response).find('#server_view').html();
$('#server_view').replaceWith( newContent );
});
Simple end fast.
$( "#content" ).load( "# #content>*" );
if you are using $('#server_view');, you must have DIV ID as server_view, not #server_view
I'm building a multi-feed RSS reader for school.
aList is the div that encompasses each individual feed (the amount of feeds will fluctuate).
theTitle is the div that will be filled with the attribute of the current feed. Additionally, if clicked, it will load a list of attributes from the current feed into theContent.
I'm wondering how I can dynamically load the attributes into theContent when theTitle is clicked, since theContent and theTitle are going to be non-unique divs (I can't give them IDs).
Thanks for your help in advance,
-Andrew
document.getElementsByClassName('aList').getElementsByTagName('div')
You should look into jQuery selectors for that and other DOM Manipulation. Something like
$("div.theContent").attr("name", "value");
by using jquery, you may use code like the following:
$(".theTitle").bind("click", function(){
$el = $(this);
$el.parent().$(".theContent").load('ajax/content.php?news=' . $el.text());
});
this will make all your links clickable, an on click, update their corresponding content divs with the value of ajax/content.php?news=theTitle-value
Use a nice Javascript library such as Prototype or jQuery. Seems petty now, but these frameworks save you tons of time in the long run.
In both frameworks, you can select that div with:
$('div.theTitle')
With jQuery, you can do:
$('div.theTitle').click( function() {
var title = $(this).text();
var contentDiv = $(this).siblings('div.theContent');
// Do something with contentDiv and the title
} );
This will make every theTitle div have an onClick event that does something with its associated theContent div.
<div class="aList">
<div class="theTitle" onclick="fillContentBox(this)"></div>
<div class="theContent"></div>
</div>
And in your script ...
function fillContentBox(div) {
var theContentDiv = div.parentNode.getElementsByTagName("div")[1];
// statements that do things with theContentDiv
}
You have to be able to determine which element you want to update if you don't want to update more than one. If the elements are grouped inside something else that does have an "id" value, you can take advantage of that.