|
Try using prop instead of attr:
row.find("[id*=txt_watersizes]").prop("disabled", value === ""); Also note that you're disabling the textbox when the selected value is empty. Based on your description, I suspect you want to disable it when the selected value is not empty.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hello everyone
I have a purchase order that works great.
But so that the user can have a better experience, I would like to replace the select which is used to choose the quantity of articles by buttons + and -
But I am facing a small problem which is the recovery of the elements of my article.
Indeed for the moment, when I choose a quantity with the select this quantity is overlapped by the function changeQte (element)
Then when I click on the add to cart button, I retrieve the different data from "ajouter au panier" button
So this whole part, I got it right
Once an item is in the cart, I can modify its quantity with a plus or a minus
So I know the objects exist in my code to make it, that is.
ajouter_produit_dans_panier
And
enlever_produit_de_panier
It would therefore suffice that I add two buttons with clicks + and - to replace the select
Yes, but here is how to manage the data elements at this time
data-name="Item 1" data-price="1.10" data-qty="1"
I give you my codpen code, it's easier for the test
<a href="https://codepen.io/flexi2202/pen/poOeOgv">https://codepen.io/flexi2202/pen/poOeOgv</a>[<a href="https://codepen.io/flexi2202/pen/poOeOgv" target="_blank" title="New Window">^</a>]
Ah yes, I already deleted the select and the add to cart button and replace with my buttons
|
|
|
|
|
Good morning
In my code in javascript I would like to trigger a pop up in javascript
But without click and without ID
In a place of my code, I have a condition and in this condition, I would like to open a popup if the condition is true
To facilitate, I give you my code
<a href="https://codepen.io/flexi2202/pen/rNZeQBw">https:
|
|
|
|
|
Don't.
Unsolicited popups are vile, evil design patterns promoted by spammers and people trying to milk the cash cow of the Internet by opening up a kiddie Shopify store, etc. They have very little place in a professional design and instantly devalues the site's perception.
If you're trying to distract the user from their action by showing an ad, newsletter signup, etc. consider at the very least a partial overlay that stands out but doesn't completely obstruct the user.
Jeremy Falcon
|
|
|
|
|
hello I have a problem I have a purchase order with 500 items, in this example I only put 3 items
When I add an item to the cart I would like to be able to display the panel div but just for the item that was put in the cart with the ajouter au panier button
But when I click on retirer du panier I want the button to disappear
<pre> <a data-nom="2001" class="btn btn-primary ajouter-panier b-items__item__add-to-cart" onclick="myFunction();">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a><br>
</div>
<a data-nom="2002" class="btn btn-primary ajouter-panier b-items__item__add-to-cart" onclick="myFunction();">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a><br>
</div>
<a data-nom="2003" class="btn btn-primary ajouter-panier b-items__item__add-to-cart" onclick="myFunction();">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a>
<pre lang="Javascript">function myFunction() {
var a = document.querySelectorAll(".panel[style*='display:none']");
console.log ("display",a)
a[0].style.display ='block';
}
function myFunction2() {
var b = document.querySelectorAll(".panel[style*='display:block']");
console.log ("display",b)
b[0].style.display ='none';
}
|
|
|
|
|
With the specified markup, the only way to identify the correct panel is to loop through the sibling elements until you find it:
<a data-nom="2001" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a><br>
</div>
<a data-nom="2002" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a><br>
</div>
<a data-nom="2003" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a>
</div>
document.addEventListener("click", e => {
let el = e.target;
if (el.tagName !== "A") { el = el.closest("a"); }
if (!el || !el.classList.contains("b-items__item__add-to-cart")) { return; }
e.preventDefault();
let panel = el.nextElementSibling;
while (panel && panel.tagName !== "DIV"){
panel = panel.nextElementSibling;
}
if (panel) {
panel.style.display = "block";
}
}); Demo[^]
If you can change the markup structure so that each link and panel have a wrapper element, then it becomes slightly easier:
<div class="item-card">
<a data-nom="2001" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a><br>
</div>
</div>
<div class="item-card">
<a data-nom="2002" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a><br>
</div>
</div>
<div class="item-card">
<a data-nom="2003" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a>
</div>
</div>
document.addEventListener("click", e => {
let el = e.target;
if (el.tagName !== "A") { el = el.closest("a"); }
if (!el || !el.classList.contains("b-items__item__add-to-cart")) { return; }
const card = el.closest(".item-card");
if (!card) { return; }
const panel = card.querySelector(".panel");
if (!panel) { return; }
e.preventDefault();
panel.style.display = "block";
}); Demo[^]
In either case, it's best to avoid the onclick attribute, and wire up the event handlers in code. In this case, I've used event delegation[^], which is generally more efficient than adding handlers to multiple elements, and also allows the code to handle events on elements which are added to the DOM at some later time.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
thank you for the answer and the help, it's appreciated
this works perfectly fine to display "retirer panier"
But how to hide "retirer panier"
when you click on "retirer panier"
modified 21-Feb-23 6:21am.
|
|
|
|
|
With the original markup:
const showPanel = el => {
let panel = el.nextElementSibling;
while (panel && panel.tagName !== "DIV"){
panel = panel.nextElementSibling;
}
if (panel) {
panel.style.display = "block";
}
};
const hidePanel = el => {
const panel = el.closest(".panel");
if (panel) {
panel.style.display = "none";
}
};
document.addEventListener("click", e => {
let el = e.target;
if (el.tagName !== "A") { el = el.closest("a"); }
if (!el) { return; }
if (el.classList.contains("b-items__item__add-to-cart")) {
e.preventDefault();
showPanel(el);
} else if (el.classList.contains("ajouter-panier")) {
e.preventDefault();
hidePanel(el);
}
});Demo[^]
With the modified markup:
document.addEventListener("click", e => {
let el = e.target;
if (el.tagName !== "A") { el = el.closest("a"); }
if (!el || !el.classList.contains("ajouter-panier")) { return; }
const card = el.closest(".item-card");
if (!card) { return; }
const panel = card.querySelector(".panel");
if (!panel) { return; }
e.preventDefault();
if (el.classList.contains("b-items__item__add-to-cart")) {
panel.style.display = "block";
} else if (el.classList.contains("ajouter-panier")) {
panel.style.display = "none";
}
}); Demo[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
a very big thank you, really thank you for this code
on first try it works great
I'm going to do a bigger test.
I'll keep you informed
|
|
|
|
|
Excuse me for disturbing you.
I just tried the code on my site, but I have a little compatibility problem with what already exists on my site.
maybe you could help me
When I add an item to my cart
I have an animation that drives the item into its shopping cart.
for your code to work I have to deactivate part of my code from line 29 to 34, but in this case I no longer have my animation
Could you help me please
testaffichercacher - JSFiddle - Code Playground[^]
|
|
|
|
|
The code sample has a few script errors, particularly around a missing .b-cart element and a missing external reference.
Beyond that, since you're using jQuery, you don't need the code from my previous answers. Within the "add-to-cart" click event handler, you just need to add:
var panel = item.find('.panel');
panel.show(); To hide the panel when its nested link is clicked, add:
$(document).on('click', '.panel a.ajouter-panier', function(evt){
this.closest('.panel').style.display = 'none';
});testaffichercacher - JSFiddle - Code Playground[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Before:
This is not a test.
This is line 2.
After:
This is totally a test.
This is line 2.
Compare
// events
function buttonCompareClicked()
{
var textBefore = document.getElementById("textareaBefore").value;
var textAfter = document.getElementById("textareaAfter").value;
var differences = new TextDifferencer().findDifferencesBetweenStrings
(
textBefore,
textAfter
);
var differencesAsString = differences.toString();
var textareaDifferences = document.getElementById
(
"textareaDifferences"
);
textareaDifferences.innerHTML = differencesAsString;
}
// extensions
function ArrayExtensions()
{
// extension class
}
{
Array.prototype.insertElementAt = function(element, index)
{
this.splice(index, 0, element);
}
Array.prototype.insertElementsAt = function(elements, index)
{
for (var i = 0; i < elements.length; i++)
{
this.splice(index + i, 0, elements[i]);
}
}
Array.prototype.removeAt = function(index)
{
this.splice(index, 1);
}
}
// classes
function TextDifferencer()
{
// do nothing
}
{
TextDifferencer.prototype.findDifferencesBetweenStrings = function(string0, string1)
{
var lengthOfShorterString =
(string0.length <= string1.length ? string0.length : string1.length);
var numberOfExtremes = 2;
var passagePairsMatchingAtExtremes = [];
for (var e = 0; e < numberOfExtremes; e++)
{
var lengthOfMatchingSubstring = 0;
for (var i = 0; i < lengthOfShorterString; i++)
{
var offsetForString0 = (e == 0 ? i : string0.length - i - 1);
var offsetForString1 = (e == 0 ? i : string1.length - i - 1);
var charFromString0 = string0[offsetForString0];
var charFromString1 = string1[offsetForString1];
if (charFromString0 != charFromString1)
{
lengthOfMatchingSubstring = i;
break;
}
}
var matchingSubstringAtExtreme;
if (e == 0)
{
matchingSubstringAtExtreme = string0.substr(0, lengthOfMatchingSubstring);
string0 = string0.substr(lengthOfMatchingSubstring);
string1 = string1.substr(lengthOfMatchingSubstring);
} else // if (e == 1)
{
matchingSubstringAtExtreme = string0.substr(string0.length - lengthOfMatchingSubstring);
string0 = string0.substr(0, string0.length - lengthOfMatchingSubstring);
string1 = string1.substr(0, string1.length - lengthOfMatchingSubstring);
}
var passagePairMatchingAtExtreme = new TextPassagePair
(
true, // doPassagesMatch
[
new TextPassage(matchingSubstringAtExtreme),
new TextPassage(matchingSubstringAtExtreme),
]
);
passagePairsMatchingAtExtremes.push
(
passagePairMatchingAtExtreme
);
}
var passagePairsAll = [];
var passagePairsMatching = this.findPassagePairsMatchingBetweenStrings
(
string0, string1, [ 0, 0 ]
);
this.insertPassagePairsDifferentBetweenMatching
(
string0,
string1,
passagePairsMatching,
passagePairsAll
);
for (var e = 0; e < passagePairsMatchingAtExtremes.length; e++)
{
var passagePairMatchingAtExtreme = passagePairsMatchingAtExtremes[e];
passagePairsAll.insertElementAt
(
passagePairMatchingAtExtreme,
(e == 0 ? 0 : passagePairsAll.length)
);
}
var returnValue = new TextDifferences(passagePairsAll);
return returnValue;
}
TextDifferencer.prototype.findPassagePairsMatchingBetweenStrings = function
(
string0, string1, positionOffsets
)
{
var passagePairsMatching = [];
var longestCommonPassagePair = this.findLongestCommonPassagePair
(
string0,
string1
);
var longestCommonPassageText = longestCommonPassagePair.passages[0].text;
var lengthOfCommonPassage = longestCommonPassageText.length;
if (lengthOfCommonPassage == 0)
{
return passagePairsMatching;
}
passagePairsMatching.push(longestCommonPassagePair);
var passages = longestCommonPassagePair.passages;
var passage0 = passages[0];
var passage1 = passages[1];
var passagePairsMatchingBeforeCommon = this.findPassagePairsMatchingBetweenStrings
(
string0.substr(0, passage0.position),
string1.substr(0, passage1.position),
[
positionOffsets[0],
positionOffsets[1]
]
);
var passagePairsMatchingAfterCommon = this.findPassagePairsMatchingBetweenStrings
(
string0.substr
(
passage0.position + lengthOfCommonPassage
),
string1.substr
(
passage1.position + lengthOfCommonPassage
),
[
positionOffsets[0]
+ passage0.position
+ lengthOfCommonPassage,
positionOffsets[1]
+ passage1.position
+ lengthOfCommonPassage
]
);
var passagePairSetsMatchingBeforeAndAfter =
[
passagePairsMatchingBeforeCommon,
passagePairsMatchingAfterCommon
];
for (var i = 0; i < passagePairSetsMatchingBeforeAndAfter.length; i++)
{
var passagePairsToInsert = passagePairSetsMatchingBeforeAndAfter[i];
passagePairsMatching.insertElementsAt
(
passagePairsToInsert,
(i == 0 ? 0 : passagePairsMatching.length)
);
}
for (var i = 0; i < longestCommonPassagePair.passages.length; i++)
{
var passage = longestCommonPassagePair.passages[i];
passage.position += positionOffsets[i];
}
return passagePairsMatching;
}
TextDifferencer.prototype.findLongestCommonPassagePair = function(string0, string1)
{
var passage0 = new TextPassage("", 0);
var passage1 = new TextPassage("", 0);
var returnValue = new TextPassagePair
(
true, // doPassagesMatch
[
passage0, passage1
]
);
var lengthOfString0 = string0.length;
var lengthOfString1 = string1.length;
var substringLengthsForRow = null;
var substringLengthsForRowPrev;
var lengthOfLongestCommonSubstringSoFar = 0;
var longestCommonSubstringsSoFar = "";
var cellIndex = 0;
// Build a table whose y-axis is chars from string0,
// and whose x-axis is chars from string1.
// Put length of the longest substring in each cell.
for (var i = 0; i < lengthOfString0; i++)
{
substringLengthsForRowPrev = substringLengthsForRow;
substringLengthsForRow = [];
for (var j = 0; j < lengthOfString1; j++)
{
if (string0[i] != string1[j])
{
substringLengthsForRow[j] = 0;
}
else
{
var cellValue;
if (i == 0 || j == 0)
{
// first row or column
cellValue = 1;
}
else
{
// Copy cell to upper left, add 1.
cellValue = substringLengthsForRowPrev[j - 1] + 1;
}
substringLengthsForRow[j] = cellValue;
if (cellValue > lengthOfLongestCommonSubstringSoFar)
{
lengthOfLongestCommonSubstringSoFar = cellValue;
var startIndex = i - lengthOfLongestCommonSubstringSoFar + 1;
var longestCommonSubstringSoFar = string0.substring // not "substr"!
(
startIndex,
i + 1
);
passage0.text = longestCommonSubstringSoFar;
passage0.position = startIndex;
passage1.text = longestCommonSubstringSoFar;
passage1.position = j - lengthOfLongestCommonSubstringSoFar + 1;
}
}
}
}
return returnValue;
}
TextDifferencer.prototype.insertPassagePairsDifferentBetweenMatching = function
(
string0,
string1,
passagePairsToInsertBetween,
passagePairsAll
)
{
passagePairsToInsertBetween.insertElementAt
(
new TextPassagePair
(
true, // doPassagesMatch
[
new TextPassage("", 0),
new TextPassage("", 0)
]
),
0
);
passagePairsToInsertBetween.push
(
new TextPassagePair
(
true, // doPassagesMatch
[
new TextPassage("", string0.length),
new TextPassage("", string1.length)
]
)
);
var pMax = passagePairsToInsertBetween.length - 1;
for (var p = 0; p < pMax; p++)
{
passagePairToInsertAfter = passagePairsToInsertBetween[p];
passagePairToInsertBefore = passagePairsToInsertBetween[p + 1];
this.buildAndInsertPassagePairBetweenExisting
(
string0,
string1,
passagePairToInsertBefore,
passagePairToInsertAfter,
passagePairsAll
);
passagePairsAll.push(passagePairToInsertBefore);
}
var indexOfPassagePairFinal = passagePairsAll.length - 1;
var passagePairFinal = passagePairsAll[indexOfPassagePairFinal];
if
(
passagePairFinal.doPassagesMatch == true
&& passagePairFinal.passages[0].text.length == 0
)
{
passagePairsAll.removeAt(indexOfPassagePairFinal, 1);
}
}
TextDifferencer.prototype.buildAndInsertPassagePairBetweenExisting = function
(
string0,
string1,
passagePairToInsertBefore,
passagePairToInsertAfter,
passagePairsAll
)
{
var lengthOfPassageToInsertAfter = passagePairToInsertAfter.passages[0].text.length;
var positionsForPassagePairDifferent =
[
[
passagePairToInsertAfter.passages[0].position
+ lengthOfPassageToInsertAfter,
passagePairToInsertAfter.passages[1].position
+ lengthOfPassageToInsertAfter
],
[
passagePairToInsertBefore.passages[0].position,
passagePairToInsertBefore.passages[1].position
]
];
var passageToInsert0 = new TextPassage
(
string0.substring // not "substr"!
(
positionsForPassagePairDifferent[0][0],
positionsForPassagePairDifferent[1][0]
),
positionsForPassagePairDifferent[0][0]
);
var passageToInsert1 = new TextPassage
(
string1.substring // not "substr"!
(
positionsForPassagePairDifferent[0][1],
positionsForPassagePairDifferent[1][1]
),
positionsForPassagePairDifferent[0][1]
);
var passagePairToInsert = new TextPassagePair
(
false, // doPassagesMatch
[
passageToInsert0,
passageToInsert1
]
);
if
(
passagePairToInsert.passages[0].text.length > 0
|| passagePairToInsert.passages[1].text.length > 0
)
{
passagePairsAll.push(passagePairToInsert);
}
}
}
function TextDifferences(passagePairs)
{
this.passagePairs = passagePairs;
}
{
// instance methods
TextDifferences.prototype.toString = function()
{
var returnValue = "";
for (var p = 0; p < this.passagePairs.length; p++)
{
var passagePair = this.passagePairs[p];
var passagePairAsString = passagePair.toString();
returnValue += passagePairAsString;
}
return returnValue;
}
}
function TextPassage(text, position)
{
this.text = text;
this.position = position;
}
function TextPassagePair(doPassagesMatch, passages)
{
this.doPassagesMatch = doPassagesMatch;
this.passages = passages;
}
{
TextPassagePair.prototype.toString = function()
{
var returnValue = "";
if (this.doPassagesMatch == true)
{
returnValue = this.passages[0].text;
returnValue = this.escapeStringForHTML(returnValue);
}
else
{
returnValue += "<mark style='background-color:red'>";
returnValue += this.escapeStringForHTML(this.passages[0].text);
returnValue += "</mark><mark style='background-color:yellow'>";
returnValue += this.escapeStringForHTML(this.passages[1].text);
returnValue += "</mark>";
}
return returnValue;
}
TextPassagePair.prototype.escapeStringForHTML = function(stringToEscape)
{
var returnValue = stringToEscape.replace
(
"&", "&"
).replace
(
"<", "<"
).replace
(
">", ">"
).replace
(
"\n", "<br />"
);
return returnValue;
}
}
In this i want to show the similarity percentage of words. can anyone help me
|
|
|
|
|
Member 15927994 wrote: can anyone help me
Not until you learn how to ask a proper question.
Dumping 500+ lines of unformatted, unexplained code and appending a vague description of your requirement is not a good question.
Start by explaining precisely what you are trying to do, what you have tried, and where you are stuck. When including code, include only the relevant parts of the code, and ensure it is formatted properly by selecting it and pressing the code button on the toolbar, or surrounding it with <pre>...</pre> tags.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
how to unzip and download all images of a zip file using javascript
|
|
|
|
|
|
I need an element on my page to slide-in automatically 3 seconds after page is opened, and then slide-out after user chooses their preferred choice from the dropdown menu (which is the Element). I want the slide-in/slide-out effect to be from the right-hand side of the page.
The dropdown menu particularly is the 'Google Translate Element', which I have styled to my desired appearance, and I want this to slide in 4 seconds upon page lunch and after user chooses desired language, it slides out.
Below is the code for the styled Element
#google_translate_element select{
background: rgba(246,237,253,0.92) !important;
border: none !important;
color: rgba(54,58,173) !important;
width: 115px !important;
border-radius: 5px !important;
padding: 5px 5px !important;
font-size: 11.8px !important;
position: absolute !important;
margin-top: 84px !important;
margin-left: 232px !important;
}
.vl {
position: absolute !important;
border-left: 3.7px solid green !important;
border-radius: 2px !important;
height: 30px !important;
margin-top: 67px !important;
margin-left:351px !important;
}
.goog-logo-link,.goog-te-gadget span,div#goog-gt-{
display:none!important;
}
.goog-te-gadget{
color:transparent!important;
font-size:0;
}
.goog-te-banner-frame{
display:none !important;
}
#goog-gt-tt, .goog-te-balloon-frame{
display: none !important;
}
.goog-text-highlight {
background: none !important;
box-shadow: none !important;
}
<div id="google_translate_element"></div>
<div class="vl"></div>
|
|
|
|
|
I need api connection code from google calendar in javascript
|
|
|
|
|
I need lots of money and a fast car.
|
|
|
|
|
Nobody is going to do your work for you, and this is not a "core for hire" site.
If you want someone to do your work for you, I suggest Freelancer.com and get out your credit card.
|
|
|
|
|
I have a form that asks users to provide their billing and shipping addresses.
If the billing address is same as the mailing address, click a checkbox to copy the billing address information to mailing address boxes.
So far, address, city and zip are getting copied from billing to mailing addresses but the State address is not getting copy.
The billing State has a hardcoded value of WI for Wisconsin. That NEVER changes, hence it is hardcoded.
The mailing address for State has a DropDownList of states, I am pretty sure that has to do with why the billing address for State is not getting cover over to mailing address for State.
Can you guys please see what I am doing wrong?
Here is what I am working with.
<script type="text/javascript">
$('#SameAsMailing').click(function () {
if ($('input[name="SameAsMailing"]').is(':checked')) {
$('#mailStreetAddress').val($('#instAddress').val());
$('#mailCity').val($('#instAddressCity').val());
var thestate = $('#instAddressState option:selected').val();
if (thestate != "") {
$('#mailState option[value="' + thestate + '"]').prop('selected', true);
}
$('#mailZip').val($('#instAddressZip').val());
}
else
{
$('#mailStreetAddress').val("");
$('#mailCity').val("");
$('#mailState option:eq(0)').prop('selected', true);
$('#mailZip').val("");
}
});
</script>
<asp:TableRow>
<asp:TableHeaderCell CssClass="align-right">Install Address:</asp:TableHeaderCell>
<asp:TableCell><asp:TextBox ID="instAddress" runat="server" /></asp:TableCell>
<asp:TableHeaderCell CssClass="align-right">City:</asp:TableHeaderCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableHeaderCell CssClass="align-right">City:</asp:TableHeaderCell>
<asp:TableCell><asp:DropDownList ID="instAddressCity" OnSelectedIndexChanged="instAddressCity_Changed" AutoPostBack="true" runat="server" /></asp:TableCell>
<asp:TableHeaderCell CssClass="align-right">State:</asp:TableHeaderCell>
<asp:TableCell CssClass="align-left"><asp:Label ID="instAddressState" runat="server" Text="WI" /></asp:TableCell>
<asp:TableHeaderCell CssClass="align-left">Zip:</asp:TableHeaderCell>
<asp:TableCell><asp:DropDownList ID="instAddressZip" runat="server" /></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableHeaderCell CssClass="align-right">Address:</asp:TableHeaderCell>
<asp:TableCell><asp:TextBox ID="mailStreetAddress" runat="server" /></asp:TableCell>
<asp:TableHeaderCell CssClass="align-right">City:</asp:TableHeaderCell>
<asp:TableCell><asp:TextBox ID="mailCity" runat="server" /></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableHeaderCell CssClass="align-right">State:</asp:TableHeaderCell>
<asp:TableCell><asp:DropDownList ID="mailState" runat="server"></asp:DropDownList></asp:TableCell>
<asp:TableHeaderCell CssClass="align-right">Zip:</asp:TableHeaderCell>
<asp:TableCell><asp:TextBox ID="mailZip" runat="server" /></asp:TableCell>
</asp:TableRow>
Many thanks in advance
|
|
|
|
|
samflex wrote:
var thestate = $('#instAddressState option:selected').val();
if (thestate != "") {
$('#mailState option[value="' + thestate + '"]').prop('selected', true);
}
Try:
var thestate = $('#instAddressState').val();
if (thestate !== "") {
$('#mailState').val(thestate);
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thank you for your response sir but it did not work.
In other words, the value of WI did not get copied to the mailState DropDownList.
I tried hardcoding the State value since that will always be the same like this:
var thestate = 'WI';
if (thestate !== "") {
$('#mailState').val(thestate);
}
It appears to change something on the mailState dropdownlist but did not display that WI value in the dropdown.
Instead, it showed blank value as the selected value on the mailState dropdownlist box.
modified 13-Feb-23 11:38am.
|
|
|
|
|
Hi all,
I’ve two issues
The first one:
as you can see in the second image (when cloning select input with select2 plugin, the cloned input appears with (the first disabled item appended next to the main input in every row)).
[Original row image]
[My issue image]
the second issue:
I’ve ajax code to append “unit menu” based on “product menu” selection
when I create a new row, and select an item from “product menu” I expected that the “unit menu” of the same row must affect and append the “unit list” belongs to the selection of the "product menu" in the same row.
But the behavior according to the next code is very different (after cloning the main row, when I select a product the appended unit list (appears in all unit menu in every row) and after I used ("this" or "the new created class") I get an empty "unit menu" in the new rows (i.e when select a product no changes takes place in the "unit menu")
Only the first row works (select a product append a menu to "unit input menu")
### js.html file
<script>
$(document).ready(function() {
var purchase = $('.purchase-row').last().clone();
let purchaseCount = 0;
$(document).on('click', '.add_item', function() {
var clone = purchase.clone();
console.log('clone: ', clone);
$(this).prevAll('.purchase-row').first().after(clone.hide());
clone.slideDown('fast');
$('.purchase-row').find('#id_pro-product').removeClass('product').addClass('newProduct');
$('.purchase-row').find('#id_pro-unit').removeClass('unit').addClass('newUnit');
$('.purchase-row').find('#id_pro-product').addClass('product_'+ purchaseCount);
$('.purchase-row').find('#id_pro-unit').addClass('unit_'+ purchaseCount);
var $example = $(".newProduct").select2();
$example.select2();
purchaseCount++;
console.log('PURCHASE-COUNT: ', purchaseCount);
});
$(document).on('click', '.purchase-minus', function() {
if (purchaseCount == 0) {
alert('You can not delete this row' );
} else {
$(this).closest('.purchase-row').remove();
purchaseCount--;
console.log('PURCHASE-COUNT2: ', purchaseCount);
}
});
$(document).on('click', '.purchase-broom', function() {
$(this).closest('.newProduct').select2('destroy');
$(this).closest('.purchase-row').find('select')[0].selectedIndex=0;
});
$(document).on('change', '.product', function(e){
var product_id = $(this).val();
console.log('SUCCESS-CHANGE-PRODUCT: ', product_id);
$.ajax({
type: 'POST',
url: '{% url "purchases:get_product_unit" %}',
data: {
'pro-product': $('.purchase-row select').closest('.product').val(),
},
success: function (data) {
console.log(
'FROM SUCCESS: ', data['unit'],
);
var values_3 = data['unit'];
$('select').closest('.unit').text('');
if (values_3.length > 0) {
for (var i = 0; i < values_3.length; i++) {
$('select').closest('#id_pro-unit').append('<option>' + values_3[i] + '</option>');
}
}
},
error: function (){
console.log('ERROR with ajax request in Adding Purchase !!!');
},
});
e.preventDefault();
});
$(document).on('change', '.newProduct', function(e){
var product_id = $(this).val();
var $this = $(this);
console.log('SUCCESS-CHANGE-PRODUCT-FROM-NEW-CLASS: ', product_id);
$.ajax({
type: 'POST',
url: '{% url "purchases:get_new_row_unit" %}',
data: {
'pro-product': product_id,
},
success: function (data) {
console.log(
'FROM SUCCESS-NEW-CLASS: ', data['unit'],
'PRODUCT-FROM-NEW-CLASS: ', data['product'],
);
var values_3 = data['unit'];
$('select').closest('.unit_'+purchaseCount).text('');
if (values_3.length > 0) {
for (var i = 0; i < values_3.length; i++) {
$('.purchase-row select').closest('.unit_'+ purchaseCount).append('<option>' + values_3[i] + '</option>');
}
}
},
error: function (){
console.log('ERROR with ajax request in Adding Purchase-New Class !!!');
},
});
e.preventDefault();
});
});
</script>
[Pastebin link]
[Codepen link]
By the way I'm using Django so the inputs will not appear correctly in codepen link
Sorry for prolongation.... Thanks
Amr Aly
|
|
|
|
|
Finally I fix my issue as usual. I want to share my solution of this issue.
$(document).on('change', '.product', function(e){
var product_id = $(this).val();
let $el = $(this).closest('.purchase-row');
console.log('SUCCESS-CHANGE-PRODUCT: ', product_id,);
$.ajax({
type: 'POST',
url: '{% url "purchases:get_product_unit" %}',
data: {
'pro-product': product_id,
},
success: function (data) {
if (purchaseCount == 0) {
console.log('purchase count equal to ZERO: ');
console.log(
'FROM SUCCESS: ', data['unit'],
);
var values_3 = data['unit'];
if (values_3.length > 0) {
for (var i = 0; i < values_3.length; i++) {
$el.find('.unit').append('<option>' + values_3[i] + '</option>');
}
}
} else {
let unit = $el.find('.newUnit');
var values_3 = data['unit'];
unit.text('');
console.log('COUNT IS NOT EQUAL TO ZERO:', values_3);
if (values_3.length > 0) {
for (var i = 0; i < values_3.length; i++) {
unit.append('<option>' + values_3[i] + '</option>');
}
}
}
},
error: function (){
console.log('ERROR with ajax request in Adding Purchase !!!');
},
});
e.preventDefault();
});
Or in an enhanced code snippet as follow
$(document).on("change", ".product", function (e) {
var product_id = $(this).val();
let $el = $(this).closest(".purchase-row");
console.log("SUCCESS-CHANGE-PRODUCT: ", product_id);
$.ajax({
type: "POST",
url: '{% url "purchases:get_product_unit" %}',
data: {
"pro-product": product_id
},
success: function (data) {
const values_3 = data.unit;
const unitClass = purchaseCount == 0 ? ".unit" : ".newUnit";
const unit = $el.find(unitClass);
unit.text('');
if (values_3.length) {
for (const value of values_3) {
unit.append(`<option>${value}</option>`);
}
}
},
error: function () {
console.log("ERROR with ajax request in Adding Purchase !!!");
}
});
e.preventDefault();
});
|
|
|
|
|
Hi everyone,
I wrote this great script to help my team set up the weekly task distribution board, I wrote it using java script, html, and css, they've been doing it for a very long time in pencil on paper. but now i am in the final stage, i would like to convert my table to pdf, and this is where i found it difficult, i did several tests : like convert csv to pdf, it doesn't always give a good table, as it is under html. I would like to add a column at the end of the table for remarks but I think I will try with it later. now i'm just focus on pdf export. to be able to print our table every week and hang it, instead of pencil and a paper.
<pre>
<table id="timetable">
<body>
<tr>
<td>
<link href="table.css" rel="stylesheet">
<script src="table.js"></script>
</td>
<tr>
<button onclick="exportCSV()">Export CSV</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<button onclick="exportPDF()">Export PDF</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.77/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.77/vfs_fonts.js"></script>
</body>
const timetable = document.getElementById("timetable");
const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const hours = ["7H", "13H", "20H"];
const daysHeaderRow = document.createElement("tr");
const daysHeaderCell = document.createElement("th");
daysHeaderCell.innerHTML = "Days";
daysHeaderRow.appendChild(daysHeaderCell);
days.forEach(day => {
const dayHeaderCell = document.createElement("th");
dayHeaderCell.innerHTML = day;
dayHeaderCell.colSpan = 3;
daysHeaderRow.appendChild(dayHeaderCell);
});
timetable.appendChild(daysHeaderRow);
const hoursHeaderRow = document.createElement("tr");
const hoursHeaderCell = document.createElement("th");
hoursHeaderCell.innerHTML = "Hours";
hoursHeaderRow.appendChild(hoursHeaderCell);
for (let i = 0; i < days.length; i++) {
for (let j = 0; j < 3; j++) {
const hourHeaderCell = document.createElement("th");
hourHeaderCell.innerHTML = hours[j];
hoursHeaderRow.appendChild(hourHeaderCell);
}
}
timetable.appendChild(hoursHeaderRow);
const names = ["Khalfi","Redouani", "Daki", "Hamma", "Saadane", "Boughanem", "El Ansari","Badilou","Raoui", "Chouiba", "Dahmane", "Achdad", "Bouryal", "Ettouri", "Saadouni"];
for (let name of names) {
const row = document.createElement("tr");
const nameCell = document.createElement("td");
nameCell.innerHTML = name;
row.appendChild(nameCell);
for (let i = 0; i < days.length; i++) {
for (let j = 0; j < 3; j++) {
const cell = document.createElement("td");
const select = document.createElement("select");
select.classList.add("cell");
const options = [" ", "CP", "ME", "CL", "CE", "R"];
options.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option;
optionElement.innerHTML = option;
select.appendChild(optionElement);
});
cell.appendChild(select);
row.appendChild(cell);
}
}
timetable.appendChild(row);
}
function exportCSV() {
var rows = document.querySelectorAll("#timetable tr");
var csvData = [];
for (var i = 0; i < rows.length; i++) {
var rowData = [];
var cells = rows[i].querySelectorAll("td, th");
for (var j = 0; j < cells.length; j++) {
const select = cells[j].querySelector("select");
if(select){
rowData.push(select.value);
}else{
rowData.push(cells[j].innerText);
}
}
csvData.push(rowData);
}
var csv = Papa.unparse(csvData);
var csvData = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
var csvURL = null;
if (navigator.msSaveBlob) {
csvURL = navigator.msSaveBlob(csvData, 'timetable.csv');
} else {
csvURL = window.URL.createObjectURL(csvData);
}
var tempLink = document.createElement('a');
tempLink.href = csvURL;
tempLink.setAttribute('download', 'timetable.csv');
tempLink.click();
var pdf = new jsPDF('l','mm','a4');
pdf.addPage();
pdf.text(csv, 10, 10);
pdf.save('timetable.pdf');
#timetable th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
background-color: #006699;
}
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
nav {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
padding: 10px 20px;
}
nav a {
color: #fff;
text-decoration: none;
margin-right: 10px;
}
main {
padding: 20px;
}
h1, h2, h3 {
color: #333;
text-align: center;
margin-bottom: 20px;
}
p {
line-height: 1.5;
margin-bottom: 20px;
}
img {
max-width: 100%;
}
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
