I have developed a pos system i have a product product1 barcode = 12345 and product2 barcode = 67890 i want that when a user scan 12345 it should be clicked
<div id="cat-filter-plus-{{ '12345' }}" data-barcode="{{ '12345' }}" class="clciked">
<img>
</div>
<div id="cat-filter-plus-{{ '67890' }}" data-barcode="{{ '67890' }}" class="clciked">
<img>
</div>
any idea or someone share his example which he is applied in his pos will be thank full
Related
I have a site with a list of games ( tiled on the index page)
when a user clicks the image the current url is shown on the browser something like http://example.com/game/sweetbanabas?api_exit=
the game currently reside in the /public/games directory.
Now I have the game.blade.php as such:
<div class="grid-item grid-item--height2 grid-item--width2">
<div class="grid__content games">
<div class="games__item">
<div class="games__content">
<img src="{{ $game->name ? '/frontend/Default/ico/' . $game->name . '.jpg' : '' }}" alt="{{ $game->title }}">
#if($game->jackpot)
<span class="label label-d label--left">
{{ number_format($game->jackpot->balance, 2,".","") }} {{ $currency }}
</span>
#endif
#if($game->label)
<span class="label #if($game->label == 'New')label-b #elseif($game->label == 'Hot')label-g #else label-d #endif">{{ mb_strtoupper($game->label) }}</span>
#endif
Play
<span class="game-name">{{ $game->title }}</span>
</div>
</div>
</div>
</div>
I would like to put my /games folder on another server. in what part of the href` would I add the url to the external server?
Thank you for any pointers
You should put new url in anchor tag....
From
Play
To
Play
Hope this will work.
Basically I have to develop a Tic-Tac-Toe game, here is the HTML file which I can't rewrite only reformat a bit, but the idea should stay the same.
{% block content %}
<nav class="navbar fixed-top navbar-light">
<button id="retry-button" class="btn btn-success">Try again?</button>
Reset settings
</nav>
<div id="game-board" class="mb-3" data-row-num="{{ row_num }}" data-col-num="{{ col_num }}" data-win-size="{{ win_size }}">
{% for row in range(row_num) %}
<div>
{% for col in range(col_num) %}
<div class="game-cell"
data-coordinate-x="{{ col }}"
data-coordinate-y="{{ row }}"></div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endblock %}
As you can see i have a game-cell class which contains by default 9 elements. I would like to return the data-coordinate-x and data-coordinate-y when I click one of the game-cells. I had a previous try but if I clicked it returned all of the blocks not just the one i clicked on. I have to write it in Js. If you can point me in the right direction that's more than enough for me.
Thanks!
If I understood correctly, you need to access data attributes of your game-cell element. In order to do this, you need to select the element by some ID or class. I have modified your code a little to make it run inside stackoverflow`s platform. I have added an ID which i called "unique" and I also set some values into your coordinate-x and y data attributes. Please review the code bellow and see how I managed to get those data attributes. It's important to notice that this is not the only way to access them.
var gamecell = document.getElementById('unique');
console.log(gamecell.dataset.coordinateX);
console.log(gamecell.dataset.coordinateY);
<nav class="navbar fixed-top navbar-light">
<button id="retry-button" class="btn btn-success">Try again?</button>
Reset settings
</nav>
<div id="game-board" class="mb-3" data-row-num="{{ row_num }}" data-col-num="{{ col_num }}" data-win-size="{{ win_size }}">
<div>
<div class="game-cell" id="unique"
data-coordinate-x="172"
data-coordinate-y="273"></div>
</div>
</div>
Its also possible to get these values using the getAttribute method.
var elem = document.getElementById('unique');
var coordX = elem.getAttribute('data-coordinateX');
var coordY = elem.getAttribute('data-coordinateY');
Please, take a look at this page, it explains some aspects of data attributes:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
Simply access your clicked game-cell by: (it will find the clicked coordinateX and coordinateY)
document.querySelectorAll('.game-cell').forEach((game) => {
game.addEventListener('click',function(event){
console.log(game.dataset.coordinateX);
console.log(game.dataset.coordinateY);
});
});
you must to get your element by class name or id(add an id)
than you can get its attributes like this
let gameCell = document.getElementById('game-cell-id');// id for example
gameCell.getAttribute('data-coordinate-x')
I'm currently using Flask for my back-end coding, and working on my front-end as of now. Below are the images uploaded on the server. Now I need to edit those images, like I need to upload another image or change the existing image. We're using a cropper.js on this one, and I don't know how will I manage this one because I'm not that good when it comes to front-end scripting like javascript/jquery/ajax. Maximum images can upload is up to 8 images, I need to count the total existing images, then add another img src file, for example if I had 3 images, then I need to show 5 more img src file for adding new images. Any help will do and will be appreciated. Below is my code on HTML with Jinja2 template.
<div class="col-xs-3">
<label class="rs-thumb rs-thumb-cover">
<div class="rs-thumb-content" id="inputImage1-wrap"><img src="{{ resource.image_url }}" alt="" id="inputImage1-pic" width="100%"><i class="fa fa-picture-o"></i>
<span class="rs-cover">Cover</span>
</div>
</label>
</div>
{% for imgs in resource.images[1:] %}
<div class="col-xs-3">
<label class="rs-thumb rs-thumb-cover">
<div class="rs-thumb-content" id="inputImage1-wrap"><img src="{{ imgs.image }}" alt="" id="inputImage1-pic" width="100%"><i class="fa fa-picture-o"></i>
<!-- <span class="rs-cover">Cover</span> -->
</div>
</label>
</div>
{% endfor %}
Image for Edit Module on front-end
Html + JQuery solution, mostly tested so should work.
HTML
<div class="imgBox">
<!-- Your content will appear here -->
</div>
JQuery
// Get the amount of images on the current page
var amountOfImg = $("img").length;
var amountToCount = 8;
for (var i = 0; i < amountToCount - amountOfImg; i++) {
$(".imgBox").append("<input type='file' name='fileInput' /> <b id='removeImg'>Remove</b>")
}
$("#removeImg").click(function() {
// When the user clicks on the #removeImg text, find the closest "img" element and remove it.
$(this).closest("img").remove();
});
I have a series of wtforms written in a flask app. One of my pages in my app will be used by people speaking English and Spanish. I would like to find a clean way of toggling the form element labels between English and Spanish with a toggle button on the webpage.
I found a nice solution to toggle languages using the HTML lang attribute here (2nd answer down, by J Grover):
Using Javascript to change website language
This encloses each language in a <span> element and then simply hides the one we don't want to see.
My problem is that the labels for the fields on my forms are coming from wtforms objects. I am unsure how to include multiple languages in my current setup. See below for an example of where I am now:
Form
class RoofCheck(FlaskForm):
"""
Class holding the form inputs for a roof check
"""
roofstate = RadioField('Roof Status',
validators=[validators.DataRequired('Please select roof closed or open')],
choices=[('closed', 'Closed'), ('open', 'Open')])
comments = TextAreaField('Comments on roof status',
[validators.optional(), validators.length(max=390)],
render_kw={"placeholder": "Enter comments here",
"rows": 4,
"style": "min-width: 100%"})
submit = SubmitField('Submit')
HTML
<div id='roof_check' class='col-md-6 padding-0'>
<form id="roof_check_form" action={{ url_for('roof_check')}} method="post" name="roof">
<fieldset class='form_group'>
{{ form1.hidden_tag() }}
<legend class='text-center'>
Daily visual check of the roof
</legend>
{% for subfield in form1.roofstate %}
<div class='form-check'>
{{ subfield }}
{{ subfield.label(class_="form-check-label") }} <br/>
</div>
{% endfor %}
<div class='form-check'>
{{ form1.comments }}
</div>
<div class='form-check'>
{% with messages = get_flashed_messages(category_filter=["form1"]) %}
{% if messages %}
{% for message in messages %}
<div> {{ message }} </div>
{% endfor %}
{% endif %}
{% endwith %}
{% for message in form1.roofstate.errors %}
<div> {{ message }} </div>
{% endfor %}
<div style="padding-top: 5px;">
{{ form1.submit(class_="btn btn-primary") }}
</div>
</div>
</fieldset>
</form>
</div>
I am not sure where to begin adding multiple labels to the RoofCheck class form objects. Any advice on how to insert support for two languages here would be great. Thanks in advance.
So it turns out that I can just add html directly to the label and place the language attribute there, then use the javascript solution in the link above to toggle the language. For example:
roof_status_text = ("<span lang='en'>Roof Status</span>"
"<span lang='es'>Estado del Techo</span>")
open_text = ("<span lang='en'>Open</span>"
"<span lang='es'>Abierto</span>")
closed_text = ("<span lang='en'>Closed</span>"
"<span lang='es'>Cerrado</span>")
roofstate = RadioField(roof_status_text,
validators=[validators.DataRequired('Please select roof closed or open')],
choices=[('closed', closed_text),
('open', open_text)])
I'm using Microsoft Ajax to dynamically populate a list of contacts, given a json packet. My code is as follows:
function fillContactsFromData(contacts) {
// this is just for debug to let me know that the data is correct
if (contacts.length > 0) {
alert('ID: ' + contacts[0].ID + ', Name: ' + contacts[0].Name);
}
$create(Sys.UI.DataView, { data: contacts }, null, null, $get('contacts'));
}
The associated html is as follows:
<div id="contacts" class="sys-template">
<a onclick="removeContact('{{ ID }}');"><img src="remove.png" /></a>
<a class="contact" rel="/Contacts/Index/{{ ID }}">{{ Name }}</a><br />
</div>
The first <a> tag is used to fire a script to remove the contact, while the second uses the jQuery cluetip to bring up a box on hover (details skipped here).
The problem I am having is that the HTML is not being rendered correctly. What is being generated is:
<div id="contacts">
<a><img src="remove.png" /></a>
<a class="contact" rel="/Contacts/Index/{{ ID }}">Darren Oster</a><br />
</div>
The alert box indicates data with valid ID (a Guid) and Name ("Darren Oster"). The Name is being rendered correctly, but the ID field is not rendered in the 'rel' attribute, and the 'onclick' statement is removed entirely.
Is this a limitation of MS Ajax or am I doing something incorrectly?
Thanks in advance.
If an attribute is to contain any {{ }} expressions it must be the entire value.
Yes:
foo="{{ 'abc' + ID }}"
No:
foo="abc{{ ID }}"
As for onclick not being generated, it probably is, but whatever inspection you are using doesn't show you the value, since it is set with a direct set of element.onclick, not addAttribute().
InfinitiesLoop put me on the right track, so here's the final answer (in case anyone else follows this path)...
First, I was using an earlier preview of MS Ajax 4.0. I've now updated to preview 5, and things work slightly differently. Here's the final HTML (the javascript is unchanged):
<div id="contacts" class="sys-template">
<a sys:onclick="{{ 'removeContact(\'' + ID + '\');' }}"><img src="remove.png" /></a>
<a class="contact" sys:rel="{{ '/Contacts/Index/' + ID }}">{{ Name }}</a><br />
</div>
Also note that preview 5 requires the 'sys:' prefix on any attributes that have data-bound values, so
<option value="{{ Value }}">{{ Text }}</option>
inside a <select> becomes
<option sys:value="{{ Value }}">{{ Text }}</option>