better options for writing this jquery - javascript

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');
});

Related

İ can't pull data with 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.

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

Using jQuery filter outside of a table element

I've found lots of examples of how to use jQuery filter on tables, but I can't find out how to do so on items not inside a table. For example, I have cards which I have to search through.
I have tried to adapt code from this w3schools example and it seems to work when I type the word 'second' but not the word 'first'.
$(document).ready(function() {
$("#txtSearch").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#milestoneCard").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
I was wondering if this was possible and if so what I'd have to change.
I've searched around quite a bit and while I'm sure it's possible, I can't seem to find out how in my case.
I have reproduced it in the following jsfiddle
You use the same id for two components.
Change it to class="col-md-4 milestoneCard" and your selector to $(".milestoneCard") and it will work.
The id property should be unique across the whole page and the selector will only grab the first one it finds.
You have multiple of the same id's on a page. Therefore the JS will not work as expected. ID's are unique, classes are able to be repeated.
to fix this, try making milestoneCard a class instead of an id in your html, as shown here
HTML
<input type="search" id="txtSearch">
<div class="col-md-4 milestoneCard">
<div class="card card-body bg-light" style="margin-bottom: 1em;">
<h3 id="searchTitle">First</h3>
<p>{{description}}</p>
<p>Due date:{{dueDate}}</p>
<p>Completed date:{{compDate}}</p>
<form action="/plannerHomepage" method="POST">
<input type="hidden" name="compId" value="{{id}}">
<input type="submit" role="button" class="btn btn-primary btn-lg" value="completed" style="margin-top:1em;" />
</form>
</div>
</div>
<div class="col-md-4 milestoneCard">
<div class="card card-body bg-light" style="margin-bottom: 1em;">
<h3 id="searchTitle">Second</h3>
<p>{{description}}</p>
<p>Due date:{{dueDate}}</p>
<p>Completed date:{{compDate}}</p>
<form action="/plannerHomepage" method="POST">
<input type="hidden" name="compId" value="{{id}}">
<input type="submit" role="button" class="btn btn-primary btn-lg" value="completed" style="margin-top:1em;" />
</form>
</div>
</div>
And your JavaScript
$(document).ready(function() {
$("#txtSearch").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".milestoneCard").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Or see the jsfiddle here

Why this submit function in Meteorjs doesn't work?

I have a form which consists of 7 questions. I ask them individually using display:none. But the problem is that submit function doesn't work. When I click it, it just redirects back to the first question and url turns to - http://localhost:3000/?problem=&why1=&why2=&why3=&why4=&why5=&solution=&submit-all=Answer . I really need help with this please. Below is code for HTML template and JavaScript submit function to submit in Problems collection.
<template name="submitProblem">
<div class="container">
<div class="main-page">
<form class="text-center">
<div id="submit-problem">
<input autofocus="autofocus" type="text" name="problem" id="problem" placeholder="What's the problem ?"/>
<input type="button" id="route" value="Find Its Route" class="route btn btn-sample">
</div>
...
submit-why1 - submit-why4
...
<div id="submit-why5" class="hidden">
<input autofocus="autofocus" type="text" id="why5" class="" name="why5" placeholder="This problem exists, because..."/>
<input type="button" value="Answer" class="btn-success btn answer5">
<button class="btn back5 back-btn"><i class="fa fa-arrow-left fa-3x"></i></button>
</div>
<div id="submit-solution" class="hidden">
<input autofocus="autofocus" type="text" name="solution" id="solution" placeholder="What could be the best solution ?"/>
<input type="submit" id="submit-all" name="submit-all" value="Answer" class="btn btn-primary submit-all">
<button class="btn back6 back-btn"><i class="fa fa-arrow-left fa-3x"></i></button>
</div>
</form>
</div>
</div>
</template>
Template.submitProblem.events({
'submit .submit-all':function() {
event.preventDefault();
var problem = $(event.target).find('[name=problem]').val();
var why1 = $(event.target).find('[name=why1]').val();
var why2 = $(event.target).find('[name=why2]').val();
var why3 = $(event.target).find('[name=why3]').val();
var why4 = $(event.target).find('[name=why4]').val();
var why5 = $(event.target).find('[name=why5]').val();
var solution = $(event.target).find('[name=solution]').val();
Problems.insert({
problem: problem,
why1: why1,
why2: why2,
why3: why3,
why4: why4,
why5: why5,
solution: solution,
submitdate: new Date()
});
console.log(problem + why1 + why2 + why3 + why4 + why5 + solution);
Router.go('submitted');
}
});
You need to pass the event as the first parameter to your handler:
submit: function(event) {
event.preventDefault();
...
Otherwise it won't be defined, the default action (a POST) won't be prevented, and your page will reload.

Submitting form after changing input by jQuery

I got HTML like this:
<table>
<form action=\'food.php\' method=\'POST\'>
<tr><h4>
<td><span><input type="submit" name="food_edit" class="food_edit" value="Edytuj" /></span></td>
</h4>
</tr>
</form>
</table>
And then a function in jQuery which change input field:
wrap.find('.food_edit')
.replaceWith('<input type=\'submit\' name=\'food_edit_confirm\' value=\'Potwierdź\' />');
My problem is that after change submitting button, send form doesn't work.
you may try this after replacement of submit button:
$('form').on('click','input[type=submit]',function(){
//rest of code goes here.
});
you either need to use $( document ).ready() around the particular jquery code or u can try and use the .attr to change the attribs of your class or u can use 'focus' to wrap around it. or u can do something like
$('form').live('submit',function(){
// do the rest of ur code and then submit it....
});
You have invalid HTML. It should look like this:
<form action=\'food.php\' method=\'POST\'>
<table>
<tr>
<td>
<span>
<input type="submit" name="food_edit" class="food_edit" value="Edytuj" />
</span>
</td>
</tr>
</table>
</form>
If you're looking to add a confirmation you should look into the onsubmit="" in the <form> tag.
Example:
<form action=\'food.php\' method=\'POST\' onsubmit=\'return checkForm();\'>
<table>
<tr>
<td>
<span>
<input type="submit" name="food_edit" class="food_edit" value="Edytuj" />
</span>
</td>
</tr>
</table>
</form>
JS Code:
function checkForm() {
return confirm("Submit this form?");
}
<script type="text/javascript">
$(function(){
$('.food_edit').replaceWith("<input type='submit' name='food_edit_confirm' value='Potwierdz' onclick='document.getElementById(\"submit\").click();' />");
});
</script>
<form action='food.php' method='POST'>
<input type="submit" name="food_edit" class="food_edit" value="Edytuj" onclick="document.getElementById('submit').click();" />
<input type="submit" style="display:none" id="submit" />
</form>
The hidden button always do submit the form regardless you do anything with the submit button which is replacable.

Categories

Resources