Unable to call parametric-based jquery based function?

Question

I have a working jquery function which I can call like this through php

if (!order) 

        {   echo '<script>
$(function() {
$this = $("#ui-accordion-accordion-panel-0");
//  parent tab
var parent = $("#accordion").parent();
//parent.adderror();

// the content
$this.adderror();

// the header
var header = $this.attr("aria-labelledby");
$("#"+header).adderror();


// the tab
var tab = parent.attr("aria-labelledby");
$("#"+tab).parent().adderror();
});

    </script>';}

I want to make this a global function (even better if defined externally in a .js file) that I can call from wherever I want in my php, which takes the panel as a parameter.

So I would basically call - show_error("#ui-accordion-accordion-panel-0"). How could I do this? When I tried defining function, and then calling it - there was no change whatsoever. Was using through techinques defined here to no avail (var functionName = function() {} vs function functionName() {})

Thanks in advance

Ok, I have now an error.js file, which I have linked appropriately ( )

function show_error(selector) {
var $this = $(selector);

//  parent tab
var parent = $("#accordion").parent();

//parent.adderror();

// the content
$this.adderror();

// the header
var header = $this.attr("aria-labelledby");
$("#"+header).adderror();


// the tab
var tab = parent.attr("aria-labelledby");
$("#"+tab).parent().adderror();
}

FWIW, your function falls prey to [*The Horror of Implicit Globals*](http://blog.niftysnippets.org/2008/03/horror-of-implicit-globals.html) because you don't declare your `$this` variable. — T.J. Crowder, Feb 27 '13 at 11:37
What's `parent` in the line `var tab = parent.attr("aria-labelledby");`? You haven't shown anything showing where you're getting that. — T.J. Crowder, Feb 27 '13 at 11:38
My bad, thought I would just post the snippet. Ended up confusing you all, I'm sorry. Just made the relevant edit now. — Pratik Bothra, Feb 27 '13 at 11:43

T.J. Crowder · Accepted Answer · 2013-02-27T11:45:25.967

1

The function in your external .js file would look like this:

function show_error(selector) {
    var $this = $(selector);
    //  parent tab
    var parent = $("#accordion").parent();
    //parent.adderror();

    // the content
    $this.adderror();

    // the header
    var header = $this.attr("aria-labelledby");
    $("#"+header).adderror();

    // the tab
    var tab = parent.attr("aria-labelledby");
    $("#"+tab).parent().adderror();
}

edited Feb 27 '13 at 11:45

answered Feb 27 '13 at 11:36

T.J. Crowder

879,024
165
1,615
1,639

I tried something very similar, didn't work. Will try again now. – Pratik Bothra Feb 27 '13 at 11:37
@PratikBothra: Well, again, there's the question of where you're getting `parent`. But fundamentally, that **does** work, barring other issues on your page not shown in your question. – T.J. Crowder Feb 27 '13 at 11:38
To help debug the code, I added an alert($this) in the function, and this is what I get - [object Object] as the alert. So the function is being called, but no change is happening at the moment. Pretty sure the alert message, shouldn't show that, or should it? – Pratik Bothra Feb 27 '13 at 11:50
@PratikBothra: It should, `$this` is a jQuery instance (object), since it's the return value of jQuery's `$` function. That's why you can call methods on it. – T.J. Crowder Feb 27 '13 at 11:52
alert(selector) is giving me #ui-accordion-accordion-panel-0, if that helps – Pratik Bothra Feb 27 '13 at 11:52
@PratikBothra: It's something about your page that you haven't shown. Nothing for it but to properly debug it. (`alert`-style debugging went out years ago; use the debugger built into your browser to single-step through code, set breakpoints, inspect objects, etc., etc.) – T.J. Crowder Feb 27 '13 at 11:56
Here, check this out http://jsfiddle.net/buKLE/17/ ....Can you try making an internal function here, and see if it works by passing #ui-accordion-accordion-panel-1 to the function? – Pratik Bothra Feb 27 '13 at 11:56
@PratikBothra: Exactly zero issue: http://jsfiddle.net/buKLE/18/ I copied the code from my answer above, pasted it in a `script` tag, and replaced the code in your `ready` handler with `show_error("#ui-accordion-accordion-panel-1");` Works a treat (assuming it's supposed to make Tab1 red). – T.J. Crowder Feb 27 '13 at 12:03
I feel foolish, I was doing just show_error("#ui-accordion-accordion-panel-1"); instead of $(function() { show_error("#ui-accordion-accordion-panel-1"); }); Thanks anyways – Pratik Bothra Feb 27 '13 at 12:18
@PratikBothra: Ah, that would call the code too early, before the DOM elements were in place. (It would be fine if you moved that script tag all the way to the bottom of the page.) Happy coding, – T.J. Crowder Feb 27 '13 at 12:19

Unable to call parametric-based jquery based function?

1 Answers1