Dynamically adding a script/function block in jquery

Question

EDITED:

Just wondering if is it possible to add a function (or static script) block or a variable to body of html.

Something like this,

$('body').add(function(){/../})

or

$('body').append('<script></script>')

or

$('body').fn.myFunc = function(){}

Is it correct to use .extend instead?

One example is if I use ExternalInterface, my callbacks have to be statically defined in body/html/js but not in $().ready function unless I have a var defined globally and refer it in $().ready function.

I overlooked this requirement, and thats where I wanted to add dynamic callback functions.

Either I am syntactically failing or it doesnt work at the first place. — Prem Rajendran
– Prem Rajendran, Commented Jul 29, 2010 at 7:56

jAndy · Accepted Answer · 2010-07-29 07:59:54Z

4

To create a script tag in your markup

$('<script/>', {
    type:    'text/javascript',
    src:     'http://...'
}).appendTo(document.body);

To extend jQuery use
```
$.fn.yourmethodname = function(){
});
```

answered Jul 29, 2010 at 7:59

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

Comments

Sarfraz · Accepted Answer · 2010-07-29 07:57:23Z

2

There is a method $.getScript(), you can use that too.

Example:

<script>$.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
  $("#go").click(function(){
    $(".block").animate( { backgroundColor: 'pink' }, 1000)
      .animate( { backgroundColor: 'blue' }, 1000);
  });
});</script>

answered Jul 29, 2010 at 7:57

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Comments

ntcolonel · Accepted Answer · 2010-07-29 15:32:20Z

You can pretty much attach a function to almost anything in Javascript, it really doesn't care.

In your last option, the fn object has to exist on the body DOM object before you can attach more functions to it.

Something like this would work:

$(function() {
    $('body')[0].fn = function() {};
    $('body')[0].fn.myFunc = function() { alert('Yay function'); };
});

Or, if you just want the functions right on the body element:

$('body')[0].myFunc = function() { alert('Yay function'); };

Make sure you include the [0] bit on the end of $('body'), or you will be attaching your function to a JQuery object that wraps the body DOM object. I don't think you can be assured that every time you call $('body') you will get the exact same JQuery object.

I know fn isn't defined, that's what this is for: $('body')[0].fn = function() {};

Bob · Accepted Answer · 2016-10-22 14:40:51Z

I feel your pain. But then I had such a debug nightmare with runtime script additions that I decided on another method.

This is an example of how I work it, in this case using buttons.

Instead of having static menu buttons in the code, I put a single button function and use runtime info to let my php know what button it is responding to and any page parameters your application needs. This is likely to be a minimum of a page id and section id. Not a button id, because the purpose of this method is to allow dynamic addition of buttons. Only your php needs to alter it's action for any additional buttons you add.

  <script type="text/javascript"  >
  $(document).ready(function(){
  $("button").click( function() {
         $.get( "/menu_to_body_respond.php", {
        pageId: $thisPageId
        subSecID: $thisSubID
        }, function( resp ) {
            $("#left_body").html(resp);
            });
  });
 });
</script>

Then do what ever you want with the section in your php function menu_to_body_respond.php

<?php
$pageIDVal = $_GET[ 'thisPageId'];
$subIDVal =  $_GET[ 'thisSubId'];

// code to decide what to do with this button press
// switch statements do a good job, if your 
// application has a lot of items you might want to respond to
//just put the most used items at the beginning of the switch.

//tmp code to give you a response
$outStr = $pageIDVal . " Left Body B2";
echo($outStr);
?>

You can of cause mix it up, have buttons that are responded to locally such as the general menu open/collapse and basic client side work. Just have the id named buttons first, and if one of those could respont they stop the $('button') running simply with an if-else statement.

Collectives™ on Stack Overflow

Dynamically adding a script/function block in jquery

4 Answers 4

Comments

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Related