I'm trying to make it so that a popover does/doesn't appear based on a conditional.
<form class="submit-form" action="{% url 'search' %}" method="post">
{% csrf_token %}
<input type="submit" class="show-more-button pop" id="mybtn" style="margin-left: 5px" name="mybtn"
value="Search" data-bs-toggle="popover"
data-bs-placement="right" data-bs-trigger="focus"
data-bs-content="Please select one or more ingredient">
</form>
$(document).on('click', '#mybtn', function (){
var $btn = $('#mybtn')[0]
var $pop = bootstrap.Popover.getInstance($btn)
if ($(lst).length > 0) {
$pop.hide()
}
However, on clicking the button the popover comes up briefly before being hidden.
Is there any way I can basically prevent the popover from appearing in the first place if the conditional is met or at least make it so that it doesn't flash before it's hidden?
The popover is being shown by Bootstrap due to the data-bs-toggle="popover" attribute. After that gets run, then your hiding code gets run. Hence the brief appearance.
Bootstrap has a "show.bs.popover" event. My guess is if you attach a listener for that event, then preventDefault on the event, that'll stop the popover from showing.
Alternatively, rather than relying on Bootstrap to automatically trigger the popover, you could do it manually - and only manually trigger the popover if the conditions succeed.
Related
Edit: Title makes more sense now.
I'm currently writing basic CRUD functionality using a popular web framework. In the edit section of my app, I have a 'Delete' button. When the button is clicked, I want a div containing text and two more buttons to appear, giving me the option to continue with the deletion. The delete functionality is handled by the framework, which is working just fine.
(I hate that inline CSS as much as you do, but bear with me, makes it easier for illustration purposes)
My HTML:
<style type='text/css'>
#overlay {
visibility: hidden; }
</style>
<form method='POST' action='', enctype='multipart/form-data'> {% csrf_token %}
{{form.as_p}}
<input type='submit' name='save' value='Save post'/>
<button onclick='toggleDeletion()'>Delete</button>
<div id='overlay'>
<p>Are you sure you want to delete this post? It‘ll be lost forever...</p>
<form method='POST' enctype='multipart/form-data'> {% csrf_token %}
<input type='submit' name='yes' value='Yes' />
<button onclick='toggleDeletion()'>No</button>
</form>
</div>
</form>
My JavaScript:
function toggleDeletion() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == 'hidden') ? 'hidden' : 'visible';
}
When I click the first 'Delete' button it works for about a half a second; the overlay div becomes visible. However it then vanishes, and doesn't come back. I'm relatively fresh to JavaScript, though not programming in general, and I am assuming there's some nuance of the language I'm completely missing out on. It doesn't appear to be looping through the function continuously, nor does it break. It just runs fleetingly. That or a stupid typo that's making me look like a fool.
You click the button
The JavaScript runs and modifies the DOM loaded into the browser
The form submits (because you clicked a submit button)
The browser loads a new page (which doesn't have the changes you made to the DOM with JS because they were only local)
If you don't want to submit the form when you click the button, don't use a submit button. Add type="button".
When your form submits, the page refreshes and you thus need to reapply the js/css changes on document load... or submit using AJAX and change the input type from submit to button / or return false on clicking the submit button.
I am working on an asp.net application where I have button written like this:-
<button onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>
I have also a client-side javascript function for the above button:
<script type="text/javascript">
function imagech() {
alert('image clicked.');
}
</script>
What I want that is whenever I click that function then the button click event should not fire page-load. The above object is not server control but it's event occurs page-load. I can also use another html control like this:
<input type='button' onclick='javascript:cartclicked(this);' value='X' class='close_product color_dark tr_hover' />
and this does not occurs page-load but I want icon also used as :
<i class='fa fa-times'></i>
inside <button> tag. but the <i> tag is not used in <input> tag. How I can <button> tag event without any page-load? Please help me someone here.
it seems you are using <button> inside a <form> element. By default a button acts as a submit button and it tries to submit your form on click.
In order to continue using button and avoid this issue you need to specify type as button as shown below
<button type="button" onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>
If I understand you correctly the problem is that the button is inside a form (The main asp.net form) and the click event post the form to the server. That's why you the page load occurred.
The solution Just add to the button (it doesn't matter if you are using input or button) attribute type="button".
Im actually having a problem with html5 button in visualforce pages. I have a requirement where when i click on a button, it should redirect to a certain page (user do not want link). For some reason which i don't know, the function i'm executing do not work with HTML5 button (in fact the page only refresh but do not redirect) but when i use input of type button, the function is executed as expected.
I want to use the html5 button as there are some specific css already defined for button in the plugin im using. Find below codes for my button and javascript function :
<button class="butt" onclick="newContact()" >Nouveau</button>
<script type="text/javascript">
function newContact(){
window.location = "/apex/VFP01_NewContact";
}
</script>
What did I do wrong here, and what is the limitation of html5 button ?
Got to know the answer. In visualforce page, the html5 button execute a submit of my form. A way to prevent this, was to specify the attribute type="button".
You really have two options.
You could consider wrapping a element with an anchor tag that points to the URL that you want to target as seen below :
<!-- Target the "YourAction" action in your "YourController" controller -->
<a href='#Url.Action("YourAction","YourController")'>
<input type="Button" id="mybutton" name="url button" value="Next" />
</a>
or you could handle this purely through Javascript and perform your navigation that way :
<!-- The onclick event will trigger a Javascript call to navigate -->
<input type="Button" id="mybutton" name="url button" value="Next" onclick="window.location.href='#Url.Action("YourAction","YourController")';" />
I am developing a web application. You can find the website here.
If you click on the "road" icon, and after the menu opened the plus sign ("+"), a text input will appear with a label. This <ul> is using the jQueryUI Sortable plugin, to - of course - be able to sort the addresses after input.
I would like to add a click event to the label of these address fields, so that when a user clicks the number, a dialog box will appear where he/she can manually edit the number (it can get a little counter-productive if there are hundreds of addresses).
Since the <li> elements, in which the label and the inputs are gets created later, I tried to delegate the click event, like so:
$(document.body).on('click', '.control-label', function () {
console.log($(this));
});
However the event never fires. I am starting to think that maybe the sortable plugin disables my events to that label?
Here is the HTML code of an address field (label+input+delete button)
<li>
<div class="form-group">
<label class="col-md-1 control-label">1.</label>
<div class="col-md-11 input-group">
<input type="text" name="waypoints[]" class="form-control form-control-square waypoint animated fadeInRight" placeholder="Megálló" autocomplete="off" required=""><span class="input-group-btn animated fadeInRight"><button type="button" class="btn btn-square btn-danger btn-removewaypoint animated fadeInRight">×</button></span>
<div class="search-suggestions">
<ul></ul>
</div>
</div>
</div>
</li>
Here is the addWaypoint() function which adds a new row. This gets called every time when the user clicks the + button.
Edit: Apparently it isnt the sortable plugin, but something else that blocks the click event. Anyone got any ideas?
You need to setup a variable related to each control-label class in order to console.log it (or alert it, or use it anyway you want).
This is how I suggest you modify the javascript:
$(document.body).on('click', '.conrtol-label', function () {
var spanText=$(this).text();
console.log($(this));
alert(spanText);
});
Maybe this fiddle would help: http://jsfiddle.net/jo6957au/1/
Modified to use li's http://jsfiddle.net/jo6957au/3/
I have a area surrounded by an anchor tag and it should be directed to anchor tag href wherever user clicks on that area. And also that area should contain a textbox and button control which should allow user to type some text and submit. The problem is when I click on the textbox or button it does a redirect to the page given in anchor tag.
<a href="http://stackoverflow.com/">
<div style="border:1px solid grey;width:300px;height:100px;">
<div style="">Title</div>
<div>
<input type="text" name="name">
<button type="button" onclick="alert('button clicked');">Click Me!</button>
</div>
</div>
</a>
Please refer this jsfiddle.
I have created a simplified problem here.
However I found a solution for this by giving negative margin-top values. It is working but I am interested in a better solution. Because this solution is not scalable since the button and textbox are not inside the content div.
Each of these sections represent a item in a search result. When a user click on a search item it would navigate to single item page. At the same time users should be able to edit content from search results view by selecting edit option. When they select edit, a textbox and a button to submit should appear.
Unfortunately the HTML5 spec says about the <a> element:
Content model:
Transparent, but there must be no interactive content descendant.
What that means is, an <a> element is allowed to contain any elements that its parent is allowed to contain, except for things like <button>.
You'll need to find a way to get your <button> and <input> working outside of the <a>
Use this
<input type="text" name="name" onclick="return false;" />
Use this only if you don't want to change your markup.
The best solution is go with the semantics of HTML and style it. This way is not correct as Gareth pointed out.
In the case of your button
<button type="button" onclick="buttonClick(event);">Click Me!</button>
function buttonClick(e) {
alert('button clicked');
e.preventDefault();
}
Introduce a onclick for textfield and use stoppropagation method for a event. for ex ,
textfield.onclick = function(e) {
e.stopPropagation();
}
Another alternate is to use <div onclick="function()"> instead of <a> tag for what you think to achieve