jQuery find id after loading - javascript

Here is my structure:
Person.html
...
<script src="../../js/site.js"></script>
...
<a id="findPersonById" href="javascript:void(0);" class="btn btn-primary">
Find person by id</a>
...
<div id="person-result">results div</div>
Site.js
$(document).ready(function () {
privateFunction();
});
...
$('#findPersonById').click(function () {
$("#person-result").load('/person/find #inside-container');
});
...
/person/find
<script src="../../js/site.js"></script>
...
<div class="container">
<div id="inside-container">
<br/>
<form id="personFindByIdForm">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">PERSON'S ID</span>
<input type="text" class="form-control" name="id"/>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Find</button>
</span>
</div>
</div>
</form>
<div id="find-result">res-div</div>
</div>
So, first of all I'm finding #findPersonById and loading /person/find #inside-container in the #person-result. It works. My next step was about to find two ids #personFindByIdForm and #find-result. I can't do it since document is already loaded if I'm right. How could I do this ?
And the second question - if I add any js code into the div that will be loaded into another div, will that js code run (why is it not running)?
Like:
$("#div-2").load('/any-url #div-1');
<div id='div-1'>
<script>console.log('Any JS')</script>
</div>
Thank you.

You can make sure the items are loaded this way:
$("#div-2").load('/any-url #div-1', function(){
//here all the items loaded will be accessible
});

Related

append() is not working properly in jquery?

