İ can't pull data with JavaScript - javascript

I want to pull data using JavaScript and show it in console. I don't know what I did wrong.
main.js
// ADD TO CART
$("#addToCartBtn").on('click',function(){
var _qty=$("#productQty").val();
var _productId=$(".product-id").val();
var _productName=$(".product-name").val();
console.log(_productId,_productName,_qty);
});
I am using django framework to write backend
detail.html
<div class="product-btns">
<div class="qty-input">
<span class="text-uppercase">Ədəd: </span>
<input class="input" type="number" value="1" id="productQty">
</div>
<input type="hidden" class="product-id" value="{{product.id}}">
<input type="hidden" class="product-name" value="{{product.name}}">
<button class="primary-btn add-to-cart"><i class="fa fa-shopping-cart" id="addToCartBtn"></i> Səbətə at</button>
</div>

The problem is probably that the element that has id="addToCartBtn" is not really the button but the <i> element - which has no content and therefore no width. So it is never clickable.

Related

Popover for buttons in a foreach loop PHP

I have a little problem. After some tests and searching work I thought, I ask my questions.
I have a <form> in a for each loop. and for every Button (its a basket button that puts a product in the basket) I reload the page, but before the refresh, I want to get a little popover that shows that something is done. I thought the best thing should be a Popover.
<form action="[{$oViewConf->getSelfActionLink()}]" method="post" class="form-inline">
<input type="hidden" name="fnc" value="tobasket_alsobought">
<input type="hidden" name="aproducts[[{$nKey}]][am]" value="1">
<input type="hidden" name="aproducts[[{$nKey}]][aid]" value="[{$_product->oxarticles__oxid->value}]">
<input type="hidden" name="aproducts[[{$nKey}]][anid]" value="[{$_product->oxarticles__oxid->value}]">
<button style="margin:3px auto;border:1px solid #080;border-radius:.25rem;background-color:white;" data-toggle="popover" data-trigger="focus" data-content="[{oxmultilang ident="WIDGET_NEWBASKETITEMMSG"}]" data-placement="right" type="submit" class="btn btn-info basket" title="[{oxmultilang ident="DETAILS_ADDTOCART"}]"><i class="simg simg-shopping-cart" style="margin-right:0;display:inline;"></i></button>
</form>
This is my form and my JS looks like this :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('[data-toggle="popover"]').popover("max-width", "80%");
});
</script>
I get the Popover but only for the 1st value/button in my for each loop
How can I fix this and get the Popover be working for all buttons?
Below is a screenshot of how it looks like.
my foreach loop:
[{foreach from=$myArray item=_product name=_sProduktliste}]
...some template code to show article, price, img ....
<div class="col-12" style="z-index:10;">
[{oxhasrights ident="TOBASKET"}]
<form action="[{$oViewConf->getSelfActionLink()}]" method="post" class="form-inline">
<input type="hidden" name="fnc" value="tobasket_alsobought">
<input type="hidden" name="aproducts[[{$nKey}]][am]" value="1">
<input type="hidden" name="aproducts[[{$nKey}]][aid]" value="[{$_product->oxarticles__oxid->value}]">
<input type="hidden" name="aproducts[[{$nKey}]][anid]" value="[{$_product->oxarticles__oxid->value}]">
<button style="margin:3px auto;border:1px solid #080;border-radius:.25rem;background-color:white;" data-toggle="crossSell_popover" data-trigger="focus" data-content="[{oxmultilang ident="WIDGET_NEWBASKETITEMMSG"}]" data-placement="bottom" type="submit" class="btn btn-info basket" title="[{oxmultilang ident="DETAILS_ADDTOCART"}]"><i class="simg simg-shopping-cart" style="margin-right:0;display:inline;"></i></button>
</form>
[{assign var="nKey" value=$nKey+1}]
[{/oxhasrights}]
</div>
</div>
[{if $nKey >= 12}]
[{php}]break;[{/php}]
[{/if}]
[{/if}]
[{/foreach}]
You need to adapt your jquery script to apply it on multiple element.
Check the answer from here:
Jquery matching multiple elements with same id/class
i solved it.
Marat his answer helped me.
i changed :
<script>
$(document).ready(function() {
$('[data-toggle="popover"]').popover("max-width", "80%");
});
</script>
to
<script>
window.onload = function(){ $('[data-toggle="crossSell_popover"]').popover() };
</script>
i also changed the name to "crossSell_popover" to avoid issues with other functions in the shop.
and # the bottom i use
[{oxscript add="$('[data-toggle=\"crossSell_popover\"]').popover();"}]
to add the js to the base template.
Thanks a lot have a nice day

how would I send append data via json

