Dynamically Create JavaScript Using PHP And Put It Between <script> Tags

Question

Usually I put JavaScript like this :

<head>
<title>Title goes here</title>
<script>
some JavaScript here
</script>
</head>

<body>
some codes here
</body>

but now I have a case that JavaScript code must be generated and equal with number of LI tags on HTML file:

$('#manage-1').click(function(e) { 
    $(this).next(".manage-content-wrap").find(".manage-content").load("test-manage-1.php");
    e.preventDefault();
});
$('#manage-2').click(function(e) { 
    $(this).next(".manage-content-wrap").find(".manage-content").load("test-manage-2.php");
    e.preventDefault();
});

I have an idea to create that JavaScript from PHP by modifying #manage-1 with variable like this : #manage-$i and any other dynamic parts.

but, is it possible to put tag inside like this :

<head>
<title>Title goes here</title>
<script>
some JavaScript here

<?php
PHP code inside script tags
?>

</script>
</head>

Looks like a sequential number set, why not just create a for loop? — TheZ
– TheZ, Commented Oct 18, 2012 at 4:38

epascarello · Accepted Answer · 2012-10-18 04:46:27Z

3

USE A CLASS!

There is no need to add a line of code for every element. Add a common class for every element you want to have the click event on. You use that as the selector. It makes the code smaller and faster.

HTML:

<a class="manage" data-file="test-manage-1.php">foo</a>

JavaScript:

$(document).on('click', ".manage", function(e) { 
    var elem = $(this); 
    elem.next(".manage-content-wrap").find(".manage-content").load(elem.data("file"));
    e.preventDefault();
});

edited Oct 18, 2012 at 4:46

answered Oct 18, 2012 at 4:39

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

1 Comment

TheZ Over a year ago

Umm, they load different php files, you need to use a for loop at the least to enumerate them sequentially. Or assume, as you did in your edit, that the Asker can add a nice attribute (which is really just moving the loop out into the PHP as opposed to having it in the javascript).

Prem · Accepted Answer · 2012-10-18 04:51:23Z

3

If you want to put your JavaScript code in php tag then you simply put in following style.

<head>
<title>Title goes here</title>
<?php echo"<script>
some JavaScript here

PHP code inside script tags


</script>";
?>
</head>

answered Oct 18, 2012 at 4:51

Prem

7073 silver badges10 bronze badges

Comments

Jason M. Batchelor · Accepted Answer · 2012-10-18 12:41:18Z

Ok, I think we can fix this with just a little refinement of your technique.

You really don't need multiple .click handlers, you need to have a better selector strategy.

Let's say you surround your LI's with this:

<ul class="managers">
    <li><a href="" id="manage-1">Link Text 1</a></li>
    <li><a href="" id="manage-2">Link Text 2</a></li>
    <li><a href="" id="manage-3">Link Text 3</a></li>
    <li><a href="" id="manage-4">Link Text 4</a></li>
</ul>

Now, you really only need one .click handler:

$(".managers li a").click(function(evt) {
    evt.preventDefault();
    var mID = $(this).attr("id");
    $(this).next(".manage-content-wrap").find(".manage-content").load("test-" + mID + ".php");
});

Mind you, you might have to modify how you find your proper .manage-content element, in this fashion, but you should get the idea.

In this way, also, you're not tying your interaction on the presentation side with your data inextricably, and you DRY up your code a bit. Almost any time you see yourself needing to spit out auto-generated code that is exactly the same except for a couple details, there is an opportunity to simplify the approach.

Hope this helps!

Praveen Kumar Purushothaman · Accepted Answer · 2012-10-18 04:40:07Z

1

Or if it is gonna be the same thing for all, please consider using a class.

$('.manage').click(function(e) { 
    $(this).next(".manage-content-wrap").find(".manage-content").load("test-manage-2.php");
    e.preventDefault();
});

Else, you can use a for() loop here.

<?php
    for($i = 1; $ < 5; $i++){?>
$('#manage-<?php echo $i; ?>').click(function(e) { 
    $(this).next(".manage-content-wrap").find(".manage-content").load("test-manage-<?php echo $i; ?>.php");
    e.preventDefault();
});
<?php }
?>

answered Oct 18, 2012 at 4:40

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Comments

noetix · Accepted Answer · 2012-10-18 04:47:37Z

1

You should write your HTML mark-up using classes and data attributes rather than IDs.

For example:

<a href="#" class="manager" data-id="1">Manager 1</a>
<a href="#" class="manager" data-id="2">Manager 2</a>

Then you can use a class selector to fetch all your "Manager" links, like so:

$('.manager').click(function(e) {
    $(this).next(".manage-content-wrap").find(".manage-content").load("test-manage-" + $(this).data('id') + ".php");
    e.preventDefault();
});

Assuming you have jQuery.

answered Oct 18, 2012 at 4:47

noetix

4,9533 gold badges29 silver badges48 bronze badges

Comments

Goran Štuc · Accepted Answer · 2012-10-18 04:39:31Z

0

you can do anything with php, therefore use it as a jquery code generator too you just echo the jquery at the specific area(exactly like you wrote it) and that's it

answered Oct 18, 2012 at 4:39

Goran Štuc

5814 silver badges15 bronze badges

Comments

DDA · Accepted Answer · 2012-10-18 04:57:10Z

0

In your javascript example you could have used a jquery wildcard assuming your id helps defining the URL of the php page:

/* Get all items with an id starting with manage and assign the click event */
$("[id^=manage]").click(function(e) { 
    $(this).next(".manage-content-wrap").find(".manage-content").load("test-" + $(this).attr('id') + ".php");
    e.preventDefault();
});

JSFiddle: http://jsfiddle.net/YM5AS/

edited Oct 18, 2012 at 4:57

answered Oct 18, 2012 at 4:40

DDA

98911 silver badges28 bronze badges

Collectives™ on Stack Overflow

Dynamically Create JavaScript Using PHP And Put It Between <script> Tags

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related