I'm using append first this is copy one line but second time this is copy two line. what is the wrong?
I want just single line clone on button click how can i do this?
My Code:-
$(function() {
$('.add-more-room-btn').click(function() {
let addMoreRoomClone = $(this).parents('.room-info').find('.row:first').html();
$(this).parents('.room-info').find('.row').append(addMoreRoomClone);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="room-info">
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="this need to copy" />
</div>
</div>
<button class="add-more-room-btn">Add More</button>
</div>
I hope it helps you, please check the snippet.
$(function() {
$('.add-more-room-btn').click(function() {
let addMoreRoomClone = $(this).parents('.room-info').find('.row .col-md-12:first').clone();
$(this).parents('.room-info').find('.row').append(addMoreRoomClone);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="room-info">
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="this need to copy" />
</div>
</div>
<button class="add-more-room-btn">Add More</button>
</div>
obviously you append to .row, so next klick all those contents will be copied, look at my example which prepends to .room-info it will kinda work
$(function() {
$('.add-more-room-btn').click(function() {
let addMoreRoomClone = $(this).parents('.room-info').find('.row:first').html();
$(this).parents('.room-info').prepend(addMoreRoomClone);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="room-info">
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="this need to copy" />
</div>
</div>
<button class="add-more-room-btn">Add More</button>
</div>
Your "lines" are .row .col-md-12:first, but you are selecting first .row (that is only one row in whole document) and appending it's .html(). Change selector and properly copy it's contents:
$(function() {
$('.add-more-room-btn').click(function() {
// Make copy of whole element
let newContent = $('<div>').append($(this).parents('.room-info').find('.row .col-md-12:first').clone()).html();
console.log(newContent);
$(this).parents('.room-info').find('.row').append(newContent);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="room-info">
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="this need to copy" />
</div>
</div>
<button class="add-more-room-btn">Add More</button>
</div>

Find div before button

Im trying addClass to wizard-step when button clicked, but still no luck :/
<div class="mt-4">
<div class="wizard-steps">
<div class="wizard-step">
<div class="wizard-step-icon">
<i class="far fa-user"></i>
</div>
</div>
<form class="wizard-content mt-2" id="regForm">
<fieldset>
<div class="form-group row">
<div class="col-lg-4 col-md-6 text-right">
<button type="button" onclick="step0(this);" class="btn">Next</button>
</div>
</div>
</fieldset>
</form>
</div>
JavaScript:
<script>
function step0(element) {
$(element).prev('div').find('.wizard-step').addClass('wizard-step-active');
}
</script>
Can anyone please help me !
prev is used to retrieve a previous sibling element. The .wizard-step you want to target is a child of a sibling to a parent of the button being clicked. As such you need to use closest() instead.
Also note that onclick (and all the other onX attributes) are not good practice and should be avoided. As you're already using jQuery you can attach your event unobtrusively, like this:
jQuery($ => {
$('.btn').on('click', function() {
$(this).closest('.wizard-steps').find('.wizard-step').addClass('wizard-step-active');
});
});
.wizard-step-active { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mt-4">
<div class="wizard-steps">
<div class="wizard-step">
<div class="wizard-step-icon">
<i class="far fa-user">User icon</i>
</div>
</div>
<form class="wizard-content mt-2" id="regForm">
<fieldset>
<div class="form-group row">
<div class="col-lg-4 col-md-6 text-right">
<button type="button" class="btn">Next</button>
</div>
</div>
</fieldset>
</form>
</div>
Alternatively, instead of calling find() from the shared parent, you could select the form and use prev():
$('.btn').on('click', function() {
$(this).closest('.wizard-content').prev('.wizard-step').addClass('wizard-step-active');
});
Either is fine, it just depends on how your HTML is structured as to which fits best for this use case.
You don't want the div immediately before the button, but the one containing the relevant item(s). So instead of $(element).prev('div') write $('.mt-4').
Your this parameter is referring your button, not your div.
You can do this without Jquery, just using your function like this:
function step0() {
const element = document.getElementsByClassName('wizard-step');
element.classList.add('wizard-step-active');
}
So, you don't need to pass this as a parameter to step0 function.

Get img src of the closest div

My HTML is:-
<div class="mb10">
<input id="input-upload-img1" type="file" class="file" data-preview-file-type="text" name="img1" accept='image/*,video/*'>
</div>
I'm using FileInput JS library, which initializing a file input type adds more HTML to it.
JQuery
$("#input-upload-img1").fileinput();
After Initializing, it adds few HTML to it.
<div class="mb10">
<span class="file-input file-input-new">
<div class="file-preview "> <!-- This whole div is initially hidden, ie display:none-->
<div class="close fileinput-remove text-right">×</div>
<div class="file-preview-thumbnails"></div>
<div class="clearfix"></div>
<div class="file-preview-status text-center text-success"></div>
<div class="kv-fileinput-error file-error-message" style="display: none;"></div>
</div>
<div class="input-group ">
<div class="form-control file-caption kv-fileinput-caption" tabindex="-1">
<div class="file-caption-name" style="width: 322.42px;"></div>
</div>
<div class="input-group-btn">
<button class="btn btn-default fileinput-remove fileinput-remove-button" type="button"><!-- This button is initially hidden, ie display:none-->
<i class="glyphicon glyphicon-ban-circle"></i>
Remove
</button>
<div class="btn btn-primary btn-file">
<i class="glyphicon glyphicon-folder-open"></i>
Browse …
<input id="input-upload-img1" class="file" type="file" accept="image/*,video/*" name="img1" data-preview-file-type="text">
</div>
</div>
</div>
</span>
</div>
After selecting an image, I get the following HTML:-
<div class="mb10">
<span class="file-input">
<div class="file-preview">
<div class="close fileinput-remove text-right">×</div>
<div class="file-preview-thumbnails">
<div id="preview-1469278203925-0" class="file-preview-frame">
<!--Check added image.-->
<img class="file-preview-image" style="width:auto;height:160px;" alt="IMG_20160606_210238.jpg" title="IMG_20160606_210238.jpg" src="blob:http://127.0.0.1:8000/27307c69-0599-4622-93f1-bf8ae6cc0e5c">
</div>
</div>
<div class="clearfix"></div>
<div class="file-preview-status text-center text-success"></div>
<div class="kv-fileinput-error file-error-message" style="display: none;"></div>
</div>
<div class="input-group ">
<div class="form-control file-caption kv-fileinput-caption" tabindex="-1">
<div class="file-caption-name" style="width: 234.22px;" title="IMG_20160606_210238.jpg"></div>
<div class="input-group-btn">
<button class="btn btn-default fileinput-remove fileinput-remove-button" type="button">
<i class="glyphicon glyphicon-ban-circle"></i>
Remove
</button>
<div class="btn btn-primary btn-file">
<i class="glyphicon glyphicon-folder-open"></i>
Browse …
<input id="input-upload-img1" class="file" type="file" accept="image/*,video/*" name="img1" data-preview-file-type="text">
</div>
</div>
</div>
</span>
</div>
Note the added img tag.
Now, I'm writing a JQuery to get the src of the img tag upon selecting a file. How can I do it?
Here is my jQuery:-
$('.file').change(function(){
var file = this.files[0];
if (!file){
return
}
var source_image = $(this).closest('div .file-preview-frame').find('.file-preview-image')
alert(source_image.attr('src'))
}
It returns undefined. I guess its because the dynamic adding of the image. How can I get the image source of the file selected.??
I think you've wrongly understood the usage of .closest. It reads, For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree. You see, when change on .file element occurs, it traverses through its ancestors where in span.file-input will be one of the ancestors and div.file-preview-frame is not. So you should visit span.file-input and then find div.file-preview-frame.
You should be probably doing this.
$('.file').change(function(){
var file = this.files[0];
if (!file){
return
}
var source_image = $(this).closest('span.file-input')
.find('div.file-preview-frame .file-preview-image')
alert(source_image.attr('src'))
}
Update
I went on to check the plugin and found few events like below which you can really use:
fileLoaded:
This event is triggered after a file is loaded in the preview.
Additional parameters available are:
file: the file object instance
previewId: the identifier for the preview file container
index: the zero-based sequential index of the loaded file in the preview list
reader: the FileReader instance if available.
Example:
$('#input-id').on('fileloaded', function(event, file, previewId, index, reader) {
console.log("fileloaded");
});
fileSelect
This event is triggered after files are selected in the file input via
the file browse button. This is slightly different than the change
event in the sense that this will be triggered even if the file browse
dialog is cancelled.
Example:
$('#input-id').on('fileselect', function(event, numFiles, label) {
console.log("fileselect");
});
I would prefer fileLoaded event which you can use as below:
$('.file').on('fileloaded', function(event, file, previewId, index, reader) {
console.log(file);
//file will have many details like lastModified, name, size, type etc.,
});

Remove a div with it's child elements in jquery

I have a method from where I need to remove the current div with it's element on clink. But it's not doing anything. I have searched goggle for it and applied various thing but no result. Can anyone please help me on this please?!!! Here are my code below ::
my div where my elements and remove link are stated >>>
<div class="col-xs-4 pNorPpl" id="pPeople">
<div class="form-group">
<label for="participatedPeopleName"><g:message code="sl" default="সদস্যের নাম" /></label>
<g:textField id="participatedPeopleName" name="participatedPeopleName" class="form-control"/>
<a onclick="addAnotherNormalPeople()">Add More</a> ||
<a onclick="removeThisMember()">Remove</a>
</div>
</div>
my remove function >>>
function removeThisMember(){
$(this).closest('.pNorPpl').remove();
}
The context of this does not carry through when you use on* attributes. Instead you need to pass it:
<a onclick="removeThisMember(this)">Remove</a>
function removeThisMember(el) {
$(el).closest('.pNorPpl').remove();
}
Or you can attach your event via jQuery:
Remove
$('.pNorPpl').on('click', '.remove-link', function(e) {
e.preventDefault();
$(this).closest('.pNotPpl').remove();
});
Try with this solution:
http://jsbin.com/tuniyucuki/1
HTML
<div class="col-xs-4 pNorPpl" id="pPeople">
<div class="form-group">
<label for="participatedPeopleName"><g:message code="sl" default="সদস্যের নাম" /></label>
<g:textField id="participatedPeopleName" name="participatedPeopleName" class="form-control"/>
<a onclick="addAnotherNormalPeople()">Add More</a> ||
<a class="removeFromHere" >Remove</a>
</div>
</div>
JAVASCRIPT
$(document).ready(function(){
$('.removeFromHere').click(function(){
$(this).closest('.pNorPpl').remove();
})
})

Jquery not recognizing events that takes place on the HTML templates that is generated on fly

I am using Handlerbars.js and it gives me a dynamic template that is generated on the fly. When I do some Jquery events like click etc .. Jquery is not able to catch those events. Please help me out.
I want to trigger a event when the button with id hitUp is clicked
HandlerBar.js code
{{#each this}}
<div id="accordion2" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#{{log}}" data-parent="#accordion2"
data-toggle="collapse" class="btn-block" > <img
class="img-rounded" src="/assets/images/default-food.png" /> {{log}}
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="{{log}}">
<div class="panel-body food-details">
<div class="bm pzero col-xs-12">
<div class="input-group spinner">
<input id="spinid" type="text"
name="demo_vertical2" class="form-control input-sm"
/> <span class="input-group-btn vertical">
<button id="hitUp"
class="btn btn-default bootstrap-touchspin-up"
type="button">
<i class="fa fa-caret-up"></i>
</button>
<button id="hitDown"
class="btn btn-default bootstrap-touchspin-down "
type="button">
<i class="fa fa-caret-down"></i>
</button>
</span>
</div>
HTML code
<div id="accordion2" class="panel-group">
</div>
Jquery code
Try1
$('body').on("click",'#hitUp',function(){
console.log("Functionclicked")
});
Try2
$('#hitUp').click(function(){
console.log("Functionclicked")
});
Try3
$( document ).ready(function( $('body').on("click",'#hitUp',function(){
console.log("Functionclicked")
});){})
I have tried the above Jquery methods but no use. Give me some solutions
Just like in the link that #adeno posted, jQuery event handlers need to be registered as the very last thing that happens when all the JavaScript files and libraries are loaded. Calling $(document).ready() does not mean that all JS files have been loaded, it just means that the DOM has been put in place and is ready for manipulation. If you're going to do more DOM manipulation with a library like Handlebars, you need to make sure that your event handlers are registered after all that dynamic generation has already happened.
So if this is my template:
<h1>{{title}}</h1>
<div>{{body}}</h1>
<br />
{{#each buttonIds}}
<input type="button" id="{{this}}" value="Click me" />
{{/each}}
And this is my javascript:
var data = {
title: 'The Title',
body: 'Document Body',
buttonIds: [ 'hitUp1', 'hitUp2', 'hitUp3' ]
};
var templateScript = $('#header').html();
var template = Handlebars.compile(templateScript);
$(document.body).append(template(data));
$('#hitUp1').on('click', function () { alert('clicked 1'); });
$('#hitUp2').on('click', function () { alert('clicked 2'); });
$('#hitUp3').on('click', function () { alert('clicked 3'); });
I'm waiting til very last to register the on click handlers, and they are each unique identifiers.
Here is a working fiddle to demonstrate what I'm saying.
was facing the same issue. use
$('body').on("change", '#amountType', function (){
});
this worked for me

Categories