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.
Related
page imageThis Images shows my page where i am facing a problem, i want my 'company' textbox get autocomplete by value fetched from database when i input a value in 'code'.
in a seperate page mysql queries will run to get company where code='*'
Both 'code' and 'company' are present in my databasedatabase image
Tried lots of techniques but failed to achieve anything.
Please help!!
Give us some code please.
You want to submit form and then, on new page - enter a value to new form with second textbox?
As you probably know - if you want to get data from database you must use classic SQL query in PHP file.
But - if you want do dynamicaly autocomplete second textbox without submit - you can use jQuery:
$('#your_textbox').on('input', function() {
/* This will be fired every time, when textbox's value changes. */
$('#your_second_textbox').val($('#yout_textbox').val(''));
} );
I have been stuck in somewhere around validating the form. I have a nice 10-11 fields in
my .cshtml page in MVC. Those fields are using data anotations from model and here I
am using client side validations using jquery and unobtrusive javascript. So, validations
are firing up very good on submit but we need to implement a logic where a user will click on the
submit button but the page will automatically drags the user to the location of mandatory field.
Assume that all 11 fields in my form are mandatory. user has filled the first two and
left the third blank .So on submitting the form, the cursor should focus to that control
with the validation message.Due to the length of the page, it should be scrolling up and down
accordingly. And if suppose only first two fields are filled and others are empty,
the validation message should show the 3rd field with the focus on control and then
if user filled the 3rd field and hit save, it should focus to the fourth field.
On one instance it looks easy and I am trying it with following code snippet on click of submit button.
AS this is the class which mvc uses when validation fires, I select element from the first class like below:
var element = $('#' + $('.input-validation-error:first').attr('id'));
once I get the element then I am using the below code:
if (element.selector !== '#undefined') {
// The class "RequiredFeildDropdown" is applied to the control so that I can
check if that is kendo dropdown and I should focus to that kendo control of the element.
if (element.hasClass("RequiredFeildDropdown")) {
element.data("kendoDatePicker").element.focus();
}
// This class "RequiredFeildDate" has been applied to check whether the kendo control is datepicker
so that I can focus it.
else if (element.hasClass("RequiredFeildDate")) {
element.data("kendoDropDownList").focus();
}
// So here comes the real problem.The primaryaddressData contains the collection
of objects. Actually my page also consists of some table elements that i have created using for loop.
So, while validating , if primaryaddressData.length have count < 1, this div should show.Actually there should
be atleast one primary address. The div which have table elemets is "primaryaddressErrorMessage"
else {
if (primaryaddressData.length >= 1) {
$("#primaryaddressErrorMessage").hide();
} else {
$("#primaryaddressErrorMessage").show();
$('html,body').animate({
scrollTop: $("#primaryaddressErrorMessage").offset().top
}, 'slow');
isValid = false;
}
element.focus();
To make more clear of the second portion,My page also has a div called "primaryaddressErrorMessage" which I have described above
<div class="common-box padding25 ">
<span id="primaryaddressErrorMessage" class="margin-btm30" style="display: none; color: #ce3a36; font-size: 11px; font-family: 'signikaregular', Arial">Primary Addressed are required.</span>
#{Html.RenderPartial("~/Areas/Admin/Views/Common/_AddressPartial.cshtml", Model);}
</div>
So, This partialview has a set of controls which user uses to add primary address.
When this partial view loads, by using ajax request, I check from database
If this user has atleast one primary address,If yes, I keep its count it
"primaryaddressData"=1 and so when user submits a new primary address,
after an post request to controller, I get the primary address count from
database and again set "primaryaddressData"= count that I get from database through Json.
As this "primaryaddressData" is global, when user hits save from the main page i.e from the main
view which was containing the above partialview, I check the length of
"primaryaddressData" and if is having less than one, I will have to focus to
this span having id="primaryaddressErrorMessage"
I am going very hard through this. There might be someone who has also faced this problem in past. So, it could be a duplicate question but I asked it for this particular scenario. Please let me know if some more explanation is required.
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!
I am new to working with Stripes. I have a dropdown ("show ## recordrs per page") and a paginated table on the JSP page and I want to display as many records per page in this table, as the value selected in the dropdown.
The action bean has a variable "recordsPerPage" and I am not able to figure out a way to set the value of this variable and reload the table, so as to change the number of records that are displayed per page. Please help.
---- Additional Info -----
The table that I use is a displaytag table, which accepts a PaginatedList. This table is within a stripes form.
-- EDIT:
What I did is, I added a <stripes:hidden/> with the name "recordsPerPage" and set the value to be the number of records I want to display. I also added a <stripes:submit> to the same form. The "name" attribute of this submit button is the method name of the action bean I have to call. When I click on this button, I am able to do what I want. But now, I am unable to do it through javascript. Please help.
Due to some reason, calling Dom.get('submitButton').submit() or Dom.get('myFormId').submit() does not fulfill the intended purpose. Taking a clue from being able to do what I wanted from the submit button click, I made this submit button hidden and the called click() on this button from javascript. Thus Dom.get('submitButton').click() produces the intended result. If someone can give me the explanation of why the submit method did not result in expected behavior, that'll be great.
On a HTML page I have three sections with 3 tables. Each table has its own Reset button which should reset only the sections it is required to. Unfortunately, I have used the same form for all the three and there is lot of change to be made if 3 seperate forms are created.
Is there a way to reset only a particular section of the page in this way?
form.reset() is built in to the browser, so it's behaviour cannot be amended.
An alternative is to write your own code in javascript to reset the fields of each table, like this:
function resetInput1(e){
document.getElementById('input1').value = document.getElementById('input1').defaultValue;
}
function resetInput2(e){
document.getElementById('input2').value = document.getElementById('input2').defaultValue;
}
document.getElementById("btn1").addEventListener('click', resetInput1, true);
document.getElementById("btn2").addEventListener('click', resetInput2, true);
Example fiddle here
here u can write a javascript method to reset all the elements available in your section and call the function on click on the reset button, using form.reset will reset the whole form.
otherwise you can have multiple form on a page and place your reset button inside each and reset.
If you are using .net you cannot have multiple forms on same page. for this you will have to disable/ hide the other forms.
// AFTER YOUR COMMENTS TO MY POST
here u can store the default values in hidden fields means my each element will be having a hidden field, where the default value will be stored.
when a user changes any text in textbox, change index in drop down, unselect some checkboxes, etc, and hits reset button
you will call a javascript function which will set the values from the hidden fields back to the respective controls. This will save your round-trip with the server to fetch the default details back from the database.
otherwise u can use ajax methods to rebind the default values to the element on html form.
I m particularly mentioning Ajax methods here because, if we post back the webpage again it will reset all your values in the other sections.
Hope it is a clear explanation.