I am making a web application with Django, JavaScript, JQuery, and ajax. I've been with this problem for two days, and I can't make progress at all, the problem is the following:
I have two modals, in which a form is loaded. If I hit the create button to open the create modal, everything works fine, I can fill in the form, it is submitted and the data is saved to the database. If I give the edit button, the modal is loaded with the form with the data of the object that is being edited, and everything works perfectly. The problem is when I first open the creation modal, close it, and open the edit modal, a very strange thing happens, and that is that the value of an input that I need always returns it to me empty, despite not being empty. Here is the code (what matters, a summary):
<script>
$(document).ready(function () {
$('#edicion').on('shown.bs.modal', function (e) {
let $tipoActivo = $('#id_tipo_activo');
console.log($tipoActivo.val());
});
$('#creacion').on('shown.bs.modal', function (e) {
let $tipoActivo = $('#id_tipo_activo');
console.log($tipoActivo.val());
});
});
</script>
If I open the create modal first, close it, and then open the edit modal, let $TipoActivo = $('# id_tipo_activo'); it always empty (''), when in reality I see that its value is not empty.
Related
Okay so I use bootstrap 4, and I have two different modal types in a single page. I use Ajax to fill up the body of these modals. Both of these forms that each modal opens are different from each other but they have certain ID tags that are similar.
This is how I fire up my modals.
$('#modalForm').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
ajaxLoad(button.data('href'), 'modal_content');
});
$('#modalFormLG').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
ajaxLoad(button.data('href'), 'modal_content_lg');
});
The problem is when I open one modal, and then when I open the second one, I get the following error in the browser console.
[DOM] Found 2 elements with non-unique id #cashpaid: (More info: goo...)
However, I don't have any duplicates of IDs, it's just so that cashpaid ID is being used in both of those forms that each of these modals calls up into its body.
If I refresh the page and open the modal again, then I don't see this problem.
I have tried the following but it didn't have any effect on it
$("#myModal").on("hidden.bs.modal", function(event) {
$(this).removeData("bs.modal");
});
When I run the following two, then my modals becomes unresponsive for future use because they essentially delete that particular html data.
$("#myModal").on("hidden.bs.modal", function(event) {
$(this).empty();
});
AND
$("#myModal").on("hidden.bs.modal", function(event) {
$(this).remove();
});
After opening and submitting the first modal, in the browser console when I type, "cashpaid" for example, I see the following.
<input type="number" id="cashpaid" name="cashpaid" min="0">
However, when I open the second modal and submit that form and when I type "cashpaid" in the browser console, I see the following.
HTMLCollection(2) [input#cashpaid.valid, input#cashpaid, cashpaid: input#cashpaid.valid]
So is there any method for bootstrap 4 modals to purge the remote url form's data when it closes down?
Any help would be greatly appreciated. Thanks in advance.
$(document).on('hidden.bs.modal', '#modalForm', function (event) {
$('.modal-body', this).empty();
});
...will remove all child elements of #modalForm .modal-body after the closing modal animation ends.
Note 1: you only need to bind this once, not every time you open the modal.
Note 2: If you want this functionality on every modal (not only #modalForm), replace #modalForm with .modal. But keep in mind you can only do this with modals that get their contents generated upon reopening. A static modal will remain empty when reopened.
I'm having a problem with one the buttons. It doens't work properly.
When I click "Add Run" button and then "Home" button almost nothing work. The form that is dynamically created doesn't hide and search input doesn't show, and function return undefined.
$("#home").on("click", function () {
$("#search").show();
$("#addForm").hide();
$("#noPrevious").hide();
complete()
console.log(complete())
});
But on the other hand, some things work, they hide or show. For example, after refresh, when I click "All my Runs" it displays text, which will hide after clicking on "Home" button, and on top of that, search input field shows up. I don't understand this. Does anybody know what's wrong?
Thanks in advance.
Here is CodePen and GitHub. The problem is at the top of .js file.
https://codepen.io/ovy1448/pen/gZrKOX
https://github.com/ovy1448/MyRun/blob/master/js/main.js
Your problem is that you are not initializing your values properly. For example, in the case of bookmarks your code presumes that localStorage has a value with that key. However, that is not necessarily the case. You would need to have a default value for bookmarks. A helper function could be useful here:
function getBookmarks() {
var bookmarks = localStorage.getItem("bookmarks");
if (!bookmarks) bookmarks = [];
return bookmarks;
}
and then replace all occurrences of localStorage.getItem("bookmarks") to getBookMarks() in your code, except the one in the function above. Pay attention to other initializations as well.
EDIT
If you want to parse JSON inside the function, you can do it like so:
function getBookmarks() {
var bookmarks = localStorage.getItem("bookmarks");
if (!bookmarks) return [];
return JSON.parse(bookmarks);
}
Alright so I got two buttons, one adds a dog to the doglist and another one clears the whole list.
Both work fine, just one thing that's bothering me is that only the OnSubmit button refreshes page.
The dog list is loaded in OnReady, and the list only gets refreshed when an item is added. When I clear the list I need to manually refresh the page to see changes.
function OnSubmit(event) {
addToStorageList(dogs, dog);
}
function OnClickClearList() {
localStorage.setItem('dogs', JSON.stringify([]));
}
function addToStorageList(listName, itemToAdd) {
var list = JSON.parse(localStorage.getItem(listName));
if (!Array.isArray(list)) {
list = [];
}
list.push(itemToAdd);
localStorage.setItem(listName, JSON.stringify(list));
}
$('#btn1').click(OnSubmit);
$('#btn2').click(OnClickClearList);
I appreciate any help, thanks!
In my opinion noone of them should refresh, to refresh you should use
"location.reload(); "
in the end of your functions
the reason one of them refreshes is either in code I cannot see (that you havn't posted) or that one is called OnSubmit and that is interfering with form submit buttons or something
I have a form with a table that displays data from a mysql table,it has one field that requires user input. each row also contains a div. The form then has two functions.
the first function is to display information from an external PHP page which processes the values on the input fields in each row and sends the result to the row div in the form of an result
The first function works perfectly and here is the script:
<script type="text/javascript">
function get(row){ //row being processed, defined in onchange="get(x)"
$.post ('getpeopleinjobs.php',{ //data posted to external page
postvarposition: form["position"+row].value, //variable equal to input box, sent to external page
postvarjob: form["job"+row].value, //variable equal to input box, sent to external page
postvarperson: form["person"+row].value, //variable equal to drop down list, sent to external page
postrow: row}, //variable equal row being processed, sent to external page
function(output){
$('#training'+row).html(output).show(); //display external results in row div
});
}
</script>
The second function I require help with. I need to almost repeat the same javascript function again. however instead of sending the row variables to an external page, I want to send them to a popup page. This function should be triggered when I click the in the div.
I have the below javascript for the popup.
<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open( url,'popUpWindow','height=400,width=1000,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
</script>
What I want to do is send the variables to the popup page, the same variables that were sent to the external page.
so what I am aiming for is something like this:
<script type="text/javascript">
// Popup window code
function newPopup(url) {
function get(row){ //row being processed, defined in onchange="get(x)"
$.post ('trainingneeded.php',{ //my popup page
postvarposition: form["position"+row].value, //these variables must be posted to the popup page
postvarjob: form["job"+row].value, //these variables must be posted to the popup page
postvarperson: form["person"+row].value, //these variables must be posted to the popup page
postrow: row}, //these variables must be posted to the popup page
);
}
popupWindow = window.open( //open popup with the above variables posted to it
url,'popUpWindow','height=400,width=1000,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
</script>
How can I get the above to work? is using an href the best idea or can the div have an onclick event.
Thanks for the assistance in advance.
No, it's not possible to post to a popup window. You can include those variables in the url and to it as a get.
Or you can add target="_blank' to the form, and let it open a new window that way.
It won't be a popup window, but these days browsers mostly block those, or open them in tabs anyway, so it may not matter.
One other option is to open the popup with blank, and then use javascript to simply write() the page contents to it.
See also: asp.net/jQuery: post data with jQuery to a popup [IE]
I have a form submit, where it get the values from the form and goes
to next page... here I have a hyperlink to open a child window, while
I click, it opens the child window and simultaneously it reloads the
parent window. I have a action configured to the parent window which
has a Database insert statement too.
The problem is that while I click the link it call my action
again(because of page reload), in this action I wrote if condition to
check null/empty string from the previous page form submit. since this
is the second time the action loads it looks of the fields(but
actually those fields are in my previous page form). so it take null
while checking my if condition.
Another problem is that when I solve the above problem here comes the
SQL insert statement, which is about to execute 2nd time. I dont want
this to happen or I dont want my action to execute while I open the
popup window and I want to populate the selected value from the popup
to the parent window.
code used for opening the popup
function select_reactant()
{
window.open ("SeriesTab.action?component=reactant",
"mywindow","scrollbars=1,resizable=1,width=1000,height=1000");
};
This is the place where I open the popup and want to populate the value selected from the popup to the textfiled here
<tr>
<td>reactant</td>
<td><s:textfield name="reactant" id="reactantId" readonly="true" theme="simple"/></td>
</tr>
jquery to get back the value form popup to parent window
$(window.opener.document).find('#reactantId').val(rxn);
the code inside action below is what the action that I mention at the beginning
if(Rxn!=null||!Rxn.equals("")) //Rxn is the field variable for previous page
{
//my insert statement
}
while I run I get nullpointer error since the value for Rxn is reset to null by the page reload due to popup opening done by
window.open
You can do something like this
HTML
reactant
jQuery
$(function(){
$("#anchSelectReactant").click(function(){
select_reactant();
return false;
});
});