How to simulate a click button with parameters

Question

I'm using a bootstrap dropdown menu, and I need to set the default option (Highest positive votes) when the user reload the page.

I tried it $('#dropdownMenuButton span.option').text("Highest positive votes");, but it didn't solve my problem because I can't keep the text on the js file, I need to keep the text on the html file due the translation of the django framework {% trans 'Highest positive votes' %}

HTML Code

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">        
    <span>{% trans 'Sorted by' %}: </span><span class="option">{% trans 'Highest positive votes' %}</span>
</button>

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item itemSort" href="#" name='thumbsUp'>{% trans 'Highest positive votes' %}</a>
    <a class="dropdown-item itemSort" href="#" name='thumbsDown'>{% trans 'Highest negative votes' %}</a>
    <a class="dropdown-item itemSort" href="#" name='creationOrder'>{% trans 'Latest' %}</a>
</div>

Jquery

$('a.itemSort').click(function() {
    if (this.name == 'thumbsUp') {
        ...
    } else if (this.name == 'thumbsDown') {
        ...
    } else if (this.name == 'creationOrder') {
        ...
    }
    $('#dropdownMenuButton span.option').text($(this).text());
});

I expect that when I relaod the page, the dropdown-menu show the text Highest positive votes.

I'm trying to simulate the click on the thumbsUp option on the dropdownMenuButton.

How can I do that? There's a better way to solve it?

ps.: I tried implement the solutions that I read in another questions similar to that. But it's not the same problem.

I need to call the function in the js file. I tried something like $("#dropdownMenuButton").on('click', parameter). But it didn't work. You're right, the same id is not correct, I'm gonna fix it. — mr.abdo
– mr.abdo, Commented Feb 11, 2019 at 11:56

dporechny · Accepted Answer · 2019-02-11 12:04:26Z

1

You can create a few spans inside the button and then hide/show needed one. Just a bit of CSS and JS is required

function show (classname) {
  // targeting your button
  const button = document.getElementById('button')
  // find all possible texts inside of it
  const spans = button.getElementsByTagName('span')
  // hide all of them
  Array.prototype.slice.call(spans).forEach(span => span.classList.remove("visible"))
  // select one to be shown
  const next = button.getElementsByClassName(classname)[0]
  // show it
  next.classList.add('visible')
}

.thumbsUp,
.thumbsDown {
  display: none;
}

.visible {
  display: block;
}

<button id="button">
  <span class="thumbsUp visible">Thumbs UP</span>
  <span class="thumbsDown">Thumbs Down</span>
</button>
<div>
  <button onclick="show('thumbsUp')">Show thumbs up</button>
  <button onclick="show('thumbsDown')">Show thumbs down</button>
</div>

answered Feb 11, 2019 at 12:04

dporechny

6465 silver badges12 bronze badges

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

1 Comment

mr.abdo Over a year ago

I didn't code exactly how u said, but I used your idea to solve it. Tku

NemoStein · Accepted Answer · 2019-02-11 12:14:06Z

1

To click a specific anchor, you can target it with a property selector, like this.

$('a.itemSort[name="thumbsUp]"').click()

edited Feb 11, 2019 at 12:14

answered Feb 11, 2019 at 11:59

NemoStein

2,0982 gold badges23 silver badges36 bronze badges

3 Comments

Shubham Over a year ago

Add quotes in name selector $('a.itemSort[name="thumbsUp"]').click();

NemoStein Over a year ago

Nice catch @Shubham. For strings of alphanumeric value only it works, but other special character may wreck havoc...

mr.abdo Over a year ago

It's not working. I need to simulate a click on a.itemSort, because I will call it in other js function

Muho · Accepted Answer · 2019-02-11 12:38:13Z

1

django template variables only run at runtime when the page first loads and when you click on the menu it does not take the translated text by django 'trans' formatter.

so you can solve your problem by saving the dropdown items text in javascript object variable and use it like that:

var translatedTextsObj = {
    'thumbsUp': {% trans "Highest positive votes" %},
    'thumbsDown': {% trans "Highest negative votes" %},
    'creationOrder': {% trans "Latest" %}
}

$('a.itemSort').click(function () {

   if(this.name == 'thumbsUp'){
       ...
   }

   else if(this.name == 'thumbsDown'){
       ...
   }

   else if(this.name=='creationOrder'){
       ...
   }

   $('#dropdownMenuButton span.option').text(translatedTextsObj[this.name]); // here is the translated text
});

edited Feb 11, 2019 at 12:38

answered Feb 11, 2019 at 12:22

Muho

3,5762 gold badges26 silver badges36 bronze badges

4 Comments

mr.abdo Over a year ago

I got it: Uncaught SyntaxError: Unexpected identifier. When I use double quotes: ` 'thumbsUp': '{% trans "Highest positive votes" %}' ` it doesn't translate.

Muho Over a year ago

I just removed the single string quotes from django formatter, can you please try it now

mr.abdo Over a year ago

Applying those modifications. I got it Uncaught SyntaxError: Unexpected token %

Muho Over a year ago

please be aware that in order of this to work, the javascript code should be inside the html page and that html page should be connect to django engine somewhere.

kealaxshan · Accepted Answer · 2019-02-11 11:56:16Z

0

try this

$('#dropdownMenuButton').html("<span>{% trans 'Sorted by' %}: </span><span class="option">{% trans 'Highest positive votes' %}</span>");

answered Feb 11, 2019 at 11:56

kealaxshan

3522 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to simulate a click button with parameters

4 Answers 4

1 Comment

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related