Develop Reference

Add active class on Div with JavaScript

I want to make another image change when I click on an image. The change is working. But it doesn't show me which is active for the small "clickimage".
CodePen: https://codepen.io/timbos/pen/vYjBZqz
Please help me with this.
.container{
display:flex;
flex-wrap:wrap;
gap:30px;
justify-content: center;
margin-top: 20px;"
}
.img-responsive{
max-width:100%;
}
.activeclick {
filter: grayscale(0%)!important;
}
.clickimage {
filter: grayscale(100%);
cursor:pointer;
width: 195px;
height: 61px;
background-size: contain;
}
<div style="max-width: 1024px;">
<img class="img-responsive" id="Images" src="https://abload.de/img/15iiid.jpg" />
<div class="container">
<div class="clickimage activeclick " onclick="changeImage('https://abload.de/img/15iiid.jpg')" style=" background-image: url(https://abload.de/img/click1d0f8r.jpg); ">
</div>
<div class="clickimage" onclick="changeImage('https://abload.de/img/289ejs.jpg')" style="background-image: url(https://abload.de/img/click2bwddr.jpg);">
</div>
<div class="clickimage" onclick="changeImage('https://abload.de/img/33dfif.jpg')" style=" background-image: url(https://abload.de/img/click3q0ik5.jpg);
">
</div>
</div>
</div>
<script>
function changeImage(fileName){
let img = document.querySelector("#Images");
img.setAttribute("src", fileName);
var elems = document.querySelectorAll("activeclick ");
[].forEach.call(elems, function(el) {
el.classList.remove("activeclick");
});
e.target.className = "activeclick";
}
</script>

function "changeImage" has second parameter "this" (added also into HTML onclick for target identification in function)
var elems = document.querySelectorAll(".activeclick"); (there was missing dot for classname)
e.target.className = "activeclick"; was changed to e.classList.add("activeclick"); (better syntax for classname addition)
.container{
display:flex;
flex-wrap:wrap;
gap:30px;
justify-content: center;
margin-top: 20px;"
}
.img-responsive{
max-width:100%;
}
.activeclick {
filter: grayscale(0%)!important;
}
.clickimage {
filter: grayscale(100%);
cursor:pointer;
width: 195px;
height: 61px;
background-size: contain;
}
<div style="max-width: 1024px;">
<img class="img-responsive" id="Images" src="https://abload.de/img/15iiid.jpg" />
<div class="container">
<div class="clickimage activeclick " onclick="changeImage('https://abload.de/img/15iiid.jpg', this)" style=" background-image: url(https://abload.de/img/click1d0f8r.jpg); ">
</div>
<div class="clickimage" onclick="changeImage('https://abload.de/img/289ejs.jpg', this)" style="background-image: url(https://abload.de/img/click2bwddr.jpg);">
</div>
<div class="clickimage" onclick="changeImage('https://abload.de/img/33dfif.jpg', this)" style=" background-image: url(https://abload.de/img/click3q0ik5.jpg);
">
</div>
</div>
</div>
<script>
function changeImage(fileName, e){
let img = document.querySelector("#Images");
img.setAttribute("src", fileName);
var elems = document.querySelectorAll(".activeclick");
[].forEach.call(elems, function(el) {
el.classList.remove("activeclick");
});
e.classList.add("activeclick");
}
</script>

.container{
display:flex;
flex-wrap:wrap;
gap:30px;
justify-content: center;
margin-top: 20px;"
}
.img-responsive{
max-width:100%;
}
.activeclick {
filter: grayscale(0%)!important;
}
.clickimage {
filter: grayscale(100%);
cursor:pointer;
width: 195px;
height: 61px;
background-size: contain;
}
<div style="max-width: 1024px;">
<img class="img-responsive" id="Images" src="https://abload.de/img/15iiid.jpg" />
<div class="container">
<div class="clickimage activeclick " onclick="changeImage(event,'https://abload.de/img/15iiid.jpg')" style=" background-image: url(https://abload.de/img/click1d0f8r.jpg); ">
</div>
<div class="clickimage" onclick="changeImage(event,'https://abload.de/img/289ejs.jpg')" style="background-image: url(https://abload.de/img/click2bwddr.jpg);">
</div>
<div class="clickimage" onclick="changeImage(event,'https://abload.de/img/33dfif.jpg')" style=" background-image: url(https://abload.de/img/click3q0ik5.jpg);
">
</div>
</div>
</div>
<script>
function changeImage(event,fileName){
let img = document.querySelector("#Images");
img.setAttribute("src", fileName);
var elems = document.querySelectorAll("activeclick ");
[].forEach.call(elems, function(el) {
el.classList.remove("activeclick");
});
event.target.classList.add("activeclick");
}
</script>
Like this it should work.
It is mostly cause e was not defined and you have to pass the event to the function manually. If you use it like this.
But I highly reccommend declaring eventlisteners through js and not defining them in the html.

