So I have a piece of code that most definitely relies on the DOM and needs to be executed after the page has loaded; if its not, a button's action is switched from performing javascript code (through a .click callback) to submitting the form. No idea why this is happening besides maybe somehow the DOM hasn't fully loaded and somehow the submit button at the bottom is mixed up with this other button inside the same form.
Form code shown here (probably irrelevant):
<form action="../landing/" method="POST">
{% csrf_token %}
<div class="ac_container">
<div class="ui-widget">
<button class="add_field_button">Add More Fields</button>
<label for="tagsnodes">Tags: </label>
<input id="tagsnodes" oninput = "myfunc('tagsnodes')" name="mytext" value="initial"/>
</div>
</div>
<br><br>
<input type="submit" value="Submit">
</form>
Anyway, when I call my function (which includes the .click callback) like so:
$(document).ready(extrainput("nodes"));
the functionality of the "add_field_button" remains the same.
The extrainput() function:
function extrainput(extratype) {
return function()
{
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".ac_container"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
console.log("INSIDE");
var tid = "tags" + extratype + x
$(wrapper).append('<div class="ui-widget"><input id="'+tid+'" oninput = "myfunc(\'' + tid + '\')" name="mytext"/></div>');
myfunc(tid);
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
}
}
As you will notice, the function is written to return an anonymous function since that is what the document.ready takes. I have to call the extrainput function like this, however. If I try to call it like this:
$(document).ready(function(){
extrainput("nodes");
});
I get the same DOM error as if I had not waited for the page to be ready.
Once again, I would like to call the function in this way so that I could, say, make a call to "nodes" and a call to "edges."
myfunc code:
function myfunc(tagid){
try
{
var formData = {csrfmiddlewaretoken: "{{csrf_token}}", inputtext:document.getElementById(tagid).value};
}
catch (err)
{
var formData = {csrfmiddlewaretoken: "{{csrf_token}}", inputtext:""};
}
$.ajax({
url: "../searchjson/",
type: "post",
data: formData,
success: function(data){
var availableTags = data.replace(/"/g,"").replace('[','').replace(']','').replace(/, /g, ',').split(",");
$( "#"+tagid ).autocomplete({
source: availableTags
});
},
error:function(){
$("#result").html('There was error while submitting');
}
});
}
This way of calling it is correct, though it seems like you tried it.
function extrainput(extratype) {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".ac_container"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
add_button.click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
console.log("INSIDE");
var tid = "tags" + extratype + x
wrapper.append('<div class="ui-widget"><input id="' + tid +
'" oninput = "myfunc(\'' + tid + '\')" name="mytext"/></div>');
myfunc(tid);
}
});
wrapper.on("click", ".remove_field", function (e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
}
$(document).ready(function () {
extrainput("nodes");
});
I made a jsfiddle with this code. What is the expected behavior which is missing? I seem to be able to add new text fields.
http://jsfiddle.net/mve9xzLx/1/
Also, since you define add_button
as
var add_button = $(".add_field_button");
you don't need to wrap it in $()
again, but that is unrelated.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.