Develop Reference

Boobtbox dialog closes when clicked and the page refreshes

I recently change the code of a page that I had in a html page to an aspx one because I needed to implement a master page. The code and the function worked perfectly fine in the htmlpage but since I had changed it to the aspx page the bootbox dialog stop working properly, as soon as I click on it, it closes immediately and refreshes the page. These are the scripts that Im using.
<script src="Scripts/jquery-3.1.1.js"></script>
<script src="Scripts/popper.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootbox.js"></script>
Here are some of the functions of the page:
function disableTool(Herramientaid) {
bootbox.confirm({
message: "¿Estas seguro que deseas eliminar este herramienta?",
buttons: {
confirm: {
label: 'Si',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
if (result) {
sendRequest('DisableTool', { "Herramientaid": Herramientaid },
function (response) {
if (response[0] == 'OK') {
gettool();
bootbox.alert('La herramienta se ha eliminado');
}
else {
bootbox.alert('Error! ' + response[0]);
}
});
}
}
});
}
function UpdateTool(ToolControl) {
var Herramientaid = $(ToolControl).parent().parent().find('td').eq(0).html();
var NombreH = $(ToolControl).parent().parent().find('td').eq(1).html();
var Adminid = $(ToolControl).parent().parent().find('td').eq(2).html();
var HDesc = $(ToolControl).parent().parent().find('td').eq(3).html();
bootbox.dialog({
title: "Actualizar herramientas",
message: '<div class="row"> ' +
'<div class="col-md-12"> ' +
'<div class="form-group"> ' +
'<label class="col-md-3 control-label" for="txNombreH">Nombre:</label> ' +
'<div class="col-md-9"> ' +
'<input type="text" id="txNombreH" class="form-control" placeholder="Nombre" value=""' + NombreH + '/>' +
'</div>' +
'</div>' +
'<div class="form-group"> ' +
'<label class="col-md-3 control-label" for="txAdminid">ID del Administrador:</label> ' +
'<div class="col-md-9"> ' +
'<input type="text" id="txAdminid" class="form-control" placeholder="Administrador ID" value=""' + Adminid + '/>' +
'</div>' +
'</div>' +
'<div class="form-group"> ' +
'<label class="col-md-3 control-label" for="txHDesc">Descripcion de la herramienta:</label> ' +
'<div class="col-md-9"> ' +
'<input type="text" id="txHDesc" class="form-control" placeholder="Descripcion" value=""' + HDesc + '/>' +
'</div>' +
'</div>' +
'</div>' +
'</div>',
buttons: {
No: {
label: "No",
className: "btn-danger",
callback: function () {
}
},
Yes: {
label: "Si",
className: "btn-success",
callback: function () {
var newNombreH = $('#txNombreH').val();
var newAdminid = $('#txAdminid').val();
var newHDesc = $('#txHDesc').val();
sendRequest('UpdateTool', {
"Herramientaid": Herramientaid, "NombreH": newNombreH, "Adminid": newAdminid, "HDesc": newHDesc
},
function (response) {
if (response[0] == 'OK') {
gettool();
bootbox.alert('Se ha configurado la herramienta');
}
else {
UpdateTool(ToolControl);
bootbox.alert('Error! ' + response[0]);
}
}
)
}
}
}
});
}

I had this same issue today, updating to latest and greatest bootbox didn't help. I eventually tracked down that the button click for "Close", "Ok", even "Esc" was triggering the submission of the form event.
I've had to add a propagation catcher after calling my dialog:
$(".dialog-class-name").on('hidden.bs.modal', function (e) {
e.preventDefault();
e.stopPropagation();
});
It feels hacky, but it doesn't involve editing the actual library, and it does work....

jQuery: function in dynamic generated list item doesn't work

I build a function to display a value in a HTML element for a
<input type="range">
object.
My function works fine:
var rangeValues = { "50": "Fifty" , "100": "Hundred" , "...": "..." };
$(function Skilllevel() {
$('#rangeText').text(rangeValues[$('#rangeInput').val()]);
$('#rangeInput').on('input change', function ()
{
$('#rangeText').text(rangeValues[$(this).val()]);
});
});
See example in jsfiddle
My problem now is the following:
I putted the function Skilllevel() into a $.each(result, function and into it, it doesn't work, because every entry from my second JSON file var urlBewerbungID = "json.php"; generated one separate list element in $("#ergebnisSkill").append(
The second JSON looks very simple, like this:
[
"item1",
"item2",
"item3"
]
My complete function:
//Skills selektieren
var rangeValues = {
"0": "Keine",
"33": "Anfänger",
"66": "Fortgeschritten",
"99": "Profi"
};
//Abfrage, welche Stelle gewählt wurde
$('#bewerbungID').on('change', function() {
var bewerbungID = ($('#bewerbungID').val());
console.log("BewerbungsID gewählt: " + bewerbungID);
//Zuerst das #HTML Element leeren
$("#ergebnisSkill").empty();
$(document).ready(function() {
var urlBewerbungID = "json.php";
$.getJSON(urlBewerbungID, function(result) {
console.log(result);
$.each(result, function(i, field) {
var skill = field;
//Skill liste erstellen
$(function Skilllevel() {
$('#rangeText').text(rangeValues[$('#rangeInput').val()]);
$('#rangeInput').on('input change', function() {
$('#rangeText').text(rangeValues[$(this).val()]);
});
});
//Jetzt HTML Element neu befüllen
$("#ergebnisSkill").append(
'<li>' +
'<div class="item-content">' +
'<div class="item-media"><i class="icon f7-icons">star</i></div>' +
'<div class="item-inner">' +
'<div class="item-title label">' + skill + '<br> <span id="rangeText"></span></div>' +
'<div class="item-input">' +
'<div class="range-slider">' +
'<input type="range" id="rangeInput" min="0" max="99" value="0" step="33">' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</li>'
);
});
});
});
});

Your code is inside out.
You need document.ready to wrap the event handlers.
Use class instead of IDs, IDs need to be unique
use delegation - currently you have a function per result which does not work.
You need the skills functionality assigned to each result but delegated - see how a click on the ergebnisSkill will be captured by the rangeInput:
//Skills selektieren
var rangeValues = {
"0": "Keine",
"33": "Anfänger",
"66": "Fortgeschritten",
"99": "Profi"
};
$(document).ready(function() {
//Skill liste erstellen
$("#ergebnisSkill").on('input change', ".rangeInput", function() { // delegation
$(this).closest("item-inner") // a parent div
.find('.rangeText') // the input field
.text(rangeValues[$(this).val()]);
});
//Abfrage, welche Stelle gewählt wurde
$('#bewerbungID').on('change', function() {
var bewerbungID = ($('#bewerbungID').val());
console.log("BewerbungsID gewählt: " + bewerbungID);
//Zuerst das #HTML Element leeren
$("#ergebnisSkill").empty();
var urlBewerbungID = "json.php";
$.getJSON(urlBewerbungID, function(result) {
console.log(result);
$.each(result, function(i, field) {
var skill = field;
//Jetzt HTML Element neu befüllen
$("#ergebnisSkill").append(
'<li>' +
'<div class="item-content">' +
' <div class="item-media"><i class="icon f7-icons">star</i></div>' +
' <div class="item-inner">' +
' <div class="item-title label">' + skill + '<br> <span class="rangeText"></span></div>' +
' <div class="item-input">' +
' <div class="range-slider">' +
' <input type="range" class="rangeInput" min="0" max="99" value="0" step="33">' +
' </div>' +
' </div>' +
' </div>' +
'</div>' +
'</li>'
);
});
});
});
});

How to render a List Element using VueJs from a json data

I have a javascript code which renders <ol><li></li></ol> , Using a json from the server . The code looks something like this
function loadWorkFlowRules() {
var wf_id = <?php echo $wf->id; ?>;
$.post("/api/wfengine/get_wf_rules/", {
wf_id: wf_id
}, function(result) {
var wf_rules = JSON.parse(result).data;
if (makeView(wf_rules)) {
toastr.success('The Rules are Successfully Loaded!');
} else
toastr.info('Welcome to Work Flow Editor');
});
}
function makeView(wf_rules) {
//console.log(wf_rules);
var html_str = '',
response = false;
$.each(wf_rules, function(key, value) {
if (value.length > 0) {
$.each(value, function(key1, value1) {
var ui_l1 = '<li class="alert mar" data-id="' + value1.id + '" data-name="' + value1.name + '" style=""><div class="dd-handle state-main">' + value1.name + '<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span></div><ol>';
html_str = html_str + ui_l1;
if (value1.children.length > 0) {
$.each(value1.children, function(key2, value2) {
$.each(value2, function(key3, value3) {
var ui_l2 = '<li class="alert mar" data-id="' + value3.id + '" data-name="' + value3.name + '" style=""><div class="dd-handle state-main">' + value1.name + '<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span></div><ol>';
html_str = html_str + ui_l2;
if (value3.children.length > 0) {
$.each(value3.children, function(key4, value4) {
if (value4.length > 0) {
var ui_l3 = '<li class="dd-item alert mar action" data-id="' + value4[0].id + '" data-name="' + value4[0].name + '" data-api="' + value4[0].api + '" data-url="' + value4[0].url + '" data-json="' + value4[0].json + '" style=""><div class="dd-handle">' + value4[0].name + '<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span> <span class="edit cust-close" data-toggle="modal" data-target="#editAction" ><i class="fa fa-pencil"></i></span></div></li>';
html_str = html_str + ui_l3;
}
})
}
html_str = html_str + '</ol></li>';
});
})
}
html_str = html_str + '</ol></li>';
});
$('.contract_main').html(html_str);
response = true;
} else
response = false;
});
return response;
}
HTML
<div class="dd">
<ol class="dd-list simple_with_drop vertical contract_main">
</ol>
</div>
I got into a situation where Ill have to Bind the data element of the child <li> with an HTML MODAL popup , So that if the value in Modal is updated it shoud change in the Object/Dom also .
I was recommended to use VueJs.
I have went through! the basics of the VueJs , But that didn't cover how I ccan bind complete list from a Json ,
Any help in how I can do this would be great

Currently I don't see any structure of Vue.Js in your code and you are manipulating the JSON data and constructing the HTML in the JS code itself. You can do it in vue way, where you will create an Vue instance, do loading of data in Vue methods and use Vue syntax to iterate over data and other things. One Simple example you can see in this fiddle or in below code:
new Vue({
el: '#app',
data: {
jsonData: []
},
mounted () {
this.loadJsonData();
},
methods: {
loadJsonData(){
setTimeout(()=>{
this.jsonData = ["first", "Second", "Third", "And So On"]
}, 300)
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="data in jsonData">{{data}}</li>
</ul>
</div>
You can look at vue-hackernews to understand more about structuring of code, How to fetch data from remote APIs in JSON format and display it.

Input OnClick is not recognized

I have this method that is recursively called.
This method creates a li that ll be used on Iscroll plugin.
My problem is:
The input button does not works. On his CSS I set cursor:pointer to check if the input is recognized, and it is. But I can click it several times that does nothing.
createList: function(p_id)
{
var lv_linhaDoc = '<li id="lis_' + p_id + '" class="listItem">' +
'<div class = "alinhar1" onClick="lis.Click(' + p_id + ', false)">' +
'<div class="ui-grid-a" style="font-size: large">' +
'<div class="ui-block-a"><p class="header" style="font-size: medium"><strong>' + 4 + '</strong></p></div>' +
'<div class="ui-block-a"><p class="line label"><strong>Data Criação</strong></p></div>' +
'<div class="ui-block-b"><p class="line value" style="text-align: right">' + '13/2/14' + '</p></div>' +
'<div class="ui-block-a"><p class="line label total"><strong> Valor</strong></p></div>' +
'<div class="ui-block-b"><p class="line total" style="text-align: right">' + 13 + ' ' + 15 + '</p></div>' +
'</div></div>' +
' <input type="button" class=" button_add" onClick="lis.Detail(' + p_id + ')" />' +
'</li>';
return lv_linhaDoc;
},
The problem is not in the Detail() function bacause I can't enter in that function because the click is not recognized
UPDATE
I found that the input button stopped working after I add these to the IScroll initialization
click: true,
tap: true,
I really need those arguments in the IScroll to do other fucntions.
IScroll initialization:
initScroll: function(){
var wrapper = document.getElementById('id5');
myScroll = new IScroll(wrapper, {
// click: true,
// tap: true,
scrollX : false,
scrollY : true,
scrollbars : false,
interactiveScrollbars : true,
mouseWheel : false,
hScrollbar : false,
vScrollbar : true,
useTransition : false,
snap : 'li',
indicators : {
el : '#scroller',
fade : false,
ignoreBoundaries : false,
interactive : false,
listenX : false,
listenY : true,
resize : false,
shrink : false,
speedRatioX : 0,
speedRatioY : 0,
checkDOMChanges: true,
},
});

Instead of trying to add the click handler inline, you can save the p_id as a data-attribute on the input and then setup a click handler using event delegation. With delegation you can setup a handler on elements that will be created dynamically later.
When creating the listitem, put the p_id in a data-attribute of the input e.g. data-pid:
<input type="button" class="button_add" data-pid="' + p_id + '" value="+" />
Then add a click handler that delegates to the .button_add class. In that handler you can retrieve the p_id from the data-attribute:
$(document).on("click", ".button_add", function(e){
var p_id = $(this).data("pid");
alert(p_id);
//call detail function and pass in the p_id
});
DEMO

You need to do something like below :
createList: function(p_id)
{
var lis = new lisClass();
var lv_linhaDoc = '<li id="lis_' + p_id + '" class="listItem">' +
'<div class = "alinhar1" onClick="lis.Click(' + p_id + ', false)">' +
'<div class="ui-grid-a" style="font-size: large">' +
'<div class="ui-block-a"><p class="header" style="font-size: medium"><strong>' + 4 + '</strong></p></div>' +
'<div class="ui-block-a"><p class="line label"><strong>Data Criação</strong></p></div>' +
'<div class="ui-block-b"><p class="line value" style="text-align: right">' + '13/2/14' + '</p></div>' +
'<div class="ui-block-a"><p class="line label total"><strong> Valor</strong></p></div>' +
'<div class="ui-block-b"><p class="line total" style="text-align: right">' + 13 + ' ' + 15 + '</p></div>' +
'</div></div>' +
' <input type="button" class=" button_add" onClick="lis.Detail(' + p_id + ')" />' +
'</li>';
return lv_linhaDoc;
},
You see i have aded var lis = new lisClass();

Just found the solution:
There's a bug on IScroll that if the parameter click is enable then all the form elements, such as the submit button do not work with iScroll.
So, I did this:
myScroll = new IScroll(wrapper, {
click: false,
scrollX : false,
scrollY : true,
scrollbars : false,
interactiveScrollbars : true,
mouseWheel : false,
hScrollbar : false,
vScrollbar : true,
useTransition : false,
snap : 'li',
preventDefaultException: {tagName:/.*/},
indicators : {
el : '#scroller',
fade : false,
ignoreBoundaries : false,
interactive : false,
listenX : false,
listenY : true,
resize : false,
shrink : false,
speedRatioX : 0,
speedRatioY : 0,
checkDOMChanges: true,
},
});
Notice that the parameter clickis now as false and i add the preventDefaultException: {tagName:/.*/},
I found this here

jScrollPane doesn't scroll to bottom after content update

I have a chat window with a jScrollPane. The problem is that when I submit a message it doesn't scroll down to the last word/line I wrote, it's always a line behind.
$('body').delegate('#private-form', 'submit', function() {
var sendMessage = $(this).find('input.private-message').val();
if (!empty(sendMessage)) {
socket.emit('send private message', {
'message': sendMessage,
'username': $(this).find('input.send-to').val()
});
$(this).find('input.private-message').val('');
var data = '' +
'<div class="person">' +
'<img src="img/avatar.png" alt="">' +
'<div class="details">' +
'<div class="chat">' +
'<p>' + sendMessage + '</p>' +
'</div>' +
'<div class="chat-view">' +
'<p>10 min ago</p>' +
'</div>' +
'</div>' +
'</div>';
var settings = {
showArrows: false,
autoReinitialise: true,
};
var pane = $('.chat-single');
pane.jScrollPane(settings);
var contentPane = pane.data('jsp').getContentPane();
contentPane.append(
data
);
pane.data('jsp').scrollToBottom();
}
return false;
});
Markup:
<div class="chatters">
<div class="chat-single">
</div>
</div>
Styles:
.chatters {
padding: 10px 0;
height: 75%;
width: auto;
max-width: 390px;
}
.chat-single{
height:100%
}

After appending the data, call reinitialise on pane.data('jsp') before scrolling to the bottom.
contentPane.append(
data
);
pane.data('jsp').reinitialise();
pane.data('jsp').scrollToBottom();
Also, if you're using autoReinitialise be sure to provide a reasonable autoReinitialiseDelay since by default it does this re-initialisation twice per sencond (every 500ms).