Develop Reference

Concatenate HTML element with HTML string for Leaflet's bindPopup

I am trying to write a functionality for editing feature attributes through layer.bindPopup for Leaflet features. At this point I have pretty much everything I need, except of the one last thing: Documentation is saying that layer.bindPopup takes either HTML string or HTML element, so I need to concatenate my HTMLString with two elements: saveChanges button and speed_input input and then feed layer.bindPopup with it. Any manipulations with $.append did not help. Any suggestions on how to resolve this?
function onEachArc(feature, layer) {
// Create an input
var speed_input = L.DomUtil.create('input', 'speed');
// Set a feature property as value
speed_input.value = feature.properties.speed;
// Add a listener to watch for change on time input
L.DomEvent.addListener(speed_input, 'change', function(){
// Change the value of speed
feature.properties.speed = speed_input.value;
});
// Bind popup to layer with input
HTMLString = '<table style="width:100%">\
<tr style="background-color:grey">\
<th><b>Arc Numer: </b>' + feature.properties.linkstr + '</br></th>\
</tr>\
<tr>\
<td><b>Speed: </b> ' + feature.properties.speed + '.</div></td>\
</tr>\
</table>';
var saveChanges = document.createElement('button');
saveChanges.innerHTML = 'Save Changes';
saveChanges.onclick = function(){
$.ajax({
type:"POST",
url:"php/updateFeature.php",
data: {feature: feature},
success: function(data){
$('#test').html(data);
}
});
//return false;
}
};
/*
This did not help
var box = document.createElement("div");
box.style.width = "100px";
box.style.height = "100px";
$("#box").append("#saveChanges");
layer.bindPopup(box);
*/
layer.bindPopup(saveChanges);
};

You could use innerHTML:
The Element.innerHTML property sets or gets the HTML syntax describing the element's descendants.
var form = L.DomUtil.create('form', 'my-form');
form.innerHTML = '<input type="text" class="my-input" />';
var button = L.DomUtil.create('button', 'my-button', form);
button.textContent = 'Ok!';
http://plnkr.co/edit/DiK1zj?p=info
or use outerHTML:
On return, content contains the serialized HTML fragment describing the element and its descendants.
var inputHTML = '<input type="text" class="my-input" />';
var button = L.DomUtil.create('button', 'my-button', form);
button.textContent = 'Ok!';
var buttonHTML = button.outerHTML;
var form = '<form class="my-form">' + inputHTML + buttonHTML + '</form>';
http://plnkr.co/edit/Z6rADJ?p=preview
That said (and after reading your comment), i must say: this works but is very hacky. I wouldn't recommend doing this sort of thing this way. You either build your form with HTML elements or use a template/string and convert that into HTML elements so you can attach handlers and process stuff. Mixing things up will get you into trouble. I would approach it this way:
The template:
var template = '<form id="popup-form">\
<label for="input-speed">New speed:</label>\
<input id="input-speed" class="popup-input" type="number" />\
<table class="popup-table">\
<tr class="popup-table-row">\
<th class="popup-table-header">Arc numer:</th>\
<td id="value-arc" class="popup-table-data"></td>\
</tr>\
<tr class="popup-table-row">\
<th class="popup-table-header">Current speed:</th>\
<td id="value-speed" class="popup-table-data"></td>\
</tr>\
</table>\
<button id="button-submit" type="button">Save Changes</button>\
</form>';
Use a stylesheet, keeps the template nice and clean:
.popup-table {
width: 100%;
}
.popup-table-row {
background-color: grey;
}
In the onEachFeature function, attach a click handler:
L.geoJson(collection, {
onEachFeature: function (feature, layer) {
layer.on('click', layerClickHandler);
}
});
And handle it:
function layerClickHandler (e) {
var marker = e.target,
properties = e.target.feature.properties;
// Check if a popup was previously set if so, unbind
if (marker.hasOwnProperty('_popup')) {
marker.unbindPopup();
}
// Create new popup from template and open it
marker.bindPopup(template);
marker.openPopup();
// Now that the popup is open and the template converted to HTML and
// attached to the DOM you can query for elements by their ID
L.DomUtil.get('value-arc').textContent = properties.arc;
L.DomUtil.get('value-speed').textContent = properties.speed;
var inputSpeed = L.DomUtil.get('input-speed');
inputSpeed.value = properties.speed;
L.DomEvent.addListener(inputSpeed, 'change', function (e) {
properties.speed = e.target.value;
});
var buttonSubmit = L.DomUtil.get('button-submit');
L.DomEvent.addListener(buttonSubmit, 'click', function (e) {
// Do fancy ajax stuff then close popup
marker.closePopup();
});
}
Example on Plunker: http://plnkr.co/edit/8qVoW5?p=preview
This is cleaner, faster, it doesn't bind popups to every marker. It's more readable, extendable and less error prone. I hope that help, good luck!

