We Keep Coding

No response for the first click - JavaScript & Django

I am new to Django and working on a eCommerce website and trying to improve cart functions.
I follow the course to use JavaScript to update the items in the cart like below code.
If I clicked the "add" or "remove" button on other page(like product list), it works fine.
However, when I tried to lick "remove" button on the cart page (where I can see all the products in the cart), it worked fine as the very first time, the item removed from the cart.
Afterward, I clicked the button, the page just refreshed. Then I clicked another time, it worked again. So it's like after the first item removed, I have to click two times to remove the item I want.
Below are my JavaScript Code, views.py, and my cart_home.html. Hope anyone could help get through this, I've been stuck for a week....
JavaScript
<script type="text/javascript">
$(document).ready(function(){
var productForm = $(".form-product-ajax") // id:#form-product-ajax
productForm.submit(function(event){
event.preventDefault();
console.log("Form is not sending");
var thisForm =$(this);
var actionEndpoint = thisForm.attr('data-endpoint');
var httpMethod = thisForm.attr('method');
var formData = thisForm.serialize();
$.ajax({
url: actionEndpoint,
method: httpMethod,
data: formData,
success: function (data) {
console.log("success");
console.log(data);
console.log("Added:",data.productAdded);
console.log("Removed:",data.productRemoved);
var submitSpan = thisForm.find(".submit-span")
if (data.productAdded) {
submitSpan.html('<button class="btn btn-danger btn-sm " type="submit" name="remove">Remove</button>')
} else {
submitSpan.html('<button class="btn btn-success btn-sm" type="submit" name="Add">Add to Cart</button>')
}
var navbarCount = $(".navbar-cart-count")
navbarCount.text(data.cartItemCount)
var currentPath = window.location.href
if (currentPath.indexOf("cart") != -1) {
refreshCart()
}
},
error: function (errorData) {
console.log("error");
console.log(errorData);
}
})
})
function refreshCart() {
console.log("in current cart");
var cartTable = $(".cart-table")
var cartBody = cartTable.find(".cart-body")
var productRows = cartBody.find(".cart-products")
var currentUrl = window.location.href
var refreshCartUrl ='api/carts'
var refreshCartMethod="GET";
var data={};
$.ajax({
url: refreshCartUrl,
method: refreshCartMethod,
data:data,
success:function(data) {
var hiddenCartItemRemoveForm = $(".cart-item-remove-form")
if (data.products.length>0) {
productRows.html("")
i = data.products.length
$.each(data.products,function (index,value) {
console.log(value);
var newCartItemRemove = hiddenCartItemRemoveForm.clone()
newCartItemRemove.css("display","none")
newCartItemRemove.find(".cart-item-product-id").val(value.id)
cartBody.prepend("<tr><th scope=\"row\">" + i +"</th><td><a href='" +value.url + "'>" + value.name +"</a>" + newCartItemRemove.html() + "</td><td>" + value.price + "</td></tr>")
i --
})
cartBody.find(".cart-subtotal").text(data.subtotal);
cartBody.find(".cart-tax").text(data.tax);
cartBody.find(".cart-total").text(data.total);
}else {
window.location.href = currentUrl;
}
},
error:function(errorData) {
console.log("error");
console.log(errorData);
}
})
}
})
</script>
Cart_home.html
{% extends "base.html" %}
{% block content %}
<h1>Cart</h1>
{% if cart.products.exists %}
<table class="table cart-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Prodcut Name</th>
<th scope="col">Product Price</th>
</tr>
</thead>
<tbody class="cart-body">
{% for product in cart.products.all %}
<tr class='cart-products'>
<th scope="row">{{forloop.counter}}
<td>{{product.name}}
{% include "carts/snippets/remove-product.html" with product_id=product.id%} </th>
</td>
<td>${{product.price}}</td>
</tr>
{% endfor %}
<tr>
<th colspan='2'></th>
<td> <b>Subtotal : $</b><span class="cart-subtotal">{{cart.subtotal}}</span> </td>
</tr>
<tr>
<th colspan='2'></th>
<td> Tax : $<span class="cart-tax" >{{cart.tax}} </span></td>
</tr>
<tr>
<th colspan='2'></th>
<td> <b>Total : $</b><span class="cart-total">{{cart.total}} </span> </td>
</tr>
<tr>
<th colspan='2'></th>
<td> <a class="btn btn-success" href="{% url 'carts:checkout' %}">Checkout</a> </td>
</tr>
</tbody>
</table>
<div class="cart-item-remove-form" style='display:none'>
{% include "carts/snippets/remove-product.html" with product_id=product.id%}
</div>
{% else %}
<p class="lead">There is no porduct in your cart now! </p>
<p> <a class="btn btn-secondary" href="{% url 'products:list' %}">Go to check!</a> </p>
{% endif %}
{% endblock content %}
views.py
def cart_detail_api_view(request):
cart_obj, new_obj = Cart.objects.new_or_get(request)
products = [{
"ud":x.id,
"url":x.get_absolute_url(),
"name":x.name,
"price":x.price,
}
for x in cart_obj.products.all()]
cart_data ={"products":products,"subtotal":cart_obj.subtotal,"total":cart_obj.total,"tax":cart_obj.tax()}
return JsonResponse(cart_data)
def cart_update(request):
product_id = request.POST.get('product_id')
if product_id:
try:
product_obj = Product.objects.get(id=product_id)
except Product.DoesNotExist:
print("Show message to user, product does not exist")
raise("Producr does not exist")
return redirect("carts:home")
else:
cart_obj, new_obj = Cart.objects.new_or_get(request)
if product_obj in cart_obj.products.all():
cart_obj.products.remove(product_obj)
product_added = False
else:
cart_obj.products.add(product_obj) # cart_obj.products.add(1)
product_added = True
request.session['cart_items'] = cart_obj.products.count()
if request.is_ajax(): #Asynchronous JavaScript Anx XML / JSON(JaveScrtip Object Notation)
print("Ajax request")
json_data = {
"productAdded":product_added,
"productRemoved":not product_added,
"cartItemCount":cart_obj.products.count()
}
return JsonResponse(json_data)
return redirect("carts:home")

