I'm populating values in a div based on clicks to buttons on the page, but it's requiring 2 clicks for the value to change. The first part is populating the calloutAmt and calloutAmtdouble spans with the values that appear on page load, then the next part should change them based on the button clicked, but it takes two clicks to do so.
jQuery(document).ready(function($) {
$("#calloutAmt").text(selectAmt);
$("#calloutAmtdouble").text(selectAmt * 2);
$("div.donation-level-container").on("click", function() {
$("#calloutAmt").text(selectAmt);
$("#calloutAmtdouble").text(selectAmt * 2);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="matchcallout">Your gift of $<span id="calloutAmt"></span> will be DOUBLED to do $<span id="calloutAmtdouble"></span> worth of good! </div>
Well, I can't comment, because I don't have the required reputation.
That being said, nothing in your code allows us to determine issue. You would have to post the full code to get that.
BUT it seems obvious that this is working as expected and that your issue is going to lie in the setting of the variable selectAmt, which is still undefined or '' or whatever first time you click button, then gets generated by ajax or whatever.
Thus, second time you click, the variable has already been populated by the first round and is ready to be inserted into the dom. One way to check if this is indeed issue is to change the value of selectAmt between clicks and see if the value always lags one click behind of expected value. In theory, what you would want to do is set the text in the span not on click of button, but after the calculation or however selectAmt gets populated.
Hope this helps.
--edit--
Add a console.log(selectAmt) inside of the on click function... in theory, this will be empty first click but not second, confirming my mentioned suspicions above.
Related
Hi I have a button that inserts empty records into an interactive grid. I want to prevent the user from being able to double click that button because it populates duplicate rows. I have a server side argument that says if there are rows the button does not appear however they are still able to double click the Populate_tables button before it vanishes. If there are any other solutions to this please sound off. I've tried everything from javascript to server-side but they are still able to double click no matter what. Here are the before and after pictures of the table.
$('#btnPopulateTbl').dblclick(function(e){
e.preventDefault();
});
The above code prevents the double click for a button. This is in jQuery.
Oracle Apex does not offer this functionality as a setting or etc.
However you can use
$('#button').click(function(event) {
if(!event.detail || event.detail == 1){
// This will be executed once even user clicks multiple times
}
});
Note that your selector must be the id or the class you provide to this button.
By default 'add row' button's classes are:
class="a-Button a-Toolbar-item js-actionButton"
Another solution would be to have apex handle this. Suppose this is on page 1.
Create a page item P1_POPULATE_ROWS_CLICKED with a default value of 'N'
In the page process that populates the table, add the following line before the actual load:
:P1_POPULATE_ROWS_CLICKED := 'Y';
Add a condition to the page process that populates the table of "Item not equal to value", P1_POPULATE_ROWS_CLICKED , Y
Yet another solution is to only execute the insert statement if no rows exist with that condition yet. I can't show you how to do it because you didn't show how the table is populated but happy to do so if you edit your question. This last option is propably the most suitable.
The variable data passed to a Bootstrap modal is hard coded in HTML data-text element field using "data-text" (according to the Bootstrap examples). If the modal's purpose is to allow a user to change that, then how do I send that back to the raw HTML data-text to update it for next time?
JS newbie here. I got Bootstrap 4 modals working and updating back to the server by Ajax (with a lot of Googling of StackOverFlow thanks!). I have about 100 text elements on the page which all load the same modal for editing of the clicked text field. The field initial value is hard coded into the page HTML in the data-text field (following the Bootstrap modal example). This allows passing of the current text value to pre-populate the modal field with the existing text value for editing.
Next, the user edits the note field in the modal and clicks submit. I am able to get the value and pass it back to the server, and update the DOM with the new edited value on the page, and everything works and looks great! So far so good.
Now here's the problem. Since I have not been able to figure out how to change the data-text field (which is hard coded in the page HTML), the screen (DOM) updates with the new value after submit correctly, but the data-text field of the element does not update. It is still the old value. It means the NEXT time I click to edit the text, the OLD value of the text field is pre-populated in the modal for editing.
Question: how do I update html data-text field by JS?
I have researched this problem at great length and without Stack Overflow I would never be able to get it working, so much appreciate you guys. Dozens of questions about passing variable TO Modals, but very few about passing the data back, and NONE about setting data-text on submit by JS.
text element definition example. This is a slightly simplified example. The text field contains some data from the server database, HTML is generated by PHP/MySQL. (1 out of 100 elements on page):
<td id="note_12345678" data-toggle="modal" data-target="#noteModal" data-note="<some text from db>" class="note"><same text from server db></td>
Here is the JS on submit code. Everything works except for the last line where I am trying to change the "data-note" field of the element:
function note_submit(element) {
var note = document.getElementById('message-text').value;
ajaxcall("/ajaxclick.php" , { note:note } , null); // Simplified, all is working.
noteElement = document.getElementById('note_12345678');
noteElement.innerText = note ; // Updates the DOM with submitted note.
noteElement.data-note = note ; // <== trying to change data-note here but obviously a syntax error.
}
Everything is working fine up to that last step. Clicking the text field opens modal, pre-loads the text for editing, allows the user to edit, click submit sends to server by Ajax for update, DOM note on screen is updated by JS. if I RELOAD the page, it loads the new edited text value from server db. Everything working great. Lots of joy.
Problem is NEXT time I click on the text element to edit it, the modal loads the OLD value from data-note hard coded into HTML. How to update it upon submit by JS? Thanks a million for any assistance. So close.
Updated: page is loading jquery-3.3.1.js, and bootstrap/4.0.0/js/bootstrap.min.js. Browser is FF V66.
so I have this basic bootstrap form and I have a button called add another location which will dynamically create another 4 inputs to add more location. This is achieved via jquery and jquery UI. So I made 3 copies of this form and put them in a list because eventually, they are going to come from a server and loop the form depends on however many sets of information available. The problem I am having is that, only my first add another location button works and it's creating additional inputs on the second and third one as well. I can give different id/class to the buttons where the new form goes but that wouldn't do me any good since more or fewer forms can be displayed via the server. My question is how can each button act independently without giving different id/class to it. so if I click add another location button on the second set of form, it only creates additional inputs on the second set not first or 3rd, same for 1st set and 3rd set.
this is the jquery code that clones and appends the new inputs
$("#pm-do-clone1").click(function () {
$(".pm-clone-this3 .pm-clone4").clone().appendTo(".pm-clone-here1");
});
here's my jsfiddle : https://jsfiddle.net/jaisilchacko/yqvd4Lvv/4/
ps: the fiddle the first add location is not creating new inputs, but it works on my local.Probably an external resource issue
alright, as I understand You gotta grab the clicked button by referancing it with;
$("#pm-do-clone1").click(function () {
$(this).//rest of the code
and at the rest of the code as we captured the clicked one, we now have to find its parent where we gonna add the new inputs. For example,
var y = document.createElement('input');
var x =$(this).parents('.form');
$(x).append(y);
Edit: Btw, you are clicking an ID, ID is not the best model to catch one from multiple elemets because it sometimes make mistakes, use class instead.
Edit2: Check this snippet too. I belive this will help you. View DEMO
Edit3: Why do you wrapping each inputs into divs? It seems not necessary no create too much elements as you could achive the same result with only inputs.
I have run into a very odd situation, that I have not experienced before. In our code, we wanting to check the value of BillingDomainID once the page is loaded. Wrapped in a function with many other jQuery functions inside, I have the following code:
var vBDID = ".BillingDomainID" + $("#BillingDomainID").val() + "";
alert(vBDID);
$(".BillingDomainID").show();
$(vBDID).toggle();
We are using vBDID to dynamically create a class that will hide certain fields in the form if the BillingDomainID != 1. The Value exists in a hidden field that is at the bottom of the page. Since we have 7 BillingDomainIDs in our system, Anytime the BillingDomainID = 1 it will show the fields, and anytime it is 2-7, it hides them because of the classes that we have placed on the fields that we want to hide.
So here is the issue that I having. The alert that appears in the code above will say that the vaule of vBDID is .BillingDomainID2 for example, but the real value of the #BillingDomainID is 1 in the Database. Why is it that the value is being presented as a different value in the website, that it is in the database? Everything else works as it should, with the exception to this part.
I should also mention, that we are using ajax to change value when the Office dropdown is changed. This part also works fine, and the BillingDomainID will actually be correct after it is changed once. It is only initially when the page loads that it is incorrect.
Thank you all so much for your help!
First off, here is my jsfiddle.
I have two click listeners. One on a Next button and one on a Back button. The listener on the Back button works great, but the one on the Nextbutton does not, despite them being in the same area of code.
The line of code in question is:
wizard.goTo($('#wizard-pages span[class="selected"]').next().index());
Strangely enough, if I run:
$('#wizard-pages span[class="selected"]').next().index();
I get the right index value. Also, if I run,
wizard.goTo(x);
(x being whatever number). I get the right page back.
It's only when they are combined that it does not work.
I've also tried making the parameter a variable and then passing it through but I get the same results. I also tried adding (+1) to the index, rather than calling .next() before it. Any ideas?
Here's an updated fiddle: http://jsfiddle.net/7v8Xx/1/
You werent going far enough ahead in this line:
wizard.goTo($('#wizard-pages span[class="selected"]').next().index());
Add 1 to the index!!
wizard.goTo($('#wizard-pages span[class="selected"]').next().index()+1);