CODEWITHSUNDEEP
javascriptjquery
mr.abdo
mr.abdo

Reputation: 485

How to simulate a click button with parameters

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.

Upvotes: 1

Views: 309

Answers (4)

Muho
Muho

Reputation: 3536

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
});

Upvotes: 1

NemoStein
NemoStein

Reputation: 2098

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

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

Upvotes: 1

dporechny
dporechny

Reputation: 646

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>

Upvotes: 1

kealaxshan
kealaxshan

Reputation: 352

try this 

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

Upvotes: 0

Related Questions