Creating a JavaScript function with PHP, returned by jQuery, later called from the page

Question

Essentially I am trying to call a dynamically created function (whose name could change depending on the $.get call)

I have a PHP file which generates a JavaScript function like so:

widget.php

<?PHP $widgetID=$_GET["w"]; ?>
<script type="text/javascript">
$(document).ready(function() { 
function <?PHP echo $widgetID; ?>Hide(){
    $("#<?PHP echo $widgetID; ?>Object").attr("display", "none");
}
</script>

The main page contains code that loads this into a <div> tag using $.get()

<div id="widget"></div>
<script>
$( document ).ready(function() {
    $.get( "widget.php?w=widget", function( data ) {
        $( "widget" ).html( data );
    });  
});
</script>

What I am trying to do is later call the function that is loaded via the AJAX call (in this case widgetHide()).

Example:

$(document).ready(function() { 
    $('input:file').change(
        widgetHide();
    }
});

The function, however, cannot be called. I have tried to call the function in a number of ways (on ajaxComplete, etc), none of which have worked. No matter what I have tried the function that is created widgetHide() cannot be called.

I have seen some similar questions to this, however, none that have function names that may be able to change depending on the variable passed to the call. Although I think the fact that the function name could change is essentially irrelevant to what I am trying to do.

Is there a function to check if the function exists? Is the function out of scope?

The only solution I have found is removing the functions from the: $(document).ready(function() { } - Although I suppose for most functions this is okay, however, some require SVG elements to be loaded in order to function, This will have to do for now. — Wolf Merrik
– Wolf Merrik, Commented Nov 6, 2017 at 2:10

Nico Westerdale · Accepted Answer · 2017-11-06 01:32:12Z

2

EDIT: Just realized your problem was that the Hide function was inside $(document).ready(function() which makes in unable to be called from outside.

Regardless please also do the following, it's way more readable, and avoid mixing PHP and Javascript in an inline mess.

Instead of trying to mash the name of the widget into the javascript function, why not simply pass the widget id as a parameter:

<?PHP $widgetID=$_GET["w"]; ?>
<script type="text/javascript">
  function Hide(widgetid) {
    $("#" + widgetid + "Object").attr("display", "none");
  }
</script>

and then call it like this:

$(document).ready(function() { 
    $('input:file').change(
      Hide('widget');
    }
});

answered Nov 6, 2017 at 1:32

Nico Westerdale

2,1961 gold badge24 silver badges31 bronze badges

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

3 Comments

Wolf Merrik Over a year ago

I do think I could work on some formatting with the naming of the functions like this, It does look a LOT better. The problem is the PHP that creates the "widget" also creates a great deal more than the function (such as the things the functions hide/show) And even so, I am just not able to get the Hide(widget) function to fire.

Nico Westerdale Over a year ago

@Wolf Merrik - see the first line of the answer. You cannot have your Hide function, whatever you call it, inside $(document).ready(function()

Wolf Merrik Over a year ago

Thank you, Nico, That did seem to do the trick, I did try that and it did work just fine. I think I am just going to try a different approach to this all together. I appreciate all the help immensely!

Collectives™ on Stack Overflow

Creating a JavaScript function with PHP, returned by jQuery, later called from the page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related