I am developing an application in django, but I have a problem with JAVASCRIPT.
By the way I am new in web development, I am beginninng to learn python an javascript.
I have an html table rendered from django and I insert a drop down button in the first column of the table with this function
function GetAllValues() {
var tbl = document.getElementById("myTable");
for (var i = 1; i < tbl.rows.length; i++){
tbl.rows[i].cells[3].innerHTML = '<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">'
+ tbl.rows[i].cells[3].innerHTML +
'<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a id="configura" onclick="configp();" >Configura</a>
</li>
<li><a id="recepcion" onclick="param(); return false;">Recepcion de Archivos</a>
</li>
<li><a id="carga" onclick="cargaf(); return false;">Carga de Archivos</a>
</li>
<li><a id="conci" onclick="concif(); return false;">Detalle Conciliacion</a>
</li>
</ul>
</div>'
}
Every button call a different function to redirect to another page with some forms.
I use function like this to redirect to the forms:
function configp(event){
var tbl = document.getElementById("myTable");
var rows = tbl.rows;
var argu = "";
for (var i = 0; i < rows.length; i++){
rows[i].onclick = function(){
idpro = this.cells;
argu = "?idprov="+idpro[0].innerHTML;
window.location = "/config/"+argu;
}
}
}
the function take some values of the table and pass it as argument to the url.
(why I am redirecting like this. Long history)
My problem is the onclick propagation.
I try putting return false before the last "}" in the configp() function and doesn't work.
I try to stop the propagation using event.preventdefault() and e.stopPropagation() any of those method can stop the propagation.
How can I stop the onclick propagation in the dropdown button
Any advice
THANKS IN ADVANCE
UPDATE
In simple words: when I click in the first option of the dropdown the function redirect me to the page that i want. if get back to the original page, no matters what option I clicked always redirect to the page where I was redirected to the page assigned to the first option. and the onclick event bubble in all the levels of the dropdown
Related
<div>
<p>
<a class="article-link" href="/title1">Title 1</a>
<a class="article-link" href="/title1">year1</a>
</p>
<p>
<a class="article-link" href="/title2">Title 3</a>
<a class="article-link" href="/title2">year2</a>
</p>
<p>
<a class="name-link" href="/title3">Title 3</a>
<a class="name-link" href="/title3">year1</a>
</p>
</div>
I need to automate some function in a website. I want to redirect to the link, if you know the title AND the year, using javascript.
for example: I want to be redirected to the link of title3 and year1.
I tried with this:
function picktitle() {
chrome.storage.sync.get('title', function(data) {
var items = document.getElementsByClassName('article-link');
for(i = 0; i < items.length; i++) {
if((items[i].innerHTML).includes(title)) {
chrome.runtime.sendMessage({redirect: items[i].href});
break;
}
}
});
}
but it choose only the first parameter and i need that it choose the href based on both title and year.
I hope I explained myself.
I'm really sorry if im misunderstanding this, but wouldn't using the && keyword in your if statement be the solution? For example:
if (statement1 && statement2) // only runs if both statement1 AND statement2 are true
// do stuff
Also, maybe select the parent element and check to see if it's children have two elements with the required text properties:
function picktitle() {
chrome.storage.sync.get('title', function(data) {
var items = document.getElementsByClassName('article-link');
for(i = 0; i < items.length; i++) {
if(
// Checks if the parent contains the title and the year
(items[i].parentElement.innerText).includes(title) &&
(items[i].parentElement.innerText).includes(year)) {
chrome.runtime.sendMessage({redirect: items[i].href});
break;
}
}
});
}
I also changed innerHTML to innerText because you probably don't need all the html code with it too.
I am having an issue with my javascript function in regards to removing elements. What I have below is two lists inside a div menu with each <li> marked by a class according to the category of drink and the drinks themselves. I also have a button that opens a modal box where the user would type in a drink category to remove. I decided to approach this by naming <li> with classes by the drink category and then taking a js function to get the elements by class name from the input text node and to remove those elements with what the user typed.
<div class = "menu">
<ul>
<li class = "coffee">french press</li>
<li class = "tea"><a href="#">english breakfast/a></li>
<li class = "milk">whole</li>
</ul>
<ul>
<li class = "coffee">dark roast</li>
<li class = "tea">green tea</li>
<li class = "milk">two percent</li>
</ul>
</div>
<button type="button" id ="openmodal">Click Me!</button>
<div id="myDeleteModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<h1 class="modal-title">
<b>Type the drink category you want to remove </b>
</h1>
<input id="deletedrinktext" type="text" />
<button id="delete">Remove</button>
<button type="button" class="btn btn-defaultdeletedrink" id="closedbtn" data-dismiss="modal" onclick="">Close</button>
</div>
</div>
<script>
var modal = document.getElementById("myDeleteModal");
// Get the button that opens the modal
var btn = document.getElementById("openmodal");
var closebtn = document.getElementById("closedbtn");
// When the user clicks the button, open the modal
btn.onclick = function () {
modal.style.display = "block";
}
closebtn.onclick = function (event) {
modal.style.display = "none";
}
</script>
<script>
(function () {
document.querySelector('#delete').addEventListener('click', function () {
let inputRemover = document.querySelector('#deletedrinktext');
let itemRemover = document.createTextNode(inputRemover.value);
let listRemover = document.getElementsByClassName(itemRemover);
for (var i = 0; i < listRemover.length; i++) {
if (document.contains(listRemover)) {
listRemover[i].remove();
}
}
inputRemover.value = ""; // clear input
});
})();
</script>
So what I want to replicate is a user would open the modal box, type in coffee and click remove. This would remove from the document the following two elements:
<li class = "coffee">french press</li>
<li class = "coffee">dark roast</li>
This function isn't working so far and I am not sure if there is an error in my JS in getting each element or if going with the class approach is not the way to go about it? When I type in the name of the category just like written in my HTML, the element in the list still displays.
remove() is not a function of Array in javascript. I think your best approach would be to just not display the elements you want to remove. To do just change your handler function to this:
let inputRemover = document.querySelector('#deletedrinktext');
let listRemover = document.getElementsByClassName(inputRemover.value);
for (let i = 0; i < listRemover.length; i++) {
if (document.contains(listRemover[i])) {
listRemover[i].style.display = 'none';
}
}
JSFiddle to try it out without modal functionality.
This also helps you if you maybe want to reset the list. To do so, just set the display property on every element to block.
Also, I don't knwo if it is a copy paste issue but the a at english breakfast is missing a < in the closing tag.
I have a Partial View in which I load a pager for pagination.
The functionality of the pagination works, as the link changes as follows: http://localhost:1048/Trip -> http://localhost:1048/Trip?page=2 but it seems like my "request" to load the "next page" doesn't work as intended.
PartialView
//Here is a table view that
//that requires pagination.
#{
var prevDisabled = !Model.HasPreviousPage ? "disabled" : "";
var nextDisabled = !Model.HasNextPage ? "disabled" : "";
}
<ul class="pager">
<li>
<a asp-action="Index"
asp-route-page="#(Model.PageIndex - 1)"
class="btn btn-default #prevDisabled btn">
Previous
</a>
</li>
<li>
<a asp-action="Index"
asp-route-page="#(Model.PageIndex + 1)"
class="btn btn-default #nextDisabled btn">
Next
</a>
</li>
</ul>
I assume that my link is wrong (asp-action="Index"), but I have no idea what else to have it "navigate to" (I tried changing it to my controller function - but that result was very much unwanted) as I am still fairly new to .Net. Also I know that I have an error in my Controller function where I load page 1 always. How do I check whether a page is input to the function? (something like if (page == null) { page = 1 }) The function that loads my Partial View is as follows:
Controller function
[HttpGet]
public async Task<IActionResult> TripTable(int? page)
{
var trips = from t in _tripcontext.Tripmetadata select t;
page = 1;
int pageSize = 20;
return PartialView("PartialTripsView", await PaginatedList<Tripmetadata>.CreateAsync(trips.AsNoTracking().OrderBy(t => t.Tripid), page ?? 1, pageSize));
}
UPDATE
I guess I forgot to mention that whenever I use the Next button it just refreshed the entire Index page (without the Partial View in it). The Partial View is loaded when a button on the Index page is clicked, so when the page refreshes the Partial View is not present anymore.
I managed to figure it out after quite some reading online:
First of I changed my PartialView to the following:
#{
var prevDisabled = !Model.HasPreviousPage ? "disabled" : "";
var nextDisabled = !Model.HasNextPage ? "disabled" : "";
}
<ul class="pager">
<li>
<a id="prev" data-url="#Url.Action("TripTable", "Trip")" data-id="#Model.PageIndex" class="btn btn-default #prevDisabled btn">
Previous
</a>
</li>
<li>
<a id="next" data-url="#Url.Action("TripTable", "Trip")" data-id="#Model.PageIndex" class="btn btn-default #nextDisabled btn">
Next
</a>
</li>
</ul>
If someone else is stuck on the same problem I got most of my code from the Microsoft Docs on creating a pagination here.
My controller method was changed only a little:
public async Task<IActionResult> TripTable(int? page)
{
var trips = from t in _tripcontext.Tripmetadata select t;
int pageSize = 10;
return PartialView("PartialTripsView", await PaginatedList<Tripmetadata>.CreateAsync(trips.AsNoTracking().OrderBy(t => t.Tripid), page ?? 1, pageSize));
}
And in the bottom of my PartialView I added the following:
<script>
$("#prev").click(function () {
var _this = $(this);
var prevPage = _this.data('id') - 1;
$("#TripPartial").load(_this.data('url'), { page: prevPage }, function () {
});
});
$("#next").click(function () {
var _this = $(this);
var nextPage = _this.data('id') + 1;
$("#TripPartial").load(_this.data('url'), { page: nextPage }, function () {
});
});
</script>
I have little problem with my code. I push the value of an input in an empty array, and i display the value in a html list with a remove button.
But when i remove the value in html, the array still holds the value. I used arr.splice(0, 1) but it doesn't remove the specific value. Example:
My html list looks like:
v1
v2
v3
My array after the list is filled:
array = [v1, v2, v3]
When i remove v2 in html my array doesn't changes. I'm new to JavaScript.
My code in JSBin or JSFiddle.
im sorry my english is not very nice
https://jsfiddle.net/15mdjdpa/
var taches = [];
var saisie;
var ecran;
var liste;
var organiz;
var j= 0;
function run(){
saisie= document.getElementById('champ').value;
taches.push(saisie);
ecran = document.getElementById('afficheur');
var liste = document.getElementById('listes');
console.log("taches :", taches);
var li = document.createElement('li');
li.setAttribute("id", "lisupr");
var btn = document.createElement('Button');
btn.textContent="X";
btn.addEventListener("click",function supr (){
liste.removeChild(li);
taches.splice(0,1);
console.log("tableau taches: "+ taches);
} );
li.innerText= saisie + " "+" ";
console.log("saisie "+saisie);
li.appendChild(btn);
liste.appendChild(li);
}
<input type ="text" id="champ" onfocus="javascript:this.value=''" class="form-control ">
<button type="button" onclick ="run()" class="btn btn-primary" >send</button>
<div id="afficheur"><h4> list : </h4>
<ul id="listes"> </ul>
</div>
If you want to remove v2 from array, do like this.
var index = array.indexOf(v2);
if(index != -1) array.splice(index,1);
I'd rewrite this code using jQuery. I'd remove all the ids - you can make the edits relative to the button being clicked. Which would let you have more than one of these on a page, among other things.
HTML:
<div class="module">
<input class="item" />
<button type="button" class="btn btn-primary js-add">add</button>
<ul class="list"></ul>
</div>
Here's the script:
var list = [],
addToList = function(target,item){
list.push(item);
target
.append(
$('<li>')
.html(item)
.append(
$('<button>')
.addClass('js-delete m-l')
.html('X')
)
)
}
$('.js-add').click( function(){
var parent = $(this).parent(),
item = parent.find('input.item');
addToList(parent.find('ul.list'),item.val());
item.val('');
})
$('.module').on( 'click', '.js-delete', function(){
var parent = $(this).parent(),
index = $('li').index( parent );
list.splice(index,1);
parent.remove();
console.log(list);
})
Actually, if you want to make it so you can add multiple lists, you actually need to nest the 'list' array in an object or array, and have something reference it, probably inside the module div.
Your issue is what Angular does automatically - without all the management. It binds the html content to the json array so all you need to do is change the array value, or delete it. The HTML would immediately reflect the change.
Here's a jsfiddle:
https://jsfiddle.net/mckinleymedia/yducyt83/
I have a function that adds game results to a schedule.
I want to have the score of a winning team in yellow - add ".winner" class to (<%=score1%> or <%=score2%>).
I wonder what is the correct way to specify needed element, using jQuery.
My current code isn't working. All elements get ".winner" class, regardless of whether a team won or not.
addGame: function(gameInfo) {
var sHtml = window.JST["schedule/gamelist/inner_row"](gameInfo);
var tableRow = $("<tr>").append(sHtml);
tableRow.data("id", gameInfo.id);
return tableRow;
}
addNewTable: function(date, gameInfos, number) {
...
...
for (var ind = 0; ind < gameInfos.length; ++ind) {
gameInfo = gameInfos[ind].attributes;
var element = this.addGame(gameInfo);
$("#schedule_mytable_tbody" + number).append(element);
if (gameInfo.score1 > gameInfo.score2)
$("li:nth-child(5)").find("p:first-child").addClass("winner");
else
$("li:nth-child(5)").find("p:last-child").addClass("winner");
}
My template looks like this.
window.JST["schedule/gamelist/inner_row"] = _.template(
'<td width="668px">\
<ul>\
<li class="schedule_..."></li>\
<li class="schedule_..."></li>\
<li class="schedule_...."></li>\
<li class="schedule_..."></li>\
<li class="schedule_boxscore">\
<p><%=score1%></p>\
<p><%=score2%></p>\
</li>\
...
Rendered HTML part:
<li style="font-size:16px" class="schedule_boxscore">
<p class="winner">2</p>
<p class="winner">10</p>
</li>
So, because of the "for" loop, all paragraphs get the ".winner" class, not just <p class="winner">10</p>...