In my application, I have JSPs: demo1.jsp, demo2.jsp
When the user clicks "Add" button (this is in demo1.jsp) then demo2.jsp should appear in the proper position.
If form is in the same JSP/HTML there is no problem. Using the form id we can create using jQuery.
But here we are handling two JSPs, so how to do this?
demo1.jsp
<div class="accordion">
<div class="question" id="que3">
<span class="heading">Form Details</span>
<span class="button2 white" >Add</span>
</div>
<div class="answer">
<jsp:include page="demo2.jsp">
<jsp:param value="counter_crt" name="counter_crt" />
</jsp:include>
</div>
</div>
How do we write a jQuery function to create demo2.jsp dynamically?
Use AJAX.
$("#addbutton").on("click", function(){
$.ajax({
url: "demo2.jsp",
success: function(response) {
$("#answer").html(response);
}
});
});
Related
i am trying to do a profile management function in that i want to add type of users that is students to other type of user's is teacher's database for that i am using i using jquery and ajax but i am facing a problem to accomplish that which is each student have a add button who are listed in in html page (this is listing done using php for selecting from data base) when i press add button of each student i get undefined in alert box
part of html is
<li class="studdet">
<div class="row">
<div class="col-md-6" id="studname">
<div class="col-md-3" id ="all">
<label>Name Of Student:</label>
<p id="nameOfStud" >name of student fetched from database</p>
</div>
<div class ="col-md-3">
<label></label>
</br></br>
<button class="btn-u" id="addStudents">Add</button>
</div>
</div>
</div>
</li>
<li class="studdet">
<div class="row">
<div class="col-md-6" id="studname">
<div class="col-md-3">
<label>Name Of Student:</label>
<p id="nameOfStud" >Name of student fetched from data base</p>
</div>
<div class ="col-md-3">
<label></label>
</br></br>
<button class="btn-u" id="addStudents">Add</button>
</div>
</div>
</div>
</li>
jquery for gettting value of student name is
$(document).on('click', '#all #addStudents', function() {
var option = $(this).closest("id","nameOfStud").html();
alert(option);
// $.ajax({url: "http://localhost/ededge/Add_students/add_to_group",data: {studentname : option},type:"POST", success: function(result){
// $('#studdet').attr('class','label label-light');
// alert(result);
// }});
});
but what i am getting is undefined in alert box
help me to find my error like before
$(document).on('click', '#addStudents', function() {
var option = $(this).closest('div#studname').find('p#nameOfStud').text();
alert(option);
});
closest('div#studname') searches for parent div in DOM heirachy with id studname
find('p#nameOfStud') searches for p tag descendants in DOM tree of earlier searched div.
.text() fetches text inside paragraph tag
You cannot have multiple ids in jQuery. ID is unique.
Try the following:
Change your <p> element as follows:
<p class="nameOfStud" >Name of student fetched from data base</p>
Change your 'button' as follows:
<button class="btn-u addStudents">Add</button>
Then try the following code:
$(function(){
$('.addStudents').click(function(){
var option = $(this).closest('.nameOfStud').html();
alert(option);
});
});
This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 6 years ago.
I need to create few div elements after click the button. So I decide to make something like template in external file and append in head div tag using jquery.
$('.socket-element').on('click', function (e) {
$.ajax({
url: '/my-site/tags/socket-box.php',
success: function (data) { $('#room-place').append(data); },
dataType: 'html'
});
});
And my external html file:
<div class="socket-box room-box-element col-xs-2 ui-draggable ui-draggable-handle">
<div class="row">
<div class="row">
<div class="box-header col-xs-12">
<div class="row">
<div class="col-xs-2">
<img class="down-arrow" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png" width="14" height="18" />
</div>
<div class="col-xs-8">
<h6>Temperature</h6>
</div>
<div class="col-xs-2">
<img class="settings" src="https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/settings-24-128.png" width="18" height="18" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="box-content col-xs-12">
<div class="row">
Test
</div>
</div>
</div>
</div>
So this code is working fine is add the external html on the original html file but when I need to use click event on appended html is not working.
So I need to use few events like click, draggable from jquery ui etc.
But when I need to use: this click event then for appended html is not working
$('.down-arrow').click(function (e) {
alert('Test');
});
How can I solve this problem.
Try this :
$('.socket-element').on('click', function (e) {
$.ajax({
url: '/my-site/tags/socket-box.php',
success: function (data) {
$('#room-place').append(data);
$('#room-place').ready(function(){
$('.down-arrow').click(function (e) {
alert('Test');
});
});
},
dataType: 'html'
});
});
Hope this will help:)
For dynamic events do write using event delegation like:
$(document).on("click",".down-arrow",function(){
//write your code here
})
Please Try to use the events inside the on ready function .. Trust me it will work properly.
$(document).ready(function(){
$('.down-arrow').click(function (e) {
alert('Test');
});
});
Please try this way.
Use event delegation
$(document).on('click', '.down-arrow',function(e){
});
I have a template call game.php :
<div id="bonus-pub" class="not-display">
<section id="" class="generique">
<div id="">
content
<div id="rtr"></div>
<div id="gfgf class="not-display">
<h2>gfgf</h2>
<p>dsfdsfds</p>
<p class="GC_fdfdfd">
<a class="dfdf">Close</a> </p>
</div>
</div>
</section>
</div>
Now I have another view whitch is open as a popup after an action generique.php:
<section>
<?php require($file_view);?>
<script>
$(function(){
$('.modal').addClass('generic');
}())
</script>
And a have another file charge with js actions. In this file I need to create a .js call to load the <div id="bonus-pub" class="not-display"> into template generique.php, I tried :
<script>
document.getElementById('bonus-pub').setAttribute('class','display-block');
</script>
But this fonction only put the div into page not in popup windows. So the probleme is that I want to put <div id="bonus-pub" class="not-display"> from template game.php into generique.php after an action. Help me please!! Thx in advance!!!
Edit: Fixed the native JS and jQuery mix.
Have you tried this instead of using setAttribute:
<script>
document.getElementById('bonus-pub').style.display = "block";
</script>
Your requirement can be full filled using ajax. In game.php store all the div data in a php variable and echo that variable to the ajax call.
game.php
<?php
$ret = '<div id="bonus-pub" class="not-display">
<section id="" class="generique">
<div id="">
content
<div id="rtr"></div>
<div id="gfgf class="not-display">
<h2>gfgf</h2>
<p>dsfdsfds</p>
<p class="GC_fdfdfd">
<a class="dfdf">Close</a> </p>
</div>
</div>
</section>
</div>';
echo $ret;
?>
after your mentioned action make an ajax call for the game.php page
$.ajax({
url:'game.php',
method:'post',
success: function(response)
{
//you have your div data in this response
}
fail: function(response)
{
//your ajax request failed
}
});
Click works just on first div with id plus but other divs with the same id dont work. I dont know whats the problem... I dont get what the problem is. Please help. Thanks!
Here is the code...
Edited:
<div id="details">
<div id="detailHeader">
<div id="facultyTitle">sadasdas</div>
<div id="title">dsadasdasdas</div>
</div>
<div id="detailReference">
dodaj
<div id="refVote">
<div class="plus" glas="41">Good</div>
<div class="minus" glas="41">Bad</div>
</div>
<div id="referenceInfo">
01:40 PM 06.09.2014.
</div>
</div>
</div>
<div id="detailReference">
dodaj
<div id="refVote">
<div class="plus" glas="37">Good</div>
<div class="minus" glas="37">Bad</div>
</div>
<div id="referenceInfo">
01:38 PM 06.09.2014.
</div>
</div>
</div>
JavaScript
$(".plus").click( function() {
var ref=$(this).attr("glas");
alert(ref);
$.ajax({
url:"url is ok",
success:function(){
}
}
);
});
IDs should be unique. use same class instead of ids.Like this:
<div class="plus" glas="37">Good</div>
and then use:
$(".plus").click( function() {
var ref=$(this).attr("glas");
alert(ref);
$.ajax({
url:"url is ok",
success:function(){
}
}
);
$(".plus").click(...)
not
$("#plus").click(...)
There can and shall only be one item with a certain ID on the page. Use classes on those buttons instead.
Couple of issues. You have mismatched divs. This last div looks like its the culprit.
<div id="details">
<div id="detailHeader">
<div id="facultyTitle">sadasdas</div>
<div id="title">dsadasdasdas</div>
</div> <--this one
Your second issue is that you shouldnt have multiple ids that are the same on a page. Instead set it as a class with
<div class="plus"> Then reference them in jquery with
$(".plus").click( function()
I have to use class if you have more than one div. Try with .plus
I have organized the page this way:
<div class="singlePost">
<div class="post"> </div>
<div class="comments" data-idPost="310"> </div>
<div class="formComment">
<textarea data-idPost="310"></textarea>
<button data-idPost="310">Insert</button>
</div>
</div>
<div class="singlePost">
<div class="post"> </div>
<div class="comments" data-idPost="304"> </div>
<div class="formComment">
<textarea data-idPost="304"></textarea>
<button data-idPost="304">Insert</button>
</div>
</div>
I used html5 data-attributes to distinguish posts and my jquery code is:
$(".formCommento button").click(function() {
idPost=$(this).attr('data-idpost');
text=$('textarea[data-idpost="'+idPost+'"]').val();
noty({text: 'I\'m going to insert '+text});
//and here i make the ajax request
return false;
});
I think this is not the way to organize this kind of stuff. I have the problem that when i click on the button i have multiple actions running together so the same comment is inserted several times. What do you suggest to do?
If you are learning to "organize" as well, I would suggest only to use once your data-, like:
<div class="singlePost" data-postId="310">
<div class="post"> </div>
<div class="comments"> </div>
<div class="formComment">
<textarea></textarea>
<button class="btn-submit">Insert</button>
</div>
</div>
<div class="singlePost" data-postId="311">
<div class="post"> </div>
<div class="comments"> </div>
<div class="formComment">
<textarea></textarea>
<button class="btn-submit">Insert</button>
</div>
</div>
then, fire it for every button:
$(".singlePost .btn-submit").click(function() {
var singlePost = $(this).closest(".singlePost"), // get singlePost block
postId = singlePost.attr("data-postId"), // read data attribute
txt = singlePost.find("textarea").val(); // get it's own textarea value
// do your magic
});
Here's a live example: http://jsbin.com/iyomaj/1/edit
try this, pass related context, by default jQuery uses document as context so it search in whole document
$(".formComment button").click(function() {
var parentdiv = $(this).closest('.formComment');
idPost=$(this).attr('data-idpost');
text=$('textarea[data-idpost="'+idPost+'"]',parentdiv ).val();
noty({text: 'I\'m going to insert '+text});
//and here i make the ajax request
return false;
});