how to make row editable after selecting option from dropdown

I want to make my table row editable when i will select edit option from dropdown box. Previously it was woring fine but that time i used Edit button inside all row. But now i have made edit button by putting into dropdown. but now it is not working. I am not able to find any error in my code but still it is not working.
my html table is
<div class="table-responsive">
<table class="table table-hover" id="myTable" >
<thead>
<tr>
<th>Parameter Names</th>
<th>Parameter Values</th>
<th>Remarks</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>johncarter#mail.com</td>
<td>John</td>
<td>Carter</td>
<td></td>
</tr>
<tr>
<td>peterparker#mail.com</td>
<td>Peter</td>
<td>Parker</td>
<td></td>
</tr>
</tbody>
</table>
<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
<li><a tabindex="-1" class="btn btn-mini btnEdit" >Edit</a></li>
</ul>
<script type="text/javascript">
(function ($, window) {
$.fn.contextMenu = function (settings) {
return this.each(function () {
// Open context menu
$(this).on("contextmenu", function (e) {
//open menu
$(settings.menuSelector)
.data("invokedOn", $(e.target))
.show()
.css({
position: "absolute",
left: getLeftLocation(e),
top: getTopLocation(e)
})
.off('click')
.on('click', function (e) {
$(this).hide();
var $invokedOn = $(this).data("invokedOn");
var $selectedMenu = $(e.target);
settings.menuSelected.call(this, $invokedOn, $selectedMenu);
});
return false;
});
//make sure menu closes on any click
$(document).click(function () {
$(settings.menuSelector).hide();
});
});
function getLeftLocation(e) {
var mouseWidth = e.pageX;
var pageWidth = $(window).width();
var menuWidth = $(settings.menuSelector).width();
// opening menu would pass the side of the page
if (mouseWidth + menuWidth > pageWidth &&
menuWidth < mouseWidth) {
return mouseWidth - menuWidth;
}
return mouseWidth;
}
function getTopLocation(e) {
var mouseHeight = e.pageY;
var pageHeight = $(window).height();
var menuHeight = $(settings.menuSelector).height();
// opening menu would pass the bottom of the page
if (mouseHeight + menuHeight > pageHeight &&
menuHeight < mouseHeight) {
return mouseHeight - menuHeight;
}
return mouseHeight;
}
};
})(jQuery, window);
$("#myTable td").contextMenu({
menuSelector: "#contextMenu",
menuSelected: function (invokedOn, selectedMenu) {
var msg = "You selected the menu item '" + selectedMenu.text() +
"' on the value '" + invokedOn.text() + "'";
}
});
function Save() {
var par = $(this).parent().parent();
var tdName = par.children("td:nth-child(1)");
var tdPhone = par.children("td:nth-child(2)");
var tdEmail = par.children("td:nth-child(3)");
tdName.html(tdName.children("input[type=text]").val());
tdPhone.html(tdPhone.children("input[type=text]").val());
tdEmail.html(tdEmail.children("input[type=text]").val());
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
};
function Edit() {
var par = $(this).parent().parent();
var tdParameterName = par.children("td:nth-child(1)");
var tdParameterValues = par.children("td:nth-child(2)");
var tdRemarks = par.children("td:nth-child(3)");
var tdButtons="";
tdParameterName.html("<input type='text' id='txtName' value='" + tdParameterName.html()
+ "'/>");
tdParameterValues.html("<input type='text' id='txtPhone' value='" + tdParameterValues.html()
+ "'/>");
tdRemarks.html("<input type='text' id='txtEmail' value='" + tdRemarks.html()
+ "'/>");
tdButtons.html("<a class='btn btn-mini btnSave'>Save</a>");
$(".btnSave").bind("click", Save);
$(".btnEdit").bind("click", Edit);
};
function Delete() {
var par = $(this).parent().parent();
par.remove();
};
$(function() {
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
});
</script>
Basically i am enabling right click menu. After clicking right dropdown box will open. whne i will click edit button then my row will become editable. I have added jquery for contextMenu and for edit button. Sorry for making code very dirty but currently i am practicing and also i am new in this.