Getting existing HTML in TR Body to Clear

I have a Jquery/Ajax call which updates cart details. At the moment I can't get the existing HTML in the cart-body(tablebody) to clear. The actual ajax request works and all items are added to cart but the original HTML entries stay. The particular code is here:
if (data.products.length > 0 ) {
productRows.html("")
$(cartBody).empty()
Jquery Function
function refreshCart() {
console.log("in current cart")
var cartTable = $(".cart-table")
var cartBody = cartTable.find(".cart-body")
var productRows = cartBody.find(".cart-product")
var cartTotal = cartTable.find(".cart-total-sec")
var productQuantity = cartTable.find(".cart-item-quanity")
var currentUrl = window.location.href
var refreshCartUrl = '/api/cart/'
var refreshCartMethod = "GET";
var data = {};
$.ajax({
url: refreshCartUrl,
method: refreshCartMethod,
data: data,
success: function(data) {
console.log("success")
console.log(data)
if (data.products.length > 0 ) {
productRows.html("")
$(cartBody).empty()
$.each(data.products, function(index, value) {
console.log(value)
console.log(data.count)
cartBody.append("<tr><td>" + value.quantity + " x" + "</td><td>"+ value.name + "</td><td>" + "£" + value.price + "</td></tr>")
})
cartTotal.find(".cart-total").text(data.total)
console.log(data.total)
} else {
window.location.href = currentUrl
}
},
error: function(errorData) {
console.log("error")
console.log(errorData)
}
})
}
HTML Form:
<div>
<h4>This is your shopping cart</h4>
<table class="cart-table">
<tr>These are the items in your basket and their respective totals</tr><br>
<tbody class="cart-body">
{% for item in cart.items %}
<form method="POST" action='{% url "shopping-cart-remove" %}'>
{% csrf_token %}
<tr class="cart-product"><span class="cart-item-quanity">{{ item.quantity }}</span> x {{ item.product.name }} = {{ item.subtotal }}</tr>
<input type="hidden" name='id' value='{{ item.product.id }}'>
<span class='remove-span'><button>remove</button><br></span>
</form>
</tbody>
{% endfor %}
<tr class="cart-total-sec"><td class="cart-price">{{ cart.total }}</td></tr>
</div>
Any help is really appreciated.

First you are making mistake, as i can see there's form in table, on refreshing you will lose that form so i guess you should append items in form not in .cart-body.
And for emptying html use cartBody.html(""); and you don't have to use productRows.html("") at all.

The issue as pointed out by Ultrazz008, was that the HTML was incorrectly formatted. For reference:
<table class="cart-table">
<tbody class="cart-body">
<form method="POST" class='form-product-ajax' action='{% url "shopping-cart-remove" %}' data-endpoint='{% url "shopping-cart-remove" %}'>
{% csrf_token %} {% for item in cart.items %}
<tr class=cart-product>
<td>{{ item.quantity}} x {{ item.product.name }} {{ item.subtotal }}
<input type="hidden" name='id' value='{{ item.product.id }}'>
<button class='remove-btn'>remove</button>
</td>
{% endfor %}
</tr>
</form>
</tbody>
<tr class="cart-total-sec">
<td class="cart-price">{{ cart.total }}</td>
</tr>
</table>

Struts2 dynamic columns in iterator

I have a select Box,
<table>
<tr><td>
<s:select id = "mode" list="#{'0':'SELECT','A':'ABC','B':'XYZ'}" > </s:select>
</td></tr>
</table>
Based on selection from this select box, i need to make the columns dynamic :
<table>
<tr>
<td><div align="center">Serial Number</div></td>
<td><div align="center">Employee Number</div></td>
<td id="name"><div align="center">Employee Name</div></td>
</tr>
<s:iterator status="stat" value="empList" id="empList">
<tr>
<td><div align="center"><s:property value="%{#stat.count}"/></div></td>
<td><div align="center"><s:property value="empNum" /></div></td>
<td><div align="center"><s:select id="nameList%{#stat.index}" list="#{'A':'ABC','B':'XYZ'}" > </s:select></div></td>
</tr>
</s:iterator>
</table>
The script I am using is like:
<script>
var mode = document.getElementById("mode");
var selMode = mode.options[mode.selectedIndex].value;
var cnt = document.getElementById("rowCnt").value;
if(selMode=="A"){
for(i=0;i<=cnt;i++){
var name = document.getElementById("name");
name.style.display = "none";
var lname = document.getElementById("nameList"+i);
lname.style.display = "none";
}
}
else{
for(i=0;i<=cnt;i++){
var name = document.getElementById("name");
name.style.display = "block";
var lname = document.getElementById("nameList"+i);
lname.style.display = "block";
}
}
</script>
But using id="nameList%{#stat.index}", it makes only select box dynamic, I want to make the whole column as dynamic.
<td id="nameList%{#stat.index}"><div align="center"><s:select list="#{'A':'ABC','B':'XYZ'}" > </s:select></div></td>
DOES NOT work. It seems value of %{#stat.index} cannot be passed as column id.
Is there any other way to make the whole column dynamic?

You can't use OGNL without Struts tag. To print the value of OGNL expression you should use s:property tag.
<td id="<s:property value='nameList%{#stat.index}'/>"><div align="center"><s:select list="#{'A':'ABC','B':'XYZ'}" > </s:select></div></td>

Dynamic link html table contents

I am new to jQuery. I have table contents displayed by jQuery using Bootstrap. I want to hyperlink for each value to be link to url. I don't know how to embed jQuery inside another jQuery to make this happen. I used [href= "www.google.com/" + run_accession> run_accession ] but this doesn't take run_accession parameter.
<table id="resultsTable" class="table table-hover">
<thead>
<tr><th><input type="checkbox" id="selectAll" checked="true" \></th>
<th class="sortable" sort-target="run_accession">Run</th>
<th class="sortable" sort-target="experiment_accession">Experiment</th>
</thead>
<tbody id="results_display">
{% for sra in sra_page %}
<tr><td><input class="srasCb" checked="true" type="checkbox" name="sras" value="{{ sra.run_accession}}"\></td>
<td>{{ sra.run_accession }}</td>
<td>{{ sra.experiment_accession }}</td>
</tr>
{% endfor %}
<script>
var propagate_table = function(data) {
$('#results_display').empty();
for (i = 0; i < data.length; i++) {
$('#results_display').append('<tr><td> <input class = "srasCb"'
+ checkboxSelection +' type="checkbox" name="sras" value="' + run_accession +'"\></td><td>'
// I want to make <td> as link to url as: www.example.com/data[i].fields.run_accession
+ data[i].fields.run_accession; + '</td><td>'
+ data[i].fields.experiment_accession + '</td><td>'
);
}
}
</script>
Would highly appreciate your suggestions.

To make <td> behave as a link you can create <td> elements using jQuery constructor inside your for loop and attach click event listeners to them, something like this:
var container = $('#results_display');
for (i = 0; i < data.length; i++) {
// create elements using jquery
var tr = $('<tr/>');
var td1 = $('<td/>', {
text: 'cell 1'
});
var td2 = $('<td/>', {
text: 'cell 2'
});
// add click event listener to td1
td1.click(function () {
// go to url on click
window.location.href = "http://google.com";
});
// append elements to container
td1.appendTo(tr);
td2.appendTo(tr);
tr.appendTo(container);
}
Here is jQuery documentation about creating elements http://api.jquery.com/jquery/#jQuery-html-ownerDocument

invalid regular expression flag a

I use Silex Frame Work and I am trying to delete files in backend that listed in a table using the following code but fire bug is given me an error message "invalid regular expression flag a" And when i click on the DELETE link it goes to a white page.The code is:
<script type="text/javascript">
$(document).ready(function(){
$(".delete-file").live('click', function() {
itemRow = $(this).parent().parent().parent();
fileId = $(this).attr('file_id');
deleteURL = $(this).attr('href');
var html = "<div> Are you sure, you want to DELETE this file? </div>";
var dialog = $(html).dialog({
buttons: {
"Ok": function() {
$.ajax({
url : deleteURL,
type : 'DELETE',
success : function(data) {
itemRow.remove();
dialog.dialog("close");
},
error : function() {
dialog.dialog("close");
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
return false;
});
});
</script>
and i use:
{% for row in result %}
<tr class="content {{ cycle(['odd', 'even'], loop.index) }}">
<td> {{ row.name }} </td>
<td> {{ row.user.username }} </td>
<td class="url"> {{ row.path | truncate(30) }} </td>
<td> <img src="{{conf('base_url')}}/{{row.thumbnail}}"/> </td>
<td class="url"> {{ row.size | bytes_format}} </td>
<td> {{ row.description }} </td>
<td>
<span>DELETE</span>
</td>
</tr>
{% endfor %}

I found it. it's just because of giving wrong path to my .js files!!