On my page a couple of messages are retrieved from the database. They are displayed using fetch_array. On the corner of every message a button is shown. This button contains the ID of the message. When it's clicked, a div will slide downwards from the top of the page, asking for a confirmation. If the yes-button is clicked, the message will be deleted. If the no-button is clicked, the div slides upwards, off canvas.
How can I send the ID from the message to the yes-button, so the right message will be deleted instead of all messages? I wrote this piece of code but this doesn't work.
<? while($result=mysqli_fetch_array($sql,MYSQLI_ASSOC)){ ?>
<div class="memo_blok">
<table width="100%">
<tr>
<td>
<font class="memo_blok_name"><? echo $result['name']; ?> |</font>
<font class="memo_blok_date"><? echo $result['date']; ?></font>
</td>
<td width="20">
<img src="images/close.png" width="20" id="deleteBTN_<? echo $result['id']; ?>" />
</td>
</tr>
</table>
<p class="memo_blok_TXT">
<? echo $result['msg']; ?>
</p>
</div>
<? } ?>
<div id="confirm" class="confirm">
<table width="100%">
<tr>
<td align="center">Are you sure?</td>
</tr>
<tr>
<td align="center">
<a href="memo_delete.php?id=1" class="noLine">
<img src="images/Yes.png" width="50" id="deleteYes" />
</a>
<img src="images/No.png" width="50" id="deleteNo" />
</td>
</tr>
</table>
</div>
The CSS:
.confirm {
width:100%;
height:100px;
position:fixed;
top:-100px;
left:0px;
background-color:#3c3c3b;
font-family: 'Abel', sans-serif;
font-size:24px;
color:#fefefe;
}
The script:
<script>
$(document).ready(function(){
$("#deleteBTN").click(function(){
$("#confirm").animate({top: '0px'});
});
$("#deleteNee").click(function(){
$("#confirm").animate({top: '-100px'});
});
});
Change the close image:
<img src="images/close.png" width="20" id="deleteBTN_<? echo $result['id']; ?>" />
To this so it will have a data-id attribute (also you can change than the id attribute to class and leave out the id number):
<img src="images/close.png" width="20" class="deleteBTN" data-id="<? echo $result['id']; ?>" />
Remove the value of href from a.noLine like this <a href="" class="noLine">
and in your javascript code then put the data attribute's value on the end of href attribute like this:
$(".deleteBTN").click(function(){
var msgId = $(this).data('id');
$("#confirm").animate({top: '0px'});
var $deleteBtn = $("#confirm").find('.noLine');
$deleteBtn.attr('href','memo_delete.php?id='+msgId);
});
Related
I want http://jsfiddle.net/tv0evg7d/1/ to implement in my website. I copied the codes so that I can test whether its working or not. But when I click show on my website the image is not loaded as its working in the Fiddle. jQuery library is loaded from the header file which is included in the page. The library is named as jquery.min.js. Everything seems to be fine but I am not getting why its not working. Please help me and thanks in advance.
Markup from fiddle:
<input id="inputBox" value="http://www.clusterflock.org/wp-content/uploads/2010/09/owl-in-a-hat.jpg"/>
<button id="loadImage">Show</button>
<br/>
<img id="image" src="" alt="No image loaded"/>
Code
$("#loadImage").on('click', function(){
$("#image").attr("src", $("#inputBox").val());
});
My script:
<script>
$("#loadImage").click(function(){
$("#image").attr("src", $("#inputBox").val());
});
</script>
<div id="wrapper">
<div class="main-container height-auto" style="width: 20%">
<?php include'side-menu.php'; ?>
</div>
<div class="main-container height-auto main-cont-adjust">
<div class="container-title">
<h3>Banner Ads on <?php echo $sf['si_name']; ?></h3>
</div>
<div class="divider"></div>
<div class="member-index-container" align="right">
<div class="mi-banner" style="margin-left: 0"><img src="images/adv-here2.png"></div>
</div>
<br>
<?php echo $msg; ?>
<div class="ads-box">
<table class="table-list">
<!--form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"-->
<tr>
<th class="left-align">Banner URL</th>
<td class="left-align"><input type="text" name="burl" class="ad-field" required value="<?php echo $burl; ?>"></td>
</tr>
<tr>
<th class="left-align">Target URL</th>
<td class="left-align"><input type="text" name="turl" class="ad-field" required value="<?php echo $turl; ?>"></td>
</tr>
<tr>
<th class="left-align">Duration</th>
<td class="left-align"><select name="bprice" class="select-field" required>
<?php while($bpf = $bpq->fetch()){ extract($bpf); ?>
<option value="<?php echo $bp_id; ?>"><?php echo $bp_days; if($bp_days > 1){ echo " days at $"; }else{ echo " day at $"; } echo $bp_amount; ?></option>
<?php } ?>
</select></td>
</tr>
<tr>
<th class="left-align">Wallet Balance: $<?php echo $pc_bal; ?></th>
<th align="right"><input type="submit" name="buy_ad" value="Pay with Wallet" class="login-btn btn btn-black" style="width: 170px"></th>
</tr>
</form>
</table>
</div>
<input id="inputBox" value=""/>
<button id="loadImage">Show</button>
<br/>
<img id="image" src="" alt="No image loaded" />
<div class="container-title">
<h4>Ad Preview - This is how your Ad will look like</h4>
</div>
<div class="mi-banner" style="margin-left: 0; border: 1px solid #ddd;">
<!--img src="" id="image" alt="Type or Paste banner URL and click on CHECK"-->
</div>
</div>
</div>
Try this
$(document).ready(function() {
$("#loadImage").on('click', function() {
$("#image").attr("src", $("#inputBox").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<input id="inputBox" value="http://publicador.tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg"/>
<button id="loadImage">Show</button>
<br/>
<img id="image" src="" alt="No image loaded"/>
Wrap you function with $(document).ready(function() {..});
$(document).ready(function() {
$("#loadImage").on('click', function() {
$("#image").attr("src", $("#inputBox").val());
});
});
From your comment "and header.php is included in this page" so basically, this code attempts to run prior to jQuery being included. That appears to be your real issue here. You should instead include jQuery on the page and then on the header only load it if it is not already present
There are many posts you can find on how to do that last part.
I am working on a post and comment system where any user can post "what is on your mind" and have other users reply to his/her post.
The issue i am having is that i want a situation where when a user click on comment link(anchor div), the text area will appear(show, fadein), the user comment and then post(add to database when the comment button is clicked) back to database.
in my code i discover that only the first row can do what i want when i click on the comment link, it show up the textarea for comment, why the other rows contain post, when i try to click on the comment link to display the textarea to input comment, nothing seem to happen.
SEE SCREEN SHOT OF THE POST/COMMENT SYSTEM
Bellow is the js code to display the comment textarea
$(document).ready(function()
{
//link to click action
$('.leavecomment').click(function()
{
var clickedID = this.id; //Split ID string (Split works as PHP explode)
var DbNumberID = clickedID[1]; //and get number from array
$('#leavecomment1'+DbNumberID).fadeIn('slow');
$('#txtcomment').focus();
//Textarea without editing.
$(document).mouseup(function()
{
$('#leavecomment1'+DbNumberID).fadeOut('slow');
$('.editpostwrapper').show();
});
});});
</script>
MY HTML/PHP SCRIPT
<div class="content_wrapper">
<ul id="responds">
<?php
//include db configuration file
include_once("connect/cons.php");
//MySQL query
$results = $mysqli->query("SELECT pagepost.comment,pagepost.regid,pagepost.id,register.id as regid, register.photo,register.lname,register.fname,
UNIX_TIMESTAMP() -pagepost.date AS CommentTimeSpent FROM pagepost inner join register on pagepost.regid=register.id order by pagepost.id desc");
//get all records from add_delete_record table
while($row = $results->fetch_assoc())
{
echo '<li id="item_'.$row["id"].'">';
echo'<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="5%" align="left" valign="top">
<img src="profilepics/'.$row['photo'].'" class="photothumbpost">
</td>
<td width="0" align="left" valign="top" ><span class="colorpurple">'. ucwords(strtolower($row['lname'])). " " . ucwords(strtolower($row['fname'])). '</span> </br> <span class="datetimecolor">'.
date("F j, Y h:i:s A" ,strtotime($row['date'])).'</span>';
$days2 = floor($row['CommentTimeSpent'] / (60 * 60 * 24));
$remainder = $row['CommentTimeSpent'] % (60 * 60 * 24);
$hours = floor($remainder / (60 * 60));
$remainder = $remainder % (60 * 60);
$minutes = floor($remainder / 60);
$seconds = $remainder % 60;
if($days2 > 0)
echo date('F d Y', $row['date']);
elseif($days2 == 0 && $hours == 0 && $minutes == 0)
echo "few seconds ago";
elseif($days2 == 0 && $hours == 0)
echo $minutes.' minutes ago';
else
echo "few seconds ago";
'</td>
<td width="2%" align="right" valign="top">';
if($row['regid']==$_SESSION['regid'])
{
echo '<div class="del_wrapper">
<!---->
<div class="btn-group btn-group-left" >
<span class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="background-color:transparent; border:none;background-image:none;">
<img src="icons/dropdown.png" title="Options" border="0" />
</span>
<ul class="dropdown-menu" role="menu" style="width:150px; float:left;border:none;" >
<li style="width:150px; text-align:center;border:none;">Hide this for me</li>
<li style="width:150px; text-align:center;border:none;"> <span class="glyphicon glyphicon-floppy-remove" aria-hidden="true"><font face="Arial"> Delete</font></span></li>
<li style="width:150px; text-align:center;border:none;"> <font face="Arial"> Edit Post</font></span></li>
<li style="width:150px; text-align:center;border:none;"> Like</li>
<li style="width:150px; text-align:center;border:none;"> Unlike</li>
<li class="divider" style="width:150px; text-align:center;"></li>
<li style="width:150px; text-align:center;border:none;"><a href="#" data-toggle="modal" data-target="#gallery" >Photo Gallery</a></li>
</ul>
</div>
<!---->
</div>';
}?>
<?php
echo'</td>
</tr>
<tr>
<td width="0" align="left" valign="top" colspan="3"><div class="editpostwrapper">'. strip_tags($row['comment']). '</div>
<!-- end of edit post wrapper-->
<div class="editpost" style="display:none">
<textarea name="editpost" class="textareapost" cols="45" rows="2" placeholder="Edit Post" title=""></textarea>
</div>
<!--like dislike buttons-->
Comment</span> . <a href="#">Share
<!--like dislike buttons-->
</td>
</tr>
</table>';
?>
<div id="commentresponds">
<?php
$resultscomment= $mysqli->query("SELECT comment.id,comment.comment,comment.date,comment.pagepostid,pagepost.id,register.fname,register.lname,register.photo from comment
inner join pagepost on comment.pagepostid=pagepost.id
inner join register on comment.regid=register.id Where comment.pagepostid='$row[id]' order by comment.id desc");
while($rows = $resultscomment->fetch_assoc())
{
echo '<span id="item_'.$rows["id"].'"/>';
echo'<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="5%" align="left" valign="top">
<img src="profilepics/'.$rows['photo'].'" class="photothumbpost">
</td>
<td width="0" align="left" valign="top" ><span class="colorpurple">'. ucwords(strtolower($rows['lname'])). " " . ucwords(strtolower($rows['fname'])). '</span> </br> <span class="datetimecolor">'.date("F j, Y h:i:s A" ,strtotime($rows['date'])).'</span>
</td>
<td width="2%" align="right" valign="top">
<div class="del_wrapper"><a href="" class="del_button" id="del-'.$rows["id"].'">
<img src="icons/dropdown.png" title="Delete post" border="0" /></a></div>
</td>
</tr>
<tr>
<td width="0" align="left" valign="top" colspan="3">'. $rows['comment']. '
<!--like dislike buttons-->
<!--like dislike buttons-->
</td>
</tr>
</table>';
//echo'<img src="profilepics/'.$rows['photo'].'" class="photothumbpost">';
//echo $rows['comment']. '<br/>';
}
?>
<form id="form1" name="form1" method="post" action="processinsertcomment.php">
<input type="hidden" name="pagepostid" id="pagepostid" class="pagepostid" value="<?php echo $row['id'] ?>" />
<input type="hidden" name="regid" id="regid" value="<?php echo $_SESSION['regid'] ?>" />
<input type="hidden" name="postcomment" id="postcomment" value="<?php echo $row['comment'] ?>" />
<div id="leavecomment1<?php $row["id"] ?>" style="display:none">
<textarea name="txtcomment" id="txtcomment<?php $row['id']?>" cols="45" rows="2" placeholder="Comment here" title="Your comment here" class="textareacomment"></textarea>
<br />
<input type="submit" name="btncomment" id="btncomment" value="Comment" class="buttonpost" />
<img src="images/ajax.gif" id="LoadingImage" style="display:none" />
</div>
</form>
<?php
echo'</div>';
echo '</li>';
}
//close db connection
$mysqli->close();
?>
</ul>
</div>
This is happening because in HTML you have multiple textareas with same id attribute that is txtcomment.
You should try giving each textarea, comments anchor tag a unique id.
use id="txtComment.'.$row["id"].'" and id="leavecomment.'.$row["id"].'"
NOTE: when an HTML page have multiple DOM element with same id, it
will traverse through the last one and return the last occurrence of
element.
SOLUTION
I have been able to find out the problem with my code,
i was not properly passing the span id of the the class leavecomment, so the click event was not seeing the value assigned to the id, below is the correct dynamic value assigned to the id.
Comment</span> . <a href="#">Share
THE JQUERY/JS ABOVE INBETWEEN THE HEAD TAG
$(document).ready(function()
{
//link to click action
$('.leavecomment').click(function()
{
var divname= this.id; //this will automatically represent the value stored in the span id <span id="'.$row["id"].'" class="leavecomment">Comment</span> as seen in the html/php page
$('#leavecomment1'+divname).fadeIn('slow');
$('#txtcomment'+divname).focus();
});
});
</script>
THE PHP PAGE
<div class="content_wrapper">
<ul id="responds">
<?php
//include db configuration file
include_once("connect/cons.php");
//MySQL query
$results = $mysqli->query("SELECT pagepost.comment,pagepost.regid,pagepost.id,register.id as regid, register.photo,register.lname,register.fname,
UNIX_TIMESTAMP() -pagepost.date AS CommentTimeSpent FROM pagepost inner join register on pagepost.regid=register.id order by pagepost.id desc");
//get all records from add_delete_record table
while($row = $results->fetch_assoc())
{
echo '<li id="item_'.$row["id"].'">';
echo'<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="5%" align="left" valign="top">
<img src="profilepics/'.$row['photo'].'" class="photothumbpost">
</td>
<td width="0" align="left" valign="top" ><span class="colorpurple">'. ucwords(strtolower($row['lname'])). " " . ucwords(strtolower($row['fname'])). '</span> </br> <span class="datetimecolor">'.
date("F j, Y h:i:s A" ,strtotime($row['date'])).'</span>';
$days2 = floor($row['CommentTimeSpent'] / (60 * 60 * 24));
$remainder = $row['CommentTimeSpent'] % (60 * 60 * 24);
$hours = floor($remainder / (60 * 60));
$remainder = $remainder % (60 * 60);
$minutes = floor($remainder / 60);
$seconds = $remainder % 60;
if($days2 > 0)
echo date('F d Y', $row['date']);
elseif($days2 == 0 && $hours == 0 && $minutes == 0)
echo "few seconds ago";
elseif($days2 == 0 && $hours == 0)
echo $minutes.' minutes ago';
else
echo "few seconds ago";
'</td>
<td width="2%" align="right" valign="top">';
if($row['regid']==$_SESSION['regid'])
{
echo '<div class="del_wrapper">
<!---->
<div class="btn-group btn-group-left" >
<span class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="background-color:transparent; border:none;background-image:none;">
<img src="icons/dropdown.png" title="Options" border="0" />
</span>
<ul class="dropdown-menu" role="menu" style="width:150px; float:left;border:none;" >
<li style="width:150px; text-align:center;border:none;">Hide this for me</li>
<li style="width:150px; text-align:center;border:none;"> <span class="glyphicon glyphicon-floppy-remove" aria-hidden="true"><font face="Arial"> Delete</font></span></li>
<li style="width:150px; text-align:center;border:none;"> <font face="Arial"> Edit Post</font></span></li>
<li style="width:150px; text-align:center;border:none;"> Like</li>
<li style="width:150px; text-align:center;border:none;"> Unlike</li>
<li class="divider" style="width:150px; text-align:center;"></li>
<li style="width:150px; text-align:center;border:none;"><a href="#" data-toggle="modal" data-target="#gallery" >Photo Gallery</a></li>
</ul>
</div>
<!---->
</div>';
}?>
<?php
echo'</td>
</tr>
<tr>
<td width="0" align="left" valign="top" colspan="3"><div class="editpostwrapper">'. strip_tags($row['comment']). '</div>
<!-- end of edit post wrapper-->
<div class="editpost" style="display:none">
<textarea name="editpost" class="textareapost" cols="45" rows="2" placeholder="Edit Post" title=""></textarea>
</div>
**<!--THIS IS THE LINK TO CLICK,HERE WE HAVE LIKE,**COMMENT**, SHARE,-->**
Comment</span> . <a href="#">Share
**<!--THIS IS THE END LINK TO CLICK,HERE WE HAVE LIKE,**COMMENT**, SHARE,-->**
</td>
</tr>
</table>';
?>
<div id="commentresponds">
<?php
$resultscomment= $mysqli->query("SELECT comment.id,comment.comment,comment.date,comment.pagepostid,pagepost.id,register.fname,register.lname,register.photo from comment
inner join pagepost on comment.pagepostid=pagepost.id
inner join register on comment.regid=register.id Where comment.pagepostid='$row[id]' order by comment.id desc");
while($rows = $resultscomment->fetch_assoc())
{
echo '<span id="item_'.$rows["id"].'"/>';
echo'<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="5%" align="left" valign="top">
<img src="profilepics/'.$rows['photo'].'" class="photothumbpost">
</td>
<td width="0" align="left" valign="top" ><span class="colorpurple">'. ucwords(strtolower($rows['lname'])). " " . ucwords(strtolower($rows['fname'])). '</span> </br> <span class="datetimecolor">'.date("F j, Y h:i:s A" ,strtotime($rows['date'])).'</span>
</td>
<td width="2%" align="right" valign="top">
<div class="del_wrapper"><a href="" class="del_button" id="del-'.$rows["id"].'">
<img src="icons/dropdown.png" title="Delete post" border="0" /></a></div>
</td>
</tr>
<tr>
<td width="0" align="left" valign="top" colspan="3">'. $rows['comment']. '
<!--like dislike buttons-->
<!--like dislike buttons-->
</td>
</tr>
</table>';
//THIS IS THE MAJOR FOCUS DISPLAYING THE COMMENT ON CLICKING THE COMMENT LABEL AS SEEN ABOVE
}
?>
<form id="form1" name="form1" method="post" action="processinsertcomment.php">
<input type="hidden" name="pagepostid" id="pagepostid" class="pagepostid" value="<?php echo $row['id'] ?>" />
<input type="hidden" name="regid" id="regid" value="<?php echo $_SESSION['regid'] ?>" />
<input type="hidden" name="postcomment" id="postcomment" value="<?php echo $row['comment'] ?>" />
<div id="leavecomment1<?php echo $row["id"] ?>" class="leavecomment1<?php echo $row["id"] ?>" style="display:none" >
<textarea name="txtcomment" id="txtcomment<?php echo $row['id']?>" cols="45" rows="2" placeholder="Comment here" title="Your comment here" class="textareacomment"></textarea>
<br />
<input type="submit" name="btncomment" id="btncomment" value="Comment" class="buttonpost" />
<img src="images/ajax.gif" id="LoadingImage" style="display:none" />
</div>
</form>
<?php
echo'</div>';
echo '</li>';
}
//close db connection
$mysqli->close();
?>
</ul>
</div>
My check box when unchecked my input with id of delete should be disabled, but for some reason the java script code it not picking up the id of both input and checked input. I use bootstrap 3 and codeigniter.
What's wrong with my code? Unsure why not working. All JS scripts loaded correct.
<script type="text/javascript">
$('#check_delete').click(function(){
if($(this).attr('checked') == false){
$('input #delete').attr("disabled","disabled");
} else {
$('input #delete').removeAttr('disabled');
}
});
</script>
<input type="submit" role="button" class="btn btn-danger" id="delete" value="Delete">
View
<?php echo form_open('admin/users_group/delete');?>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td style="width: 1px;" class="text-center"><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" /></td>
<th class="text-left">User Group ID</th>
<th class="text-left">Name</th>
<th class="text-right">Action</th>
</tr>
</thead>
<?php if ($users_group == TRUE) {?>
<?php foreach ($users_group as $user_group) { ?>
<tr>
<td class="text-center"><?php if (in_array($user_group['user_group_id'], $selected)) { ?>
<input type="checkbox" id="check_delete" name="selected[]" value="<?php echo $user_group['user_group_id']; ?>" checked="checked" />
<?php } else { ?>
<input type="checkbox" id="check_delete" name="selected[]" value="<?php echo $user_group['user_group_id']; ?>" />
<?php } ?>
</td>
<td class="text-left"><?php echo $user_group['user_group_id']; ?></td>
<td class="text-left"><?php echo $user_group['name']; ?></td>
<td class="text-right">
<input type="submit" role="button" class="btn btn-danger" id="delete" value="Delete">
<i class="fa fa-pencil"></i> Edit</td>
</tr>
<?php } ?>
<?php } else { ?>
<tr>
<td class="text-center" colspan="3">No Results</td>
</tr>
<?php } ?>
</table>
</div>
<?php echo form_close();?>
</div>
<div class="panel-footer clearfix">
<div class="pull-left pag-user-group"><?php echo $pagination; ?></div>
<div class="pull-right" style="padding-top: 7.5px;"><?php echo $results; ?></div>
</div>
</div>
</div>
</div>
</div><!-- # Page Inner End -->
</div><!-- # Page End -->
</div><!-- # Wrapper End -->
<script type="text/javascript">
$('#check_delete').click(function(){
if($(this).attr('checked') == false){
$('input #delete').attr("disabled","disabled");
} else {
$('input #delete').removeAttr('disabled');
}
});
</script>
You declare your script before the HTML code.
A HTML page is read sequentially.
alert( $('input#delete').length )
<input id="delete" >
This will alert "0" because jQuery looks for #delete, and then, next line, #delete exists.
Two solutions :
1) Move your script after HTML, at the end, before the </body> tag.
2) Wrap your code in $(function(){ /* Your code here */ } . This will wait for the page to be ready before executing the script.
<input id="delete" >
alert( $('input#delete').length )
This will work, and this also will :
$(function(){
alert( $('input#delete').length )
})
<input id="delete" >
I have this div, where divBrdr should contain a form summaryConfig
<div id="popup">
<div id="popupClose">
<input type="image" alt="close window" src="images/close_btn.gif" width="20" height="20" onclick="" align="right">
</div>
<div id="divBrdr" >
</div>
</div>
<div id="backgroundPopup">
</div>
Right now i have this form inside divBrdr but then this popup appears differently for create and update so I wanted to make this form made dynamically. Can somebody help me do that?
<form style="padding-bottom:11px;" name="summaryConfig" method="post" action="">
<img alt="title" src="images/update_conform_title.gif" width="189" hspace="4" height="17" vspace="4"><br>
<br>
<table align="center" width="90%" border="0" cellspacing="0" cellpadding="0">
<tr> <td width="800"></td> </tr>
</table>
<div id="postUploadInfo">
</div>
<table align="center" border="0" cellpadding="10" cellspacing="0" width="84%">
<tr>
<td colspan="3" align="center">
<label>
<input type="button" tabindex="4" id="btnOk" value="Done" class="btn" onClick="">
</label>
</td>
</tr>
</table>
</form>
if you want to add this form dynamically then you can hold your form in a variable and append that variable to divBrdr div on button click.
VariableHoldingForm = "<form style='padding-bottom:11px;' name='summaryConfig' method='post' action=''> ";
VariableHoldingForm +="<img alt='title' src='images/update_conform_title.gif' width='189' hspace='4' height='17' vspace='4'><br> <br> ... and till...</form>'
$('#buttonId').click(function(){
$('#divBrdr').append(VariableHoldingForm);
});
even you can use document.createElement() to create any html tag
**EDIT**
to unAppend remove html of your div like this..
$('#divBrdr').html('');
and then again add new form element variable on update button
$('#updateButton).click(function(){
$('#divBrdr').append(newForm);
});
I have this code:
<div onClick="$(location).attr('href','updateUser.php?id=<?php echo $admin->id; ?>')" class="dbItem">
<div class="dbItemCheckbox">
<input name="se8" type="checkbox" value="<?php echo $admin->id; ?>" />
</div>
<div class="dbItemMessageIconAdmin"><img src="images/admin.png" alt="" width="20" height="23" border="0" /></div>
<div class="dpItemName"><?php echo $admin->username; ?></div>
<div class="dpItemTitle"><?php echo $te; ?></div>
<div style="left: 110px" class="dpItemDate"><?php echo $admin->registerDate; ?></div>
<div class="dpItemDelete"><img src="images/delete.png" alt="" width="11" height="10" border="0" /></div>
</div>
When user click on the DIV, the browser go to the update page.
The problem that I am facing is when the user clicks the checkbox to check for multi delete this will also go to the update page.
How I can disable this when the user click only on the checkbox.
Prevent the bubbling of the event on the checkbox. Try something like this:
$(".dbItem INPUT[type='checkbox']").click(function(evt) {
evt.stopPropagation();
});
easiest way I can see to do this would be to relocate the onclick to another div that is exclusively wrapped around everything but the checkbox. like this:
<div class="dbItem">
<div class="dbItemCheckbox">
<input name="se8" type="checkbox" value="<?php echo $admin->id; ?>" />
</div>
<div onClick="$(location).attr('href','updateUser.php?id=<?php echo $admin->id; ?>')" >
<div class="dbItemMessageIconAdmin"><img src="images/admin.png" alt="" width="20" height="23" border="0" /></div>
<div class="dpItemName"><?php echo $admin->username; ?></div>
<div class="dpItemTitle"><?php echo $te; ?></div>
<div style="left: 110px" class="dpItemDate"><?php echo $admin->registerDate; ?></div>
<div class="dpItemDelete"><img src="images/delete.png" alt="" width="11" height="10" border="0" /></div>
</div>
</div>
Either in the checkbox's onclick attribute, a script section (or external javascript file) you want to include an onclick handler for the checkbox.
$('input[name="se8"]').click(function(e){
e.stopPropagation();
});