Hi i currently have a document where i need to send data off via either email(which i am using php mailer) or sql. which is all pretty well sorted.
my only question is. as i am using append to generate a set of variables. how would i use pull all this user generated data to then send a json file.
below is the current code i have.
<div align="center" class="addsection"></div>
<button align="center" id="addbutton" class="btn btn-default">Add a product</button>
<button id="submitbutton" class="btn btn-default" onclick="sbmitbtn()">Submit</button>
<script>$('#addbutton').on('click', function () {
var count = $('div.addsection div').length, id = count + 1;
var large = '<p class="accordian_container">
<hr/>
<p class="accordian_item" id="accord_item_2">
<label> First Name</label><br/>
<input type="text"/><br/>
<label>Middle Name</label><br/>
<input type="text"/><br/>
<label>Last Name</label><br/>
<input type="text" /><br/>
<label>Home Number</label><br/>
<input type="text"/><br>
<label>Work Number</label><br/>
<input type="text"/><br>
<label>Cell Number</label><br/>
<input type="text"/><br>
</p>
</p>';
$('div.addsection').append('<div class="contentprint" id="product' + id + '">' +
'<h4>Product: ' + id + '</h4> <table class="selection1"></table>content goes here</div>');
$('div.addsection').append(large);
event.preventDefault();
});
$('#submitbutton').on('click', function () {
}
as you can tell i have a button to generate content. with a div to put that content in. now i need to figure out how to use that data that was created from the textboxes to send off via json. is this possible. any help would be awesome. do i need to move large within the append and make each items id have the id of the overall div. and if so is it as simple as running a for loop until all divs with ids have been passed.
can this json type array be done in php if it were on a php page. its a little confusing to get my head around so any help is greatly appreciated.

jQuery/JS - Hiding specific dynamically created elements/buttons

I've built a simple chat application with message rating functionality. I want to prevent self-ratings by hiding the corresponding rating buttons. So on Bob's screen for example there should be no rating buttons next to Bob's messages.
I've tried to realize that by comparing the #name and #user-name. If they are equal, the rating buttons should be hidden. But it looks like I'm doing that not correctly.
That main problem is that a message div .standard-msg is created dynamically so I need something like "on-dom-change".
Every help appriciated.
$("#standard-msg").on("DOMSubtreeModified", function() {
$('.standard-msg').each(function() {
if ($('#name').val() == $(this).find('#user-name').text()) {
$('button').hide();
}
});
});
<div id="chat-wrapper" class="wrapper">
<div class="message-box" id="message-box">
<div class="standard-msg">
<button class="rating like-btn">Like</button>
<button class="rating dislike-btn">Dislike</button><span style="color:#FF7000" class="user-name">Bob</span> : <span class="user-message">hi</span>
</div>
<div class="standard-msg">
<button class="rating like-btn">Like</button>
<button class="rating dislike-btn">Dislike</button><span style="color:#FF7000" class="user-name">Alice</span> : <span class="user-message">hello</span>
</div>
</div>
<div class="panel">
<input type="text" name="name" id="name" placeholder="Your Name" maxlength="10" />
<input type="text" name="message" id="message" placeholder="Message" maxlength="80" />
<button id="send-btn" class="btn">Send</button>
</div>
</div>
If the buttons were added to the page after the page has loaded then they won't respond to any code (in the page before they were created) that references them. This is because new event listeners are added for the buttons when they are created and somehow they don't pickup on any code older than they are.
To get around this quirk, just add the code dynamically as you add the buttons to the page and it should work.
e.g.
var s = "$('#standard-msg').on('DOMSubtreeModified', function() { $('.standard-msg').each(function() { if ($('#name').val() == $(this).find('#user-name').text()) { $('button').hide(); } }); }); ";
then append to the page,
$("body").append(s);

better options for writing this jquery

I have a html file like the following one,
<i class=‘icon-calendar icon-large' data-placement='top' data-toggle='popover' type='button'>
<div class='head hide'>Calendar</div>
<div class='content hide'>
<form action="#" data-remote="true" id="calendar_form" method="post">
<div style="...">
<input type="hidden" />
<input type="hidden" />
</div>
<table border='0px'>
<tbody>
<tr>
<td colspan='2'>
<button class='btn btn-default btn-block' id='submit' type='submit'>Convert</button>
</td>
</tbody>
</table>
</form>
</div>
</i>
<li class="..." id="calendar_example"><label class=" label" for="...">...</label>
<input class="..." id="calendar_example_1" name="[calendar_example][0][calendar_example_1][0]" type="text" />
I'm trying to use Jquery to write the function as when click button where id is submit, i can pass value from the popover to the field with id calendar_example_1, my code, the working one to find the field, is
$(function(){
$('body').on('click','#submit', function(){
var calendar_name = $(this).parent().parent().parent().parent().parent().parent().siblings().find('#calendar_example_1').attr('name');
return false;
});
});
by using .parent() multiple times, i don't think this is a good way to write this code. As i'm new to jquery, i can't find any better solution yet that works the way i want. Anyone can give me some suggestion?
EDIT:
the outside form is nested.
you can just do this instead:
var calendar_name = $(this).closest("i.icon-calendar").siblings("li#calendar_example").find('#calendar_example_1').attr('name');
You can use
$('#submit').click(function(){
var calendar_name = $('#calendar_example_1').attr('name');
});

Complex sinatra parameter

Javascript templates
<script type="text/x-jsrender" id="questionTmpl">
<li class="question">
<input type="text" name="survey[question]" />
<button class="add_answer">Add Answer</button>
<ul></ul>
</li>
</script>
<script type="text/x-jsrender" id="answerTmpl">
<li class="answer">
<input type="text" name="survey[answer]" />
</li>
</script>
Jquery
$(document).ready(function () {
$("#add_question").click(function(e) {
e.preventDefault();
$("#questionForm ol").append($.templates("#questionTmpl").render())
});
$("#questionForm").on('click', '.add_answer', function(e) {
e.preventDefault();
console.log()
$(this).parent().find("ul").append($.templates("#answerTmpl").render())
});
});
erb
<div class="container">
<br>
<form action="/surveys" method="post" id="questionForm">
<input type="text" name="title" placeholder="survey name">
<button id="add_question"> Add a question </button>
<ol></ol>
<input type="submit" value="create" id="submit_form">
</form>
</div>
I am making a survey application in sinatra. The way I currently have it set up is to using jsrender, render templates for adding questions and adding answers. My question is regarding the names of the input text fields in the javascript templates. Basically I was wondering if there is a way to set up the parameter names so that sinatra will collect them all as a hash, using the survey[question] as a key, and an array of the survey[answer] parameters as an array of values for said key.
If you POST a form, then Sinatra automatically gets all of the values from the post in a variable params.
Try this and you should see what is going on:
get '/surveys' do
puts params.inspect
end

Categories

Resources