I've reworked your HTML so that it doesn't use inline onclick attributes. Please don't use them as they are part of an old JS spec; we have many better alternatives, like addEventListener. Even browser vendors advice to use against them - source.
Also using [].forEach.call comes from a time where browser support for the forEach method on a NodeList was shotty. Looping just became easier with for...of.
Every function that is used as a callback for an event - for examle with addEventListener - exposes an Event object. You forgot to expose the parameter which makes it difficult to know which button was pressed.
const img = document.querySelector("#Images");
const buttons = document.querySelectorAll('.clickimage');
for (const button of buttons) {
button.addEventListener('click', changeImage);
}
function changeImage(event) {
event.preventDefault();
const fileName = event.target.value;
img.src = fileName;
for (const button of buttons) {
button.classList.remove('activeclick');
}
event.target.classList.add('activeclick');
}
.container {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
margin-top: 20px;
}
.img-responsive {
max-width: 100%;
}
.activeclick {
filter: grayscale(0%)!important;
}
.clickimage {
filter: grayscale(100%);
cursor: pointer;
width: 195px;
height: 61px;
background-size: contain;
}
<div style="max-width: 1024px;">
<img class="img-responsive" id="Images" src="https://abload.de/img/15iiid.jpg" />
<div class="container">
<button class="clickimage activeclick " value="https://abload.de/img/15iiid.jpg" style=" background-image: url(https://abload.de/img/click1d0f8r.jpg); "></button>
<button class="clickimage" value="https://abload.de/img/289ejs.jpg" style="background-image: url(https://abload.de/img/click2bwddr.jpg);"></button>
<button class="clickimage" value="https://abload.de/img/33dfif.jpg" style=" background-image: url(https://abload.de/img/click3q0ik5.jpg);
"></button>
</div>
</div>

You have to pass event to function, something like this
<element onclick="changeImage('https://abload.de/img/33dfif.jpg', event)" ...
and in your function, change parameters to this
function changeImage(fileName, e) {
so you get two parameters, filename and event

Instead of html click Event, you should use js events with addEventListener (then you can storage your new image in a data attribute).
You should use getElementById instead of querySelector :
getElementById() can run about 15 million operations a second, compared to just 7 million per second for querySelector() in the latest version of Chrome. (Source, Pen I found)
Same for getElementsByClassName instead of querySelectorAll.
You only have one .activelink so you can select if with querySelector(".activeclick") or getElementsByClassName("activeclick")[0] (I'm not sure wich one is the best).
If you use for exemple addEventListener("click", (el) => {}), you can add your class with el.classList.add("activeclick").
I guess it's for the example, but in case you use images as simple as that, you could remake them with css
for (let e of document.getElementsByClassName("button")) {
e.addEventListener("click", () => {
document.querySelector(".selected").classList.remove("selected")
e.classList.add("selected")
})
}
.container{
counter-reset: section;
display:flex;
flex-wrap:wrap;
gap:30px;
justify-content: center;
margin-top: 20px;"
}
.button{
background-color:#bdbdbd;
cursor:pointer;
width: 195px;
height: 61px;
font-weight: bold;
font-size:20px;
display: flex;
justify-content: center;
align-items: center;
}
.button:before{
content:"Click\00a0";
}
.button:after{
counter-increment: section;
content: counter(section);
}
.selected{
background-color:#A3C2D6;
}
<div class="container">
<div class="button selected"></div>
<div class="button"></div>
<div class="button"></div>
</div>

How to increase the size of an image by clicking it in handlebars?

I am using node.js with the handlebars template engine. Currently, the thumbnail images from the database are displaying at a width and height of 70 which is specified in the code. See below. How can I allow the user to click on the image in handlebars and see a larger rendition of the photo?
The current images are too small to see but I would only like for them to be increased upon clicking them.
I am using handlebars....so a variation of this would help...(without "onClick=" method as I am using node.js and it won't work)
<style>
img.std {
height: 10%;
}
img.big {
height: 40%;
}
</style>
<img id="img" class="std" onClick="(this.className=='std')?this.className='big':this.className='std'" src="/uploads/{{photo_image}}">

You can add an IIFE type function, and use an arrow function so the this keyword refers to the image:
.container{
height: 200px;
border: solid 1px gray;
}
img.std {
height: 60%;
}
img.big {
height: 80%;
}
<div class="container">
<img id="img" class="std" onClick="(() => {
this.className = this.className === 'std' ? 'big' : 'std';
})(); return false;" src="http://placekitten.com/200/200">
</div>

You can do this quite easily with jQuery with:
$(document).on('click','img',function(){
if (this.id == "img") {
this.className=='std' ? this.className = 'big' : this.className='std';
}
});
<img id="img" class="std" src="/uploads/{{photo_image}}">
I would suggest to use unique id for the tag to avoid future ambiguity (potential bugs).

Here's the checkbox hack implemented to your code:
.imgcontainer {
position: relative;
display: inline-flex;
align-items: stretch;
justify-content: stretch;
}
.imgcontainer input[type='radio'] {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.imgcontainer input[type='radio'] + img.std {
height: auto;
width: 100px;
}
.imgcontainer input[type='radio']:checked + img.std {
width: 200px;
}
<div class="imgcontainer">
<input type="radio" name="imgcontainerradio">
<img id="img" class="std" src="http://placeimg.com/640/480/any">
</div>
<div class="imgcontainer">
<input type="radio" name="imgcontainerradio">
<img id="img" class="std" src="http://placeimg.com/640/480/arch">
</div>
<div class="imgcontainer">
<input type="radio" name="imgcontainerradio">
<img id="img" class="std" src="http://placeimg.com/640/480/nature">
</div>

Add image below a certain class of element using css

What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example

You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}

I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>

Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>

You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>

hiding a "No file chosen" tooltip in Javascript

I know there are many question about it, but they don't answer properly.
After readings and looking for, I tried this:
<input id="ext-element-47" class="x-input-file x-input-el" type="file" accept="" style="display:none">
hiding the file-input and then
this.element.down(".x-input-file").dom.click();
this works on Chrome's console but in my JS code it doesn't. It doesn't click.
Anyone knows why? and what can I do for make click?
Notes:
I need to make click because the file element is not visible and so when it clicks it does not show unless I do element.click ().
Here is an example what I'm doing:
document.getElementsByClassName('o-file-field-input')[0].click()
.o-file-field-input {
display: none;
}
.o-big-btn {
background-color: red;
height: 3em;
width: 3em;
}
<div class="x-container x-unsized o-cont-option" data-componentid="ext-container-5" id="ext-container-5">
<div class="x-inner x-align-center x-pack-center x-horizontal x-layout-box" id="ext-element-50">
<div class="x-button x-button-plain open-field-icon o-big-btn x-layout-box-item x-flexed x-stretched" id="ext-OUI_BaseButton-1" data-componentid="ext-OUI_BaseButton-1" tabindex="0" style="-webkit-box-flex: 1;">
<span class="x-button-icon x-shown smf smf-upload-file" id="ext-element-45"></span>
<div class="o-button-bg"></div>
<div class="x-unsized x-field-input x-has-height" id="ext-fileinput-1" data-componentid="ext-fileinput-1" style="height: 38px;">
<input id="ext-element-47" class="x-input-file x-input-el o-file-field-input" type="file" accept="">
<div class="x-field-mask x-hidden-display" id="ext-element-48"></div>
<div class="x-clear-icon" id="ext-element-49">
</div>
</div>
</div>
</div>
</div>
See ya!

Here's what I usually do: Wrap the input inside a <label> element, and then style the element as a button, for example:
.pretty-file {
border: 1px solid #000;
cursor: pointer;
display: inline-block;
padding: 5px 15px;
}
.pretty-file input[type="file"] {
display: none;
}
<label class="pretty-file">
Choose File
<input type="file" />
</label>

This finally works well:
var obElement = document.getElementsByClassName('input-file')[0];
//the title property overrides tooltip's description
obElement.setAttribute('title', ' ');
.flex-style{
display: flex;
}
.input-file{
opacity: 0;
margin-left: -40px;
width: 40px;
height: 45px;
}
.icon{
width: 40px;
height: 45px;
background-color: blueviolet;
}
<div class='flex-style'>
<div class='icon'></div>
<input class='input-file' type='file'>
</div>

disable jQuery removing javascript tags

Best all,
I'm trying to debug our CMS (what is mostly AJAX) but jQuery removes all the script tags, what makes me unable to debug the JavaScript, how do I disable this behaviour?
I thought I would find it after a simple Google search but no success :(
Thank you,
EDIT
my Page before:
<script>
jQuery(function(){
inter = null;
jQuery('#parse').click(function(){
jQuery('#answer').load(f(),{"POST":jQuery("#POST").val(),"start":((jQuery('#start').val()-1)*10)},function(){
alert("Burrrnnnnnnn")
console.log("Laten we is kijken: " + inter);
clearInterval(inter);
});
inter = setInterval(function(){
jQuery.getJSON("/googlemonster/backend/status-test",function(json){
setProgressBar(json);
});
},200);
return false;
});
});
function
function setProgressBar(obj){
var g;
jQuery("#progress-bar,#progress-text-alt-wrapper").animate({"width":(((g=obj["%"])==0?1:g)*2) + "px"},{queue:false});
jQuery("#progress-text,#progress-text-alt").text(obj["%"] + "% " + obj["status"]);
}
</script>
<style>
#progress-text-alt-wrapper {
height: 30px;
position: absolute;
z-index: 2;
width: 1%;
overflow: hidden;
}
#progress {
border: solid black 1px;
padding: 1px;
text-align: center;
height: 20px;
width: 200px
}
#progress-bar {
background-color: green;
width: 1%;
height: 100%;
}
.progress-bar-text {
padding-top: 3px;
text-align: center;
width: 200px;
position: absolute;
}
#progress-text {
color:green;
}
#progress-text-alt {
color:#eee;
}
</style>
Query:
<input id="POST" type="text" />
<br>
Pagina
<input value="1" id="start"
type="number" />
<br>
<button id="parse">Look</button>
<div>
<div id="progress">
<div id="progress-text-alt-wrapper">
<div class="progress-bar-text" id="progress-text-alt">0% Nothing</div>
</div>
<div class="progress-bar-text" id="progress-text">0% Nothing</div>
<div id="progress-bar"></div>
</div>
</div>
<div id="answer"></div>
The page after
<style>
#progress-text-alt-wrapper {
height: 30px;
position: absolute;
z-index: 2;
width: 1%;
overflow: hidden;
}
#progress {
border: solid black 1px;
padding: 1px;
text-align: center;
height: 20px;
width: 200px
}
#progress-bar {
background-color: green;
width: 1%;
height: 100%;
}
.progress-bar-text {
padding-top: 3px;
text-align: center;
width: 200px;
position: absolute;
}
#progress-text {
color:green;
}
#progress-text-alt {
color:#eee;
}
</style>
Query:
<input id="POST" type="text">
<br>
Pagina
<input value="1" id="start" type="number">
<br>
<button id="parse">Look</button>
<div>
<div id="progress">
<div id="progress-text-alt-wrapper">
<div class="progress-bar-text" id="progress-text-alt">0% Nothing</div>
</div>
<div class="progress-bar-text" id="progress-text">0% Nothing</div>
<div id="progress-bar"></div>
</div>
</div>
<div id="answer"></div>

You are right – it is a feature of jQuery to strip out script tags. You need to use the basic JavaScript methods instead.
See: Can't append <script> element
Scripts will be evaluated first, and then discarded.
http://api.jquery.com/append/

after some research I finnaly could fix the problem thanks to the guys here,
I made a little plugin for jQuery for it, now the script tags are not getting, removed but executed.
(function($){
$.fn.loadDebuggable = function(url){
data = typeof(arguments[1]) == "object"?arguments[1]:{};
success = arguments[2]||typeof(arguments[1]) == "function"?arguments[1]:function(){};
return $.ajax(url,{
"context":this,
"success":[function(data){
var div = document.createElement('DIV');
div.innerHTML = data;
this[0].innerHTML = "";
while (div.firstChild)
{
this[0].appendChild(div.firstChild);
div.removeChild(div.firstChild);
};
},success],
"type":"GET",
"data":data
});
}
})(jQuery);
Thanks,