Look at the output that the console gives you. Clicking edit results in TypeError: tdButtons.html is not a function which results from the two lines:
var tdButtons="";
and
tdButtons.html("<a class='btn btn-mini btnSave'>Save</a>");
So you are creating an empty string and trying to use it as if it was a jQuery object. You will need to change theses lines to get it to work again.

jQuery load .data to a child element

My index.html is here:
<tr class="activity_row" t-att-data-activity_id="activity.id">
<td>
<div>
<t t-if="duration != undefine">
<span class="pt_duration_line"><t t-esc="duration.split(':')[0] + 'h ' + (duration.split(':')[1] and duration.split(':')[1] + 'min' or '')"></t></span> <!-- call format_hour method of this screen -->
</t>
</div>
</td>
</tr>
For first tr tag the onclick action is:
this.$el.find(".activity_row").on("click", this.on_row_click);
on_row_click: function(event) {
var activity_id = $(event.currentTarget).data("activity_id");
if(activity_id) {
var activity = this.project_timesheet_db.get_activity_by_id(activity_id);
this.project_timesheet_widget.screen_selector.set_current_screen("add_activity", activity);
}
},
Here i am getting activity_id successfully. But Inside this row there is internal div which includes span as mentioned on top containing pt_duration_line class. And for this, onclick action is :
this.$el.find(".pt_duration_line").on("click", this.on_url_click);
on_url_click: function(event) {
var act_id = $(event.currentTarget).data("act_id");
if(act_id) {
var activity = this.project_timesheet_db.get_activity_by_id(act_id);
for this internal div I am not getting value of 'act_id' which I am getting for 'activity_id' for parent element row.
In brief: What to do if i want to get activity_id for the div resided in that row.
Thanks in advance

try this:
<tr class="activity_row" t-att-data-activity_id="activity.id">
<td>
<div>
<t t-if="duration != undefine">
<span class="pt_duration_line" t-att-data-act-id="activity.id"><t t-esc="duration.split(':')[0] + 'h ' + (duration.split(':')[1] and duration.split(':')[1] + 'min' or '')"></t></span> <!-- call format_hour method of this screen -->
</t>
</div>
</td>
</tr>
also, as other users mentioned, e and event are not the same, change to this:
this.$el.find(".pt_duration_line").on("click", this.on_url_click);
on_url_click: function(event) {
var act_id = $(event.currentTarget).data("act_id");
if(act_id) {
var activity = this.project_timesheet_db.get_activity_by_id(act_id);

After a successful AJAX call cant update td data

Thanks For viewing this post.i am facing a jquery issue .After a successful AJAX call, I want to update an element on page. However, it is not being updated.
what am i doing i am opening a text box on click of span then add text and and on focus out event i am making Ajax call but cant update new text to same span when that i clicked before please help me
here is my js code
$(document).on('click', '.td-edit', (function (e0) {
var thisObj = $(this);
var olddata = thisObj.html();
var newDom = '<input type="text" value="' + olddata + '" class="new-value" style="border:#bbb 1px solid;padding-left:5px;width:75%;"/ >';
thisObj.parent('td').html(newDom);
}));
$(document).on('focusout', '.new-value', (function (e1) {
var thisObj = $(this);
var type = thisObj.parent('td').attr('class');
var newData = thisObj.val();
var santanceId = thisObj.parent('td').parent('tr').attr('id');
santanceId = parseInt(santanceId.replace('tr', ''));
thisObj.parent('td').html('\'<img src="uploads/loading.gif">\'');
if (type === 'sentnc') {
$.ajax({
type: "POST",
url: "operations.php",
data: {
santanceId: santanceId,
sentnc: newData
},
success: function () {
var newDom = '<span class="td-edit">' + newData + '</span>';
thisObj.parent('td').html(newDom);
}
});
}
}));
HTML:
<div class="chat-space nano nscroller">
<div id="table-row">
<table id="rep-data">
<tbody>
<tr>
<th align="left">Sentences</th>
<th align="left" colspan="3">Reps</th>
</tr>
<tr id="tr1" rowspan="2">
<td class="sentnc"><span class="td-edit">Rana is working</span></td>
<td colspan="3" class="senrep"><span class="td-edit">p1.ref = I, p1.name = julie</span><br>
<br>
<span style="color:#000;">Guess Rep1: </span><span id="1gr1">p1.ref = I, p1.has = name1, p1.name.made_from = rana</span><br>
<span style="color:#000;">Guess Rep2: </span><span id="2gr1">p1.ref = I, p1.name = rana</span><br>
<span><a style="color:#3399FF !important;" alt="1" rel="1 " class="updateGuess" id="upd1" href="javascript:void(0);">Update Guess Rep</a></span><br>
<br></td>
</tr>
</tbody>
</table>
</div>

Your success handler should be:
success: function (data) {
var newDom = '<span class="td-edit">' + data + '</span>';
thisObj.parent('td').html(newDom);
}
Here, the data is the data returned by your server, after the ajax Call

How to get <td> value in textbox

I've done some code in html and in JavaScript ... My query is when I click on <td>, whatever the value associated with it, has to be displayed in the corresponding text box ...
In front of <td> I've taken the textbox ... for an example I've taken 3 <td> and 3 textboxes
<script type="text/javascript">
function click3(x) {
x = document.getElementById("name").innerHTML
var a = document.getElementById("txt");
a.value = x;
}
function click1(y) {
y = document.getElementById("addr").innerHTML
var b = document.getElementById("txt1");
b.value = y;
}
function click2(z) {
z = document.getElementById("email").innerHTML
var c = document.getElementById("txt2");
c.value = z;
}
</script>
this is my JavaScript code , I know this is not an adequate way to deal such problem, since its giving static way to deal with this problem
does anyone have a better solution for this problem ??
In JavaScript/jQuery

If click1, click2 and click3 are supposed to be three event then you have to keep all three function you can shorted the script code for assigning values to text field.
<script type="text/javascript">
function click3(x) {
document.getElementById("txt").value = document.getElementById("name").innerHTML;
}
function click1(y) {
document.getElementById("txt1").value = document.getElementById("addr").innerHTML;
}
function click2(z) {
document.getElementById("txt2").value = document.getElementById("email").innerHTML;
}
</script>
You can make a single function if you have single click event and shorten the code for assignment like this,
function SomeClick(x) {
document.getElementById("txt").value = document.getElementById("name").innerHTML;
document.getElementById("txt1").value = document.getElementById("addr").innerHTML;
document.getElementById("txt2").value = document.getElementById("email").innerHTML;
}

As far as I understood your question, you could try the following, assuming that's how your HTML is structured:
HTML Markup:
<table id="mytable">
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
</tr>
<tr>
<td class="name">Tom</td>
<td class="addr">789</td>
<td class="email">tom#dot.com</td>
</tr>
<tr>
<td class="name">Dick</td>
<td class="addr">456</td>
<td class="email">dick#dot.com</td>
</tr>
<tr>
<td class="name">Harry</td>
<td class="addr">123</td>
<td class="email">harry#dot.com</td>
</tr>
</table>
<input id="txt1" type="text" />
<input id="txt2" type="text" />
<input id="txt3" type="text" />​
jQuery:
$(".name").click(function(){
$("#txt1").val($(this).text());
$("#txt2").val($(this).nextAll().eq(0).text());
$("#txt3").val($(this).nextAll().eq(1).text());
});​
$(".addr").click(function(){
$("#txt2").val($(this).text());
$("#txt1").val($(this).prevAll().eq(0).text());
$("#txt3").val($(this).nextAll().eq(0).text());
});
$(".email").click(function(){
$("#txt3").val($(this).text());
$("#txt2").val($(this).prevAll().eq(0).text());
$("#txt1").val($(this).prevAll().eq(1).text());
});
DEMO: http://jsfiddle.net/Z9weS/

You can combine columns and rows. Per cell consisting id you give it th column title and
number of series it could be the index of the row combination of row and column gives the
address as per table cell by a specific event you can read the value of the id
Then you know to pull the cell value.
$('tr')
.click(function() {
ROW = $(this)
.attr('id');
$('#display_Colume_Raw')
.html(COLUME + ROW);
$('#input' + COLUME + ROW)
.show();
STATUS = $("#input" + COLUME + ROW)
.val();
});