how to wrap string containing dynamically loaded value - javascript

I can't see errors in my logic maybe You'll help Me
I've got this at the moment
$(document).ready(function() {
var str = $('#formElements').text();
str = str.slice(104,112);
alert(str);
$('#formElements:contains('+ str +')').load(function(){
$(this).html().replace(str, '<div class="price-cal-check">'+str+' <span id="priceout"></span>zł</div>');
});
});
form {
display: block;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<form method="post" name="form" action="javascript:void(0);">
<div id="formElements" style="float:right; min-height: 280px; margin-left: 20px; width: 575px;">
<table>
<tbody>
<tr>
<td>Quantity:</td>
<td>Paper type:</td>
</tr>
<tr>
<td><input name="amount" value="1" type="text"></td>
<td> <select name="paper">
<option value="1">250 gsm</option>
</select>
</td>
</tr>
</tbody>
</table>
Price: $
<br>
<input class="submitToCart" name="addCart" value="Add to cart" role="button" aria-disabled="false" style="margin-top: 4px;" type="submit">
</div>
</form>
the value of <span id="priceout">27,00</span> is generated dynamicaly after page loads with jQuery.
so he output of str looks like this Price: $
all i want to do is to put whole string Price: <span id="priceout">27,00</span>$ in to div. but my code isn't work
what I'm doing wrong ?

If it was up to me, I'd rather wrap that Price: in a div, give it an ID and then append it with the value like:
<div id="price"> Price: </div>
and in your function
$('#price').append('<span id="priceout">27,00</span>$');
Hope it helps.

Ok I've found a solution now js looks like this
$('#formElements').each(function() {
var form = $(this);
var str = form.html();
var str1 = str.slice(225,260);
//alert(str);
form.html(str.replace(str1,'<div class="price-cal-check">'+ str1 +'</div>'));
});
and it works

Related

How to append an inline template element with modified (id) content to another element?

Below in the example, I want that each time when the add button is clicked to take the element inside the template div and append it to the landingzone class element. But at the same time I need the NEWID to change for the new element. Of course this is just an example, the table stuff can be a div or anything else.
the form:
<form method="post">
<input type="text" name="title">
<input type="text" name="number">
<table>
<thead>
<tr> <th>Parts</th> </tr>
</thead>
<tbody class="landingzone">
</tbody>
</table>
<input type="submit" value="Save">
<input type="button" name"add" class="add" value="Save">
</form>
the template:
<div class="template" style="display: hidden">
<tr id="NEWID">
<td>
<input type="text" name="part_NEWID">
</td>
</tr>
</div>
What would be the best way to accomplish this?
Here's an example for your need. The javascript will work without changing any html except in place of name"add" should be name="add"
What i have done here is i'm getting the id of the template tr and setting it with increment and also the input field name.
var $landingzone = $('.landingzone');
var $add = $('.add');
var desiredId = 'id';
$add.on('click', function() {
var $template = $('.template').find('tr');
var id = $template.attr('id');
var idArr = id.split('-');
if (!idArr[1]) {
id = desiredId + '-1';
} else {
id = desiredId + '-' + (parseInt(idArr[1]) + 1);
}
$template.attr('id', id);
$template.find('input').attr('name', 'part_'+id);
console.log('input id--->'+id, 'input name--->'+'part_'+id);
$landingzone.append($template.clone());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="title">
<input type="text" name="number">
<table>
<thead>
<tr>
<th>Parts</th>
</tr>
</thead>
<tbody class="landingzone">
</tbody>
</table>
<input type="submit" value="Save">
<input type="button" name="add" class="add" value="Add">
</form>
<table class="template" style="display: none">
<tr id="NEWID">
<td>
<input type="text" name="part_NEWID">
</td>
</tr>
</table>
Like #Andrea said in her comment, some more details would be appreciated ...
I think what you are after is:
const $template = $('.template').clone()
$template.attr('id', 'someId')
$template.find('input[name="part_NEWID"]').attr('name', 'part_someId')
$('.landingzone').append($template)
And if you need it in a function:
function appendTemplateToLandingZone (newId) {
const $template = $('.template').clone()
$template.attr('id', newId)
$template.find('input[name="part_NEWID"]').attr('name', 'part_' + newId)
$('.landingzone').append($template)
}
I haven't tested this, so it might need a slight adjustment. If you'll provide a basic jsbin I'll make it work there.

piwik capture value behind dynamically generated download button from asp

A web site is developped in asp.net and let people choose pictures to download.
The website groups them togheter and people can then push a download button per picture.
As we never know how many pictures that eventually will be downloaded the button are dynamically generated.
I'm not permitted to alter the asp.net code on the server only in the piwik part...
The problem is that also the id's are dynamically generated..
I have tried with this:
$("h2").on("click", "a.button button-dl", function(){
alert($(this).text());
});
But got no result, In this case I would like to retrieve "276173" in a variable.
I hope that somebody can help me, thanks for reading
Guy
<table class="checkout-basket" cellspacing="0" rules="all" border="1" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem" style="border-collapse:collapse;">
<tr>
<th scope="col"> </th><th scope="col"> </th><th scope="col">Asset</th><th scope="col"> </th>
</tr><tr>
<td style="width:30px;">
<input id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_CbFlag" type="checkbox" name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$CbFlag" />
</td><td style="width:80px;">
<a onclick="return confirm('Bent u zeker dat u deze asset wil verwijderen?');" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_lbDelete" class="button" href="javascript:__doPostBack('ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$lbDelete','')">verwijder</a>
</td><td style="width:100px;">
<img id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_Image1" src="../../cache/images/thumb/3AF267A169AAED70770F0EEE7E74FBB61A526EBB_156.jpg" style="width:80px;border-width:0px;" />
</td>
<td>
<h2>
<a href='/nl-BE/asset/276173/'>
276173
</a>
</h2>
<h2>
<a href='/nl-BE/asset/276173/'>
20151109_113939_0040
</a>
</h2>
<a class="button button-dl" href="javascript:__doPostBack('ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$ctl00','')" style="margin-top: 4px;"><img style="position: relative; top: 4px; right: 5px" src="/images/picto/download.png" />Download</a>
</td><td>
<div id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_pnl">
<input type="hidden" name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$hfAsset" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_hfAsset" value="276173" />
<span id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint" class="rbl"><input id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint_0" type="radio" name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$rblPrint" value="False" checked="checked" /><label for="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint_0">Download</label><br /><input id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint_1" type="radio" name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$rblPrint" value="True" /><label for="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint_1">Print</label></span>
<div class="printFormat" style="display: none; padding: 3px 0 3px 20px;">
<select name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$ddlPrint" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_ddlPrint">
<option selected="selected" value="">--</option>
<option value="9cmx13cm">9cmx13cm</option>
<option value="10cmx15cm">10cmx15cm</option>
</select>
</div>
</div>
</td>
</tr><tr>
I eventually found a solution thanks to the answer below..
This is what I used
var newstr = "1";
var addressValue = "1";
$(".button.button-dl").click(function () {
var addressValue = $(this).attr('href');
console.log("tweede ",addressValue );
var re = /'(.*?)'/;
var re2 = /\$/gi;
var m = addressValue.match(re);
if (m != null)
idVal = (m[0].replace(re, '$1'));
console.log("idVal ",idVal);
var newstr = idVal.replace(/\$/gi, "_").slice(0,-6)+"_hfAsset";
console.log("newstr ",newstr);
console.log(document.getElementById(newstr).value);
});
You have a hierarchy problem:
First, a CSS problem: "a.button button-dl" should be "a.button.button-dl" (both classes are on the anchor tag).
Second, that anchor tag is not contained within an h2, so your event is never triggering. At best, you can use the td tag.
So your JS might look like:
$("td").on("click", "a.button.button-dl", function () {
alert($(this).text());
});

Add onclick to disabled input boxes

I have a table in which there are checkboxes, some checkboxes are disabled. I want to add an onclick attribute to all disabled checkboxes using JavaScript or jQuery.
HTML
<table class="docs_table" id="myTable2">
<tr id="node-22" class="disabled_element">
<td title="Document can't be selected.">
<input type="checkbox" name="docs" id="/root/docname" value="/root/docname" disabled />
</td>
</tr>
<tr id="node-23" class="">
<td title="">
<input type="checkbox" name="docs" id="/root/docname2" value="/root/docname2" />
</td>
</tr>
<tr id="node-24" class="disabled_element">
<td title="Document can't be selected.">
<input type="checkbox" name="docs" id="/root/docname3" value="/root/docname3" disabled />
</td>
</tr>
</table>
In above code the docname input box should get below as onclick.
onclick="javascript:if(confirm('Press OK to confirm')){ document.location='/pathtoscript?command=dosomething&name=docname'};return false;"
and docname3 should get the below
onclick="javascript:if(confirm('Press OK to confirm')){ document.location='/pathtoscript?command=dosomething&name=docname3'};return false;"
What I tried
$('table tr td input[type="checkbox"]').each(function () {
if ($( this ).prop('disabled')) {
$( this ).closest('tr').addClass('lineThrough');
$( this ).attr('onClick','onclick="javascript:if(confirm('Press OK to confirm')){ document.location='/pathtoscript?command=dosomething&name=docname'};return false;"');
}
});
But it doesn't work, and also I wonder how to deal with different docname because in onclick statement name=docname will be different for each input box.
Fiddle
I did it using this answer.
<table class="docs_table" id="myTable2">
<tr id="node-22" class="disabled_element">
<td title="Document is being edited by someone.">
<div style="display:inline-block; position:relative;">
<input type="checkbox" name="docs" id="/root/docname" value="/root/docname" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>
</td>
</tr>
<tr id="node-23" class="child">
<td title="">
<input type="checkbox" name="docs" id="/root/docname2" value="/root/docname2" />
</td>
</tr>
<tr id="node-22" class="disabled_element">
<td title="Document is being edited by someone.">
<div style="display:inline-block; position:relative;">
<input type="checkbox" name="docs" id="/root/docname3" value="/root/docname3" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>
</td>
$('table tr td input[type="checkbox"] + div').each(function () {
if ($(this).prev('input[disabled]')) {
$(this).closest('tr').addClass('lineThrough');
$(this).click(function () {
if (confirm('Press OK to confirm')) {
var docname = $(this).prev('input[disabled]').prop('value');
docname = docname.substring(docname.lastIndexOf('/') + 1);
document.location = '/pathtoscript?command=dosomething&name=' + docname;
}
});
}
});
Disabled elements don't generate mouse events. So basically what I did is added a div around the disabled inputs and added some JS to match it.
JSFiddle
In case, it is not possible for you to change your existing HTML structure and want to perform the action on click of the closest <td> element, please use the below code.
Javascript (jQuery)
$(document).ready(function(){
$('table tr td input[type="checkbox"]').each(function () {
if ($( this ).prop('disabled')) {
$( this ).closest('tr').addClass('lineThrough');
var valStr = $(this).val();
$( this ).closest('td').attr('onClick', 'clickFn("'+valStr+'");');
//console.log($( this ).closest('td').attr('onClick'));
}});
});
function clickFn(valStr){
if(confirm('Press OK to confirm')){
valStr = valStr.substring(valStr.lastIndexOf('/') + 1);
newHref = '/pathtoscript?command=dosomething&name=' +valStr;
//console.log(newHref);
document.location = newHref;
}
}
Demo

get all the input value and make an addition

<ul class="liste_couleur_qty">
<li style="margin-bottom: 20px;">
<dl>
<table width="200" border="0">
<tbody><tr>
<td width="50%">
<span style="display: block; font-size: 13px; line-height: 16px; margin-bottom: 2px;margin-right: 0px;margin-left: 20px;">Noir</span>
</td>
<td width="50%"><div class="add-to-cart">
<label for="qty-2195">qty :</label>
<input type="text" class="input-text qty calcul_qty_product" title="Qté" value="0" autocomplete="off" maxlength="5" data-product_color="127" id="qty-2195" name="qty-2195" onblur="addToCartPlus(2195, 127, this);">
</div></td>
</tr>
</tbody></table>
</dl>
</li>
<li style="margin-bottom: 20px;">
<dl>
<table width="200" border="0">
<tbody><tr>
<td width="50%">
<span style="display: block; font-size: 13px; line-height: 16px; margin-bottom: 2px;margin-right: 0px;margin-left: 20px;">Blanc</span>
</td>
<td width="50%"><div class="add-to-cart">
<label for="qty-2196">qty :</label>
<input type="text" class="input-text qty calcul_qty_product" title="Qté" value="0" autocomplete="off" maxlength="5" id="qty-2196" name="qty-2196" onblur="addToCartPlus();">
</div></td>
</tr>
</tbody></table>
</dl>
</li>
<li style="margin-bottom: 20px;">
<dl>
<table width="200" border="0">
<tbody><tr>
<td width="50%">
<span style="display: block; font-size: 13px; line-height: 16px; margin-bottom: 2px;margin-right: 0px;margin-left: 20px;">Blanc</span>
</td>
<td width="50%"><div class="add-to-cart">
<label for="qty-2196">qty :</label>
<input type="text" class="input-text qty calcul_qty_product" title="Qté" value="0" autocomplete="off" maxlength="5" id="qty-2196" name="qty-2196" onblur="addToCartPlus();">
</div></td>
</tr>
</tbody></table>
</dl>
</li>
</ul>
<div id="qtyvalue"><div>
i want to do:
change the content of a div(qtyvalue) dynamically when the input value changes? if there are more input text vaule, add them together then shows the number in the div(qtyvalue). i using the following code.
input.onkeyup = function() {
var result = 0;
$('.liste_couleur_qty li input').each(function(){
result += parseInt(this.value, 10);
});
document.getElementById('qtyvalue').innerHTML = result.value;
}
but the code doesn't work, i don't know how to loop the input,if there are two or many input text box. thank you.
What you want is this:
$(document).ready(function() { //wrap in a document.ready event handler
$('input').on('keyup', function() { //bind using jQuery
var result = 0;
$('.liste_couleur_qty li input').each(function() {
result += parseInt(this.value, 10);
});
$('div#qtyvalue').text(result); //result.value doesn't exist, use result.
});
});​
Here's a demo: http://jsfiddle.net/jeRdA/
UDPATE:
To allow for users changing the value of any of the inputs to ''(e.g., blank, or empty) or a non-numeric value, modify the line:
result += parseInt(this.value, 10);
to:
result += parseFloat(this.value, 10) || 0;
Updated fiddle: http://jsfiddle.net/jeRdA/3/
Try this:
var $inputs = $('.liste_couleur_qty li input');
$inputs.keyup(function() {
var result = 0;
$inputs.each(function(){
result += parseInt(this.value, 10);
});
$('#qtyvalue').html(result);
});
This would need to be in a document ready handler or in a script block after the elements in question (many people put their scripts at the end of the body).
In your code, input.onkeyup = ... wouldn't work because there is no variable input (it doesn't automatically pick up all input elements), and also using someElement.onkeyup = only lets you attach a handler to one element at a time. Use jQuery to bind the keyup handler instead. Also, to use the total at the end just use result, using result.value wouldn't work.

Add another element using GetElementById?

Let's say that this' an HTML code:
<tr>
<td>Wusool</td>
<td id="yasel">
15:12
</td>
</tr>
and I want to change it into this html code:
<tr>
<td>Wusool</td>
<td id="yasel">
15:12
</td>
</tr>
<tr>
<td>Ersal</td>
<td id="sent">
20:12
</td>
</tr>
How can I use GetElementById to do this?
Thanks in advance.
var tr = document.getElementById('yasel').parentNode,
new_tr = tr.parentNode.insertRow( tr.rowIndex + 1 ),
new_td;
new_tr.insertCell(0).innerHTML = 'Erasel';
(new_td = new_tr.insertCell(1)).innerHTML = '20:12';
new_td.id = "sent";
http://jsfiddle.net/7N3kr/
After getting elementbyID, get parent element (I don't have code handy, but you can google how to get parent element for html getelementbyID). Then add child element.
Try This Code in HTML Head:
<script language="javascript" type="text/javascript" >
function ChangeValue(element_id, val) {
var elm = document.getElementById(element_id);
elm.innerHTML = val;
}
</script>
Try This in HTML body:
<table>
<tr>
<td>
<span id="box1"></span>
</td>
<td>
<span id="box2"></span>
</td>
<td>
<span id="box3"></span>
</td>
</tr>
</table>
<input type="button" id="btn_change1" value="Change Value" onclick="ChangeValue('box1','22:30')" />
<input type="button" id="btn_change2" value="Change Value" onclick="ChangeValue('box2','11:10')" />
<input type="button" id="btn_change3" value="Change Value" onclick="ChangeValue('box3','21:35')" />
using javascript you can do it as
var td_elem = document.getElementById('yasel');
var tr_elem = td_elem.parentNode;
var table_elem = tr_elem.parentNode;
table_elem.innerHTML = table_elem.innerHTML + '<tr><td>Ersal</td><td id="sent">20:12</td></tr>';
fiddle : http://jsfiddle.net/4MJuS/
but you must try using jquery, it is a very good framework for javascript.
you can do it vary easily using jQuery
$('#yasel').parent().parent().append('<tr><td>Ersal</td><td id="sent"> 20:12 </td></tr>');

Categories