Develop Reference

How to get background image of element on click event using jquery?

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.

Hide div having variable dynamic ID

The div is a switch which gets a dynamic ID .
class name is impbtn , id is generated in variable this.impbtn6.id
HTML:
<div id="widget-id63032Candy_Eaten_importGoodsBtn" class="impbtn"></div>
There are two places hide is required - click and onload
In click event
document.getElementById(this.impbtn6.id).style.visibility="hidden";
works fine .
I cannot use Document.getelementbyID , as multiple form loads occur and button is not supposed to be hidden then .
So i trued using JQ to access css properties
This
jQuery('.impbtn, #this.impbtn6.id').css('visibility',"hidden");
works but makes all button in the class invisible . I want to make only this.expbtn6.id invisible not all ids under this class .
I have read each and every page available.Some things Iv unsuccessfully tried (Separately)
var vid= this.impbtn6.id;
jQuery("#"+ vid).visibility("hidden");
$('#vid .impbtn').css('visibility',"hidden")
var row2=$(".impbtn").find("div#"+vid);
row2.hide();
$('#vid .impbtn').css('visibility',"hidden");
$('div#vid').css('visibility',"hidden");
$('.impbtn', $("#div" + this.impbtn6.id)).css('visibility',"hidden");
$("#div"+ vid).css('visibility',"hidden");
$("#"+ vid).hide();
$('#vid').css('visibility',"hidden");
row = $('#' + vid);
row.css('visibility',"hidden");
I would highly appreciate a reply/comment.

your question is a little confusing as you say
document.getElementById(this.exportbtn6.id).style.visibility="visible";
works fine but this code shows the div, not hides it, and why cannot the same code be used to hide if you use it to show?
then your other snippet that supposedly works:
jQuery('.expbtn, #this.exportbtn6.id').css('visibility',"visible");
cannot work because #this.exportbtn6.id will not resolve to the variable's content inside the double quotes, so i am pretty sure this line will not do anything.
The way to do this correctly is
jQuery('#' + this.exportbtn6.id + '.expbtn').hide();
but i cannot tell for sure as the question is not clear. If my understanding of your question is correct, the above line will do the trick. Keep in mind that the value of "this" will differ based on context, so it maybe that you are referencing the wrong "this".

Try this
$('#this.exportbtn6.id').css('visibility','visible');

With jQuery:
$("#"+this.expbtn6.id).hide();
I hope it helps.

Ajax CSS bugg. How do i prevent from double click in order for the css to apply?

i have a div that says "on",
And i created a ajax function that everytime a user click the div. It will change the "on" to "off" (A query based on the users column will echo out if the div id is on or off ) and if the user clicks again it will switch it back to "on" again. This is how my code looks like
$(".buttons2").click(function(){
var d = $(this).attr("id");
if(d == "off")
{
$(".buttons2").css("background-position" , "0 -30px");
$(".buttons2").attr("id", "on");
}
else if(d == "on")
{
$(".buttons2").css("background-position" , "0 -1px");
$(".buttons2").attr("id", "off");
}
});
});
My problem is that, in order for the function to work, i have to click the div 2 times. What's the problem?

But it's a switch button. It depends on what the user has in the column. If the user has for example online= 1, it should start to switch in the opposite way. Off>on , on>Off. The div is based on a query

First, you should not use the ID tag like that! Changing an ID shouldn't really happen (unless you have a very good reason). A reason your code might not work is because the first value of the ID might not be right, or because the ID is not made to be change. The code provided in the question should just work.
One way would be by classes and toggle those. Easier to understand like this (IMO):
.buttons2{
background-position: 0 -30px;
}
.toggled{
background-position: 0 -1px;
}
<div class="buttons2"> Some Content</div>
And then use jquery to toggle it:
$('.buttons2').on('click', function(){
$(this).toggleClass('toggled');
});
I changed the $('.buttons2') in your code to $(this). I'm assuming there is only one .button (which, kinda ironicly, would make id="button2), so we use the 'this' to select it (much like your var d).
It's suggested in the comment you use data-* values for the intent you want. While the data-* attributes are intented for this (eg: data-state="on"), I choose classes because of jQuery's .toggleClass() because I find this easier for toggling.

ajax delete div from view on success

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

independently working div in Jquery

I am trying to make an independently working div which has a form inside of it.
I use jquery to calculate the price of a product depending of the user's selections in the form. However the user is able to add multiple items in his 'cart' so the form is duplicated to another div. The problem is that the calculation pattern can't separate these two divs and the calculation will be incorrect. The form is also interactive so it will be generated by the user's input. This is really complex set and renaming every variable by the 'product number' doesn't sound really efficient to me.
I'm kind of stuck here and i don't really know how to solve this problem. I had an idea that what if I put an iframe inside of the div and load my form and its calculation script inside of it, and then use post command to transfer the price of the product to the 'main page' to calculate the total price of all of the products the user wanted.
However it seems that jQuery scripts doesn't work independently inside of these iframes, they still have connection so they broke each other.
i will appreciate any kind of suggestions and help to solve this matter, thank you!
here's the code so far
Heres the body
var productNumber = 1;
<div id="div_structure">
</div>
<button id="newProduct" >Add new product</button><br \>
add new item
<!-- language: lang-javascript -->
$('#newProduct').click(function ()
{
$('<div id="productNo'+productNumber+'">')
.appendTo('#div_structure')
.html('<label onclick="$(\'#div_productNo'+productNumber+'\').slideToggle()">Product '+productNumber +' </label>'+
'<button onclick="$(\'#product'+productNumber+'\').remove()">Remove</button>');
$('<div id="div_product'+productNumber+'" style="display: none;">').appendTo('#product'+productNumber+'');
$('<iframe src="productform.html" seamless frameborder="0" crolling="no" height="600" width="1000">').appendTo('#div_product'+productNumber+'');
productNumber++;
});
it also has a function that allows the user to remove the inserted div.
Here's just few lines from the productform
$(document).ready(function()
{
$('#productCalculation').change(function ()
{
shape = $('input[name=productShape]:checked', '#productCalculation').val();
alert(shape);
});
});
<form id="productCalculation">
<div id="div_productShape" class="product1">
<h1>Select the shape of the product</h1>
<input type="radio" name="productShape" value="r1">R1</input><br \>
<input type="radio" name="productShape" value="r2">R2</input><br \>
<input type="radio" name="productShape" value="r3">R3</input><br \>
</div>
.
.
.
</form>
I translated all of the variables so they may not function correctly since i didn't test the translated version. So the problem is, if i try to make selections in the second generated div it wont even alert() the selected variable

There are two problems with this code: You say somewhere "I translated all of the variables so they may not function correctly since i didn't test the translated version. So the problem is, if i try to make selections in the second generated div it wont even alert() the selected variable". This is because event handlers are attached to elements that are in the DOM at that specific moment. To get it to work for all elements, use event delegation:
$(document).ready(function()
{
$(document).on( 'change', '#productCalculation', function ()
{
shape = $('input[name=productShape]:checked', '#productCalculation').val();
alert(shape);
});
});
Your other question is "My question in a nutshell: Is there a way to restrict jquery to function only in certain div even though i use the same variable names in the second div ". You can use the this variable to access the element the click was invoked on. From this element you can traverse the DOM if needed, for example with .parent().
$('div').on( 'change', function( e ) {
console.log( $(this).val() );
} );