Passing string to jquery function

Question

<script>

   $(document).ready(function() {   
   $(".tweets").liveTweets({operator: "#google"});
            });
</script>

I like to make the #google as a variable, so that I can change the ticker symbol as needed. I tried to echo with php. But, it's breaking the live tweet jquery.

Thanks!

You want to pass '#google' as a variable into the liveTweets() object? Or you want to use PHP to echo a variable into the liveTweets() object? Do you want to do this server-side or client-side? — David Thomas
– David Thomas, Commented Apr 20, 2013 at 22:49

Community · Accepted Answer · 2017-05-23 12:18:55Z

1

<?php
  $operator = "#google";
?>

<script>

   $(document).ready(function() {   
   $(".tweets").liveTweets({operator: <?php echo json_encode($operator)?>});
            });
</script>

EDIT: Thank you for your comment @icktoofay.

He is right, we don't need to wrap output in double quotes, it does that for us. I've just updated it.

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Apr 20, 2013 at 22:59

Okan Kocyigit

13.5k18 gold badges74 silver badges132 bronze badges

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

4 Comments

zzzzBov Over a year ago

Don't build JavaScript with server side code. It's a bad design decision.

Okan Kocyigit Over a year ago

Of course it's bad practice. But If OP is trying to pass variable from server side on page load, that's one of the way to do this. Let's know what is your's?

icktoofay Over a year ago

json_encode already adds quotes; adding a pair around the call to json_encode will just generate invalid JavaScript like ""hello"".

Raja Over a year ago

Thanks guys! I am not building a super site. So used the jason_encode and worked great. FYI... I am trying to integrate this plugin in my financial website. codecanyon.net/item/live-tweets-jquery-plugin/… .. Now I need to see how to pass other variables.

zzzzBov · Accepted Answer · 2013-04-20 23:37:34Z

HTML belongs in .html files, CSS belongs in .css files, and JS belongs in .js files. If you want to pass additional data from the server (PHP in this case) to JavaScript, you should use [data-*] attributes.

Wherever you're defining your .tweets element, you should pass the value you want used for operator as a custom data-* attribute:

_HTML:

<?php
    $operator = '#google';
?>
<div class="tweets" data-operator="<?php echo htmlspecialchars($operator) ?>">
    ...contents...
</div>

In your separate JS file, you can then use the custom server variable when initializing the widget:

_JS:

$('.tweets').each(function () {
    $(this).liveTweets({
        operator: $(this).data('operator')
    });
});

Alternatively, you can use the data-* attribute to contain the entire JSON object to initialize the widget:

_HTML:

<?php
    $liveTweets = array(
        'operator' => '#google'
    );
?>
<div class="tweets" data-live-tweets="<?php echo htmlspecialchars(json_encode($liveTweets)) ?>">
    ...contents...
</div>

_JS:

$('.tweets').each(function () {
    $(this).liveTweets($(this).data('liveTweets'));
});

Also, you could select elements based on the condition of having the appropriate data-* attribute:

_JS:

$('[data-live-tweets]').each(function () {
    $(this).liveTweets($(this).data('liveTweets'));
});

Collectives™ on Stack Overflow

Passing string to jquery function

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related