Develop Reference

Display Search icon inside search box , throws error in react

I was trying to add search icon inside search box here's my code so far :
<div className='search'>
<input
id="quick_search"
className="xs-hide"
name="quick_search"
placeholder="Search by creator, collectible or collection."
type="text"
onChange={(e) => {
changeKey(e);
}}
onKeyDown={keyPress}
value={keyword}
>
<i class="fa fa-search" aria-hidden="true"></i>
</input>
</div>
i face this Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
can anyone help me with this ? much appreciated !
thanks

React's input element the same as HTML's input element can't have children.
You have to make the icon appear in the input box using CSS, you can't place it as a child.
.form-field {
position: relative;
display: inline-block;
}
.icon {
position: absolute;
right: 0;
}
<div class="form-field">
<input>
<span class="icon">🔍</span>
</div>
Also, you didn't close the <input> tag. It's wrong because every tag in react has to be closed either by using the closing tag </input> or using a self-closing tag <input />
You code should probably look like this:
<div className='search'>
<input
id="quick_search"
className="xs-hide"
name="quick_search"
placeholder="Search by creator, collectible or collection."
type="text"
onChange={(e) => {
changeKey(e);
}}
onKeyDown={keyPress}
value={keyword}
/> {/* <--- notice `/` here */}
<i class="fa fa-search" aria-hidden="true"></i>
</div>

How to simulate an autofocus

I created a webview (Android) for our site.
I put the input in autofocus:
<input name="barcode"
type="search"
placeholder="Scan Barcode"
class="form-control"
autocomplete="off"
autofocus
required>
When the page is loaded the input is selected but the keyboard of Android does not open => Perfect
But when I focus on this input the android keyboard opens and I do not want it to open because this input is only used to scan barcodes
So I would like to "simulate" an autofocus when closing a modal (for example) rather than a simple focus, how to do?
$('.modal').on('hidden.bs.modal', function (e) {
$("input[name='barcode']").focus();
});
EDIT : More details :
We use these scannettes to access our intranet site :
https://www.jmprime.co.uk/product_info.php/android-barcode-scanner-with-gun-grip-rugged-handheld-ip67-device-with-1d-barcode-reader-p-238
On the page in question there is only one input, the goal is to enter the input without opening the android keyboard in order to scan a bar code (they are then sent to the database)

As of This answer, readonly seems to work.
I found it difficult to work directly on the input, so I would still use the trick of the fake input.
With timeout set at 1ms it works like charm. (updated fiddle below)
<input id="barcode" name="barcode" type="hidden" placeholder="Scan Barcode" required>
<label for="barcode" class="your-cool-class-to-make-this-look-like-an-input" />
With the for attribute, when clicked, it will focus the related input.
https://jsfiddle.net/ubdnvsk0/26/

