jQuery variable handling

Question

I'm working on a form where I want to change an input's type jQuery, and thanks to this wonderful website I've already found out that I need to clone and replace the input to change the type. The problem I've run into is I added a variable and when I run the code it just doesn't work, it does work though when I use the ID of the input instead of the variable. Code is below.

These are the variables:

var productOne = $j("#ninja_forms_field_25");
var productOneDiv = $j("#ninja_forms_field_25_div_wrap");

This code doesn't work:

$j(".button1").click(function() {
        $j(productOneDiv).css("height", "37px");
        $j(productOne).clone().attr({
            "type": "text",
            "placeholder": "Product"
        }).insertAfter(productOne).prev().remove();
    });

This is the code that works:

$j(".button1").click(function() {
        $j("#ninja_forms_field_25_div_wrap").css("height", "37px");
        $j("#ninja_forms_field_25").clone().attr({
            "type": "text",
            "placeholder": "Product"
        }).insertAfter("#ninja_forms_field_25").prev().remove();
    });

I've searched for solutions and really couldn't find anything useful.

Korgrue · Accepted Answer · 2015-12-04 23:02:11Z

1

The problem lies in your variable declaration. There is no need to cast a string as a jQuery object.

Try:

var productOne = "#ninja_forms_field_25";
var productOneDiv = "#ninja_forms_field_25_div_wrap";

answered Dec 4, 2015 at 23:02

Korgrue

3,4781 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BAM5 Over a year ago

This works, but I hate re-instantiating jQuery objects when there's no need to.

BAM5 · Accepted Answer · 2015-12-04 23:20:34Z

I figure I'll write out a bit of an answer here to fully explain.

What you want to do (change the type of an input) is fully possible in modern browsers; jQuery just forbids it because it won't work on older versions of IE and jQuery's mission is to be cross-browser compatible.

What you have is correct, but it will only work once, after which you replace the #ninja_forms_field_25 DOM element and the productOne jQuery object will continue to refer to that replaced object internally. So in order to get it to work you just assign the new jQuery object to productOne like so

$j(".button1").click(function() {
        productOneDiv.css("height", "37px");
        productOne = productOne.clone().attr({
            "type": "text",
            "placeholder": "Product"
        }).insertAfter(productOne);
        productOne.prev().remove();
    });

Mohamed-Yousef · Accepted Answer · 2015-12-04 23:58:04Z

1

finally your problem with $j you can use $ or jQuery instead .. and your code will work fine

Working Demo

Additional:

while you use

var productOne = $("#ninja_forms_field_25");

you make it an object .. if you alert it you will get [object Object]

simple demo

Basics: $(selector).action() or jQuery(selector).action()

use it like

productOne.css() // directly .. no need to use it in $j(productOne)

edited Dec 4, 2015 at 23:58

answered Dec 4, 2015 at 22:55

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

7 Comments

BAM5 Over a year ago

This is the correct answer. When you use $j(productOneDiv).css it's like writing $j($j("#ninja_forms_field_25")).css. productOneDiv is its own jQuery object.

Ram Over a year ago

This makes no difference at all. Code $($($(window))) and you will have a jQuery object with length of 1.

BAM5 Over a year ago

I tried to edit, but am no longer able to. I just realized what the true issue was, while I still do see this as a problem, it's not THE problem. I'm explaining in my answer.

BAM5 Over a year ago

Agreed. I said that in the last comment I made. This is not THE problem.

Mohamed-Yousef Over a year ago

@Vohuman you are totally right I will update my answer with right solution .. if I don't find a right answer I will delete my answer .. Sorry about that

|

Collectives™ on Stack Overflow

jQuery variable handling

3 Answers 3

1 Comment

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related