Arjun Ajith Arjun Ajith - 7 months ago 36
HTML Question

How to stop function to executing more than once in JavaScript?

I am new in javascript and jquery. One of my functions are executing itself while calling another one. I tried every method I could find here to stop this. But then this function stops executing completely while applying them. I need it to execute only once.

I was trying to populate a list from a javascript array. The first function is for that. Then I need to add more items to this array and populate the list with the new array. The second function addProcessFunc() is for that. But while executing the second function the items from the first function is added once more to the array. I need that to be stopped.

My code is as follows:-

HTML:-

<div class="container">
<label id="processError" class="validationError"></label>
<div class="process">
<div class="tab-content addProcess">
<div id="home" class="tab-pane fade in active">
<div class="addProcessDiv">
<label>Process Name</label>
<input type="text" id="processName" name="processName" class="form-control processName" />
<button type="submit" onclick="addProcessFunc()" class="btn addButton">Add</button>
<div class="sortList">
<ul id="appendHere"></ul>
<div class="saveBtn">
<button type="button" class="btn">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


JS:-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript">
var processArray = [];
$("document").ready(function(){ //I need this to be executed only once.
processArray.push({
id: i,
processName: Some_Process
});
console.log(processArray);
$("#testTemplate").tmpl(processArray).appendTo("#appendHere");
});
function addProcessFunc(){
var name = document.getElementById('processName').value;
if (name != ""){
i++
processArray.push({
id: i,
processName: Another_Process
});
console.log(processArray);
$("#testTemplate").tmpl(processArray).appendTo("#appendHere");
} else {
document.getElementById('processError').innerHTML = "Required";
}
}
</script>
<script id="testTemplate" type="text/x-jquery-tmpl">
<ul id="sortable">
<li class="ui-state-default">
<span class="sort drag-handle"></span>
<label class="sortLabelLeft">${processName}</label>
<span class="delete"></span>
</li>
</ul>
</script>

Answer

This adds only one item to list which is added, Problem is you have declared the array outside so each time the element is duplicated

<script type="text/javascript">
    var i=1;
    $("document").ready(function(){ //I need this to be executed only once.
        var processArray = [];
            Some_Process = 'test';
            processArray.push({
                id: i,
                processName: Some_Process
            });
            console.log(processArray);
            $("#testTemplate").tmpl(processArray).appendTo("#appendHere");
    });
    function addProcessFunc(){
        var processArray = [];
        var name = document.getElementById('processName').value;
        if (name != ""){
            i++
                processArray.push({
                    id: i,
                    processName: name
                });
                console.log(processArray);
            $("#testTemplate").tmpl(processArray).appendTo("#appendHere");
        } else {
            document.getElementById('processError').innerHTML = "Required";
        }
    }
</script>