Try this:
I used Bootstrap 4 for modaland jQuery.
I forgot to why .focus() sometimes doesn't execute but I remember by putting it into setTimeout() with a time of 0, it does the trick.
Just in case you get confused with the code: () => {} is similar to
function() {}, it's an anonymous function / callback
Arrow functions are a more concise way to write function, introduced
in ES6.
Arrow functions are anonymous functions, which means you
cannot name it. Arrow functions do not bind to this, they don't create
their own this, thus the enclosing this is being used.
Reading Material: 'Arrow Functions - developer.mozilla.org'
$(document).ready(() => {
$('#myModal').on('hidden.bs.modal', () => {
setTimeout(() => {
$("#barcode").focus();
}, 0);
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<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.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<input id="barcode" name="barcode" type="search" placeholder="Scan Barcode" class="form-control" autocomplete="off" autofocus required readonly><br>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

PHP & Jquery Refresh id with external file

I'm trying to refresh one ID of my page within the click of a button.
I've tried several ways but none of them work. Although I've created the button to refresh it, it keep the submission of the page (triggering the validation event). So, each time I click that button, he tries to submit the form, validation the inputs instead refresh that div.
Here's my code right now:
function refreshCaptcha() {
$("#captcha_code").attr('src','./inc/captcha.php');
}
<div class="form-group">
<div class="col-xs-4">
<button class="btn btn-sm btn-warning" id="refreshcap" name="refreshcap" onclick="refreshCaptcha();">
<i class="fa fa-refresh push-5-r"></i>
<img id="captcha_code" src="inc/captcha.php" />
</button>
</div>
<div class="col-xs-8">
<div class="form-material floating">
<input class="form-control" type="text" id="cap" name="cap">
<label for="cap">Captcha</label>
</div>
</div>
</div>
Can someone help me trying to get what's wrong?
Thanks.

Assuming that your button is inside the form,
add type in your button
which will stop button from submitting your form
<button type="button" class="btn btn-sm btn-warning" id="refreshcap" name="refreshcap" onclick="refreshCaptcha();">
<i class="fa fa-refresh push-5-r"></i>
<img id="captcha_code" src="inc/captcha.php" />
</button>
other than that you can use javascript return false; in your function end
with js
<script>
$(document).ready(function() {
$("#refreshcap").on("click",function(event){
event.preventDefault();
$("#captcha_code").attr('src','./inc/captcha.php');
});
});
</script>
with this you wont need to call on click event this will do it for you, no matter type is button or submit

I think your JS function should return false; in order to not submit the form.
<script>
function refreshCaptcha() {
$("#captcha_code").attr('src','./inc/captcha.php');
return false;
}
</script>

Modal Form Submission without refresh

I have a modal window that pops up when I want to add a new project to my dashboard. I have gotten it to work with jquery post however, I cannot prevent it from refreshing. What I want to do is after the project is added to the database, show a success message and close the modal window after few seconds and not refresh the page (parent page of modal).
Here is my modal
<div class="modal fade" id="add-project-dialog" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Add a new Project</h4>
</div>
<div class="modal-body">
<h3>New Project:</h3>
<form class="form-horizontal" id="add-project-form" action="/projects/add" method="POST">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name">Project Name</label>
<div class="col-md-4">
<input id="name" name="name" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="description">Project Description</label>
<div class="col-md-4">
<input id="description" name="description" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="project_state">Project State</label>
<div class="col-md-4">
<input id="project_state" name="project_state" type="text" placeholder="" class="form-control input-md">
</div>
</div>
</fieldset>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="add-btn" class="btn" type="submit">Add</button>
</div>
</form>
</div>
</div>
Here is my project-dashboard.js
AddProject = function(){
$(document).ready(function() {
$("#submit").submit(function(event){
event.preventDefault();
$.ajax({
url: "/projects/add",
type:"POST",
data:
{
'name': $('#name').val(),
'description': $('#description').val(),
'project_state': $('#project_state').val()
}
});
});
});
}
My views.py
class AddProject(webapp2.RedirectHandler):
def get(self):
template_values = {
#'greetings': greetings,
#'url_linktext': url_linktext,
}
path = os.path.join(os.path.dirname(__file__), '../templates/project-add.html')
self.response.write(template.render(path, template_values))
def post(self):
project = Project()
project.name = self.request.get('name')
project.description = self.request.get('description')
project.project_state = self.request.get('project_state')
time.sleep(2)
project.put()
self.redirect('/projects')
I have tried removing the self.redirect('/projects') however that only takes me to a blank page that is /projects/add (that is the action in the form).

The issue is that you added .ready(foo) handler inside of the AddProject function. I suppose that document is loaded when AddProject is called.
Another issue is that in your HTML, the form has id add-project-form, so you should do $("#add-project-form") instead of $("#submit").
$(document).ready(function () {
$("#add-project-form").submit(function(event){
event.preventDefault();
$.ajax({
url: "/projects/add",
type:"POST",
data:
{
'name': $('#name').val(),
'description': $('#description').val(),
'project_state': $('#project_state').val()
}
});
});
});
});
Take ready handler outside of the AddProject function and it should work (the submit handler is added).

Edit: After some debugging, the answer was to use the right id and proper placing of the javascript code, as noted by the comments.
For starters, a refresh is easy to avoid, just make sure to prevent the default event from running; since you're using jQuery, I would recommend doing return false to end the function, since it both 'prevents default' and 'stops propagation'.
So the first thing you should do is check if your javascript code is actually running and not erring in the middle of execution. If everything is fine there, the worst case is that the project is not actually added (server side error) but the page should not refresh.
Your server side code has nothing to do with the refresh (if it's being properly hijacked), so the response doesn't really matter, I would actually return the id of the new project (so you could provide a link for the newly created item or something like that), but i digress...

Here is a snippet for not only closing modals without page refresh but when pressing enter it submits modal and closes without refresh
I have it set up on my site where I can have multiple modals and some modals process data on submit and some don't. What I do is create a unique ID for each modal that does processing. For example in my webpage:
HTML (modal footer):
<div class="modal-footer form-footer"><br>
<span class="caption">
<button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart <i class="fa fa-shopping-cart"></i></button>
<button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel <i class="fa fa-close"></i></a>
</span>
</div>
jQUERY:
$(document).ready(function(){
// Allow enter key to trigger preloadorders form
$(document).keypress(function(e) {
if(e.which == 13) {
e.preventDefault();
if($(".trigger").is(".ok")) //custom validation dont copy
$("#PreLoadOrders").trigger("click");
else
return;
}
});
});
As you can see this submit performs processing which is why I have this jQuery for this modal. Now let's say I have another modal within this webpage but no processing is performed and since one modal is open at a time I put another $(document).ready() in a global php/js script that all pages get and I give the modal's close button a class called: ".modal-close":
HTML:
<div class="modal-footer caption">
<button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
jQuery (include global.inc):
$(document).ready(function(){
// Allow enter key to trigger a particular class button
$(document).keypress(function(e) {
if(e.which == 13) {
if($(".modal").is(":visible")){
$(".modal:visible").find(".modal-close").trigger('click');
}
}
});
});
Now you should get no page refreshes on any of your modals if u follow these steps.

How do you stop an ember action from triggering on it's child elements / how to access events in actions

I know you can add bubbles=false to actions to stop propagation to parent elements, but how do you stop an action from getting called on it's child elements?
I'm trying to create an overlay to my site, which has a transparent background overlay-bg, a close button and some overlay-content. Each of these elements should be clickable to hide the overlay. But whenever I click the popup (which is restricted to a width of 400px inside the overlay-content) or the form elements inside the popup, etc... the hide method is still being called. The other actions on my form, etc are also being called at the same time.
My initial thought, a way I've done this with jQuery, is to use the event to determine if the clicked element has a class on it like canClose, so that if a child element is clicked the function would return before completion... but I can seem to figure out how to access an event object from the action. I tried returning this as a parameter of the action, but that just returns the ember component itself and not the element that was clicked.
Component:
App.OverlayComponent = Ember.Component.extend({
elementId: 'login-overlay',
// ...
actions: {
// ...
hide: function () {
var view = this;
view.set('showing', false);
view.$().one(Ember.$.support.transition.end, function () {
view.destroy();
});
}
},
});
Template:
<div class="overlay-bg" {{action 'hide'}}></div>
<a href="#" class="close" {{action 'hide'}}>×</a>
<div class="overlay-content" {{action 'hide' this}}>
<div class="popup">
<h1>Login</h1>
<form {{action 'login' on='submit'}}>
<label for="username">Username</label>
{{input value=username id="username" placeholder="Your email address" classNameBindings='usernameError:error'}}
<label for="password">Password</label>
{{input type="password" value=password id="password" placeholder="Password" classNameBindings='passwordError:error'}}
<button class="btn btn-primary" {{action 'login'}}>Login</button>
<p class="text-center forgot"><a href="#" {{action 'forgot'}}>Forgot Password?</a></p>
</form>
<hr>
<p class="mb0 text-center"></i> Login with Facebook</p>
</div>
<p class="text-center signup">Don't have an account? <a href="#" {{action 'signup'}}>Signup</a></p>
</div>
UPDATE:
Forgot to mention, I also tried adding e to my hide function and inside the handlebars helper in the template (hide: function (e) {} and {{action 'hide' event}}) but when I log e it's undefined.
Also, I'm using Ember 1.0.0... do I need to update to a newer version to get access to events in my actions?

I had this exact problem. I kept the action on the bg layer and removed it from the parent element, i.e.
<div class="overlay-bg" {{ action 'hide' }}></div>
<div class="overlay-content">...</div>
If you had the action on .overlay-content because it covers .overlay-bg, you may need
.overlay-content {
pointer-events: none;
}
.overlay-content > * {
pointer-events: all;
}