Jquery - Passing parameters to a function

Question

I want to pass an ID to a function that turns it to a "flyout".

My base code is:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="target_anchor1" href="#" title="XXXXXXXXXX">test 1</a>

<script type="text/javascript">
  $(function() {
    $('#target_anchor1').flyout({
      title: '',
      content: function() {
        return document.getElementById('target_anchor1').title;
      },
      html: true,
      dismissible: true
    });
  });
</script>

I want to do this dynamically, so I tried a function. Function gets the parameter but does not create the flyout.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="target_anchor1" href="#" title="XXXXXXXXXX" onclick="anchorFlyout(this.id)">test 1</a>
<a id="target_anchor2" href="#" title="YYYYYYYYYY" onclick="anchorFlyout(this.id)">test 2</a>
<a id="target_anchor3" href="#" title="ZZZZZZZZZZ" onclick="anchorFlyout(this.id)">test 3</a>

<script type="text/javascript">
  function anchorFlyout(paramId) {
    alert(paramId);
    $('#' + paramId).flyout({
      title: '',
      content: function() {
        return document.getElementById(paramId).title;
      },
      html: true,
      dismissible: true
    });
  }
</script>

Code is taken from http://www.jqueryscript.net/demo/Simple-Customizable-Tooltip-Popover-Plugin-Flyout

Any idea?

Are you sure "flyout" is a thing? Stack Exchange's error tells me it's not. — AAM111
– AAM111, Commented Mar 9, 2017 at 1:51

Tyler Roper · Accepted Answer · 2017-03-08 03:09:20Z

1

Do you just want to be able to pass an ID to a function that turns it to a "flyout"?

function createFlyout(elementID) {
    $("#"+elementID).flyout({
        title: '',      
        content: function() {
            return document.getElementById(elementID).title;
        },
        html: true,
        dismissible: true
    });
}

Or you could use a custom JQuery function...

$.fn.createFlyout = function() {

    this.flyout({
        title: '',      
        content: function() {
            return this.attr("title");
        },
        html: true,
        dismissible: true
    });

    return this;
}

$("#myDiv").createFlyout();

edited Mar 8, 2017 at 3:09

answered Mar 8, 2017 at 3:04

Tyler Roper

21.7k6 gold badges35 silver badges58 bronze badges

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

4 Comments

Patricio Carvajal H. Over a year ago

I want to pass an ID to a function that turns it to a "flyout". I didn't know how to explain it, sorry. I tried first suggestion (being honest, didn't understand how to use second one you told me.) So, I edited the post. Hope it is more clear now.

Tyler Roper Over a year ago

The second function is a jQuery custom function, and you'd call it just like you would call flyout. Instead of doing $(element).flyout( ... ), you could just do $(element).createFlyout(); In regards to the first function not working, are you getting any errors in console?

Tyler Roper Over a year ago

Your first function has return document.getElementById('#'+paramId).title;. It should not have a #, as getElementById is a native JS function: return document.getElementById(paramId).title;

Patricio Carvajal H. Over a year ago

I updated the code. I deleted the #. Got no errors in console. Function gets the param (the alert inside the function works) but it seems it is not "entering" here --> $('#'+paramId).flyout({ ....

AAM111 · Accepted Answer · 2017-03-08 12:19:21Z

1

Just make a regular function and have jquery statements in it:

function anchorFlyout(paramId) {
    $("#" + paramId).flyout({
        title: '',      
        content: function() {
            return document.getElementById(paramId).title;
        },
        html: true,
        dismissible: true
    });
};
anchorFlyout("target_anchor1")

edited Mar 8, 2017 at 12:19

answered Mar 8, 2017 at 3:04

AAM111

1,2393 gold badges23 silver badges44 bronze badges

6 Comments

Patricio Carvajal H. Over a year ago

tried this, but does not create the flyout. I have edited the code.

AAM111 Over a year ago

Well, you need to call the function: anchorFlyout("target_anchor1")

Patricio Carvajal H. Over a year ago

@OldBunny2800 I did that, check out the code above. I edited it.

AAM111 Over a year ago

Are you sure you did? I don't see any function callings. Edit: edited answer to show what I mean

Patricio Carvajal H. Over a year ago

I call it this way from the link --> onclick="anchorFlyout(this.id)"

|

Collectives™ on Stack Overflow

Jquery - Passing parameters to a function

2 Answers 2

4 Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Related