I have recursive menu function from DB.
I add some jquery codes to it.
I click plus symbol then i can see all parent nodes.
I will add: add edit delete record buttons to popover later.
I created click function to fa fa-cog, but it is always show to same id on alert.
I try from 2 days but i can not display correct clicked id in the jquery script codes.
i wanna display correct id in popover <a href="<?php echo $Linkid ;?>"</a> window. Thanks.
<?php
// Select all entries from the menu table
$result=mysqli_query($baglan, "SELECT * FROM posts ORDER BY sira ASC");
// Create a multidimensional array to conatin a list of items and parents
$menu = array(
'items' => array(),
'parents' => array()
);
// Builds the array lists with data from the menu table
while ($items = mysqli_fetch_assoc($result))
{
// Creates entry into items array with current menu item id ie. $menu['items'][1]
$menu['items'][$items['id']] = $items;
// Creates entry into parents array. Parents array contains a list of all items with children
$menu['parents'][$items['kat_id']][] = $items['id'];
}
// Menu builder function, parentId 0 is the root
function buildMenu($parent, $menu)
{
$html = "";
$buton = '<a class="buton"><button class="btn btn-default btn-xs"><i class="fa fa-plus"></i></button> </a>';
if (isset($menu['parents'][$parent])){
$html .= "<ul>";
$html .= '<div class="left" id="nav">';
foreach ($menu['parents'][$parent] as $itemId){
if(!isset($menu['parents'][$itemId])){
$Linkid = $menu['items'][$itemId]['id'];
$ayarbuton = '<a class="goster" id="'.$Linkid.'" href="#" data-toggle="tooltip" title="'.$Linkid.'"><button class="btn btn-danger btn-xs"><i class="fa fa-cog"></i></button> </a>';
$html .="<div class='editRecord'";
$html .= "<li>".$ayarbuton.$menu['items'][$itemId]['isim'].$menu['items'][$itemId]['id']."</li>";
$html .="</div>";
}
if(isset($menu['parents'][$itemId])){
$Linkid = $menu['items'][$itemId]['id'];
$html .= "<div class='bs-example'><div id='myTooltips'>";
$ayarbuton = '<a class="goster" id="'.$Linkid.'" href="#" data-toggle="tooltip" title="'.$Linkid.'"><button class="btn btn-danger btn-xs"><i class="fa fa-cog"></i></button> </a>';
$html .= "<li>".$buton.$ayarbuton . $menu['items'][$itemId]['isim']." ID = " .$Linkid;
$html .= buildMenu( $itemId, $menu );
$html .= "</div></div></li>";
}
}
$html .= '</div>';
$html .= "</ul>";
}
return $html;
}
echo buildMenu(0, $menu);
global $Linkid;
?>
<script type="text/javascript">
$(document).ready(function(){
$(".goster").click(function(){
var linkID = $(".goster").attr("id");
alert(linkID);
$("#myTooltips a").tooltip({
template : '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-head"><h3><span class="glyphicon glyphicon-info-sign"></span> <?php echo $Linkid ;?></h3></div><div class="tooltip-inner"></div></div>'
});
});
});
</script>
<script>
$('#nav .buton').css({cursor: "pointer"}).on('click', function(){
var txt = $(this).html() == '<button class="btn btn-default btn-xs"><i class="fa fa-plus"></i></button> '?'<button class="btn btn-default btn-xs"><i class="fa fa-minus"></i></button> ':'<button class="btn btn-default btn-xs"><i class="fa fa-plus"></i></button> ';
$(this).html(txt);
$(this).nextAll('ul').eq(0).slideToggle('fast');
})
</script>
With ".goster" selector you are selecting all the elements having goster class but no way of determine which one was actually clicked.
In order to get the specific clicked element, you can use this in the click callback. Try change your handler to
$(".goster").click(function(e){
var linkID = this.id;
alert(linkID);
});
finaly i will do it,
thanks all.
<script type="text/javascript">
$(document).ready(function(){
$(".goster").click(function(e){
var linkID = e.currentTarget.id; // e.target is the clicked element
$(".goster").attr("href", linkID); // this will change the link URL
});
$("#myTooltips a").tooltip({
template : '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-head"><h3><span class="glyphicon glyphicon-info-sign"></span> TOOLTIP</h3></div><div class="tooltip-inner"></div></div>'
});
});
</script>
Related
I have a blog where users can post their posts, other users registered on the platform can rate posts with a like or dislike. I have a problem with the fact that if the like button is pressed, is can also press the dislike button, which cannot do, is can only press one button at a time, like or dislike, not both. How can I do?
I use Bootstrap framework to HTML/CSS Style
Image what I would
Javascript:
<script>
window.onload = bindEvents;
function bindEvents() {
btn_events();
}
function btn_events() {
$('.btn_like').click(function(){
var row_id = $(this).attr("data-id4");
console.log ('Pressed button LIKE with id'+row_id);
/*other code to increment value of post with value = value + 1*/
});
$('.btn_dislike').click(function(){
var row_id = $(this).attr("data-id5");
console.log ('Pressed button DISLIKE with id'+row_id);
/*other code to increment value of post with value = value + 1*/
});
}
</script>
PHP:
echo '<div class="post"><p data-id0="'.$row["id_post"].'" >'.$user['nome']." ".$user['cognome']." <span class='time'>".time_since(time() - strtotime($row['datetime']))." ago </span> </p>";
echo '<p data-id1="'.$row["id_post"].'">'.$row['comune']."</p>";
echo '<p data-id2="'.$row["id_post"].'">'.$row['indirizzo']."</p>";
echo '<p data-id3="'.$row["id_post"].'">'.$row['descrizione']."</p>";
echo '<button type="button" name="view_details" class="btn btn-success btn-xs btn_like" data-id4="'.$row["id_post"].'">LIKE</button>';
echo ' ';
echo '<button type="button" name="view_details" class="btn btn-danger btn-xs btn_dislike" data-id5="'.$row["id_post"].'">DISLIKE</button>';
echo '</div>';
i try to get the value from the data attribute and pass to the java script variable but it give the undefined value
$(document).on("click","#edit_cust",function(){
var customer_id=$(this).data("id");
var customer_name=$(this).data("name");
var customer_phone=$(this).data("phone");
var customer_addr=$(this).data("mail");
var customer_mail=$(this).data("phone");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='btn-group' role='group' >
<a id="edit_cust" data-target="#edit" data-toggle="modal"><button
type='button' class='btn btn-primary btn-sm' data-id="<?php echo
$customer["cus_id"]; ?>" data-name="<?php echo $customer["cus_name"]; ?>"
data-phone="<?php echo $customer["cus_phone"]; ?>" data-addr="<?php echo
$customer["cus_address"]; ?>" data-mail="<?php echo $customer["cus_mail"]; ?
>"><span class="fas fa-user-edit edit_data" aria-hidden='true'></span>
</button></a>
</div>
All those data attributes are present for the inner button so get the button within the clicked element.
$(document).on("click","#edit_cust",function(){
// cache buttton reference
var $btn = $('button', this);
// or $btn = $(this).find('button');
// get values from button
var customer_id = $(btn.data("id");
var customer_name = $btn.data("name");
var customer_phone = $btn.data("phone");
var customer_addr = $btn.data("mail");
var customer_mail = $btn.data("phone");
});
<?php
foreach($fetch_file as $row)
{
echo '<tr>';
echo '<td>' . base64_decode($row->file_perm_desc) . '</td>';
echo '<td style = "text-align:center;">' . date_format((date_create($row->date_entry)),"M d, Y") . '</td>';
echo '<td class = "text-center"><a class="btn btn-info" >
<input type = "hidden" name = "editid" class = "openid" value = ' . $row->file_perm_id . '>
<i class="glyphicon glyphicon-folder-open"></td>';
echo '<td class = "text-center"><a class="btn btn-warning" >
<input type = "hidden" name = "editid" class = "unpublishid" value = ' . $row->file_perm_id . '>
<i class="glyphicon glyphicon-comment"></td>';
echo '<td class = "text-center"><a class="btn btn-danger" >
<input type = "hidden" name = "editid" class = "deleteid" value = ' . $row->file_perm_id . '>
<i class="glyphicon glyphicon-trash"></td>';
echo '<td class = "text-center"><a class="btn btn-success" >
<input type = "hidden" name = "editid" class = "downloadid" value = ' . $row->file_perm_id . '>
<i class="glyphicon glyphicon-download"></td>';
echo '</tr>';
}
?>
$('.btn-info').click(function()
{
var id = $(this).find('.openid').val();
window.location.replace("<?php echo base_url();?>ClientCont/List_Files");
});
I have this onlick listener from the value above on the user click the button it should go to the controller but I dont know how can I call controller and pass the value from id. this is in codeigniter framework hope somebody can help thanks
Hope this will help you
The html code is wrong. Closing anchor tag ("</a>") is missing. Fix the html as below
'<td class = "text-center"><a class="btn btn-info" ><input type = "hidden" name = "editid" class = "openid" value = ' . $row->file_perm_id . '><i class="glyphicon glyphicon-folder-open">**</a>**</td>'
Try the below javascript code.
$('.btn-info').click(function() {
var id = $(this).find('input').val();
var url = "<?php echo base_url();>ClientCont/List_Files?id="+id;
window.location.replace(url);
});
Hope this will help you :
$('.btn-info').click(function() {
var id = $(this).find('.openid').val();
if (id)
{
window.location.href = "<?php echo base_url('ClientCont/List_Files/');?>" + id;
}
});
Your controller's List_Files method should be like this :
public function List_Files($id)
{
/*echo passed id from the js here like this */
echo $id;
}
I have this button
<a class="btn btn-sm btn-success" href="javascript:void(0)" title="info" onclick="delete_province('."'".$info->ID."'".')"><i class="glyphicon glyphicon glyphicon-question-sign"></i> Show File</a>';
that i want to change that button function with something like this
<a href = '<?php echo base_url().'Employees/updatepersonalinfo/'.$data; ?>' class = 'btn btn-info pull-right fa fa-edit'>  Update</a>
please notice here
echo base_url().'Employees/updatepersonalinfo/'.$data;
that im passing a data at the url for me to use the function $this->uri->segment()
how can i make the button work like href? and is there any other way that the templates wont load anymore just some of the div? thanks in advance
and also the .$data that i want to pass came from , a json?
heres additional codes to be clear
here is the controller with the button
public function index()
{
$data['content_view'] = 'TaxValues/taxvalues_read';
$this->templates->admin_template($data);
}
public function ajax_list()
{
$list = $this->TaxValues_Model->get_datatables();
$data = array();
$no = $_POST['start'];
foreach ($list as $info) {
$no++;
$row = array();
$row[] = $info->RANGE_NO;
$row[] = $info->TAX;
$row[] = $info->PERCENTAGE." %";
$row[] = $info->VALUE;
$row[] = $info->FREQUENCY;
//add html for action
$row[] = '<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Edit" onclick="edit_provinces('."'".$info->TAX_ID."'".')"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
<a class="btn btn-sm btn-danger" href="javascript:void(0)" title="Delete" onclick="delete_province('."'".$info->TAX_ID."'".')"><i class="glyphicon glyphicon-trash"></i> Delete</a>';
$data[] = $row;
}
$output = array(
"draw" => $_POST['draw'],
"recordsTotal" => $this->TaxValues_Model->count_all(),
"recordsFiltered" => $this->TaxValues_Model->count_filtered(),
"data" => $data,
);
//output to json format
echo json_encode($output);
}
i wanted to pass the $info->TAX_ID so that for example, i want to access my existing update code,
controller function of update
public function updateinfo(){
$data['content'] = $this->TaxValues_Model->info();
$data['content_view'] = 'TaxValues/edit';
$this->templates->admin_template($data);
}
model function of update
public function info(){
$query = $this->db->get_where('emp_fi_p', array('ID_NUM' => $this->uri->segment(3)));
return $query->row();
}
I been trying to pass any value from my window modal child to the parent window, but it doesn't work. The modal doesn't hide or send the value to the parent window when I click Save.
application.php
<body>
<h3 class="h3 black">Application</h3>
<form class="form-horizontal" method="post" action="admin-controller.php" name="f1">
<input type="text" name="p_name" id="n1" >
<?php
include 'includes/calendar.php';
$calendar = new Calendar();
echo $calendar->show();
?>
</form>
</body>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0 /jquery.validate.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript">
function post_value(){
window.opener.document.f1.p_name = document.myform.skill_id_t.value;
$('#modal_1').modal('hide');
}
</script>
calendar.php
<?php
class Calendar {
public function show() {
//some code
$html .=$this->_showDay($someValues);
//some code
}
private function _showDay($cellNumber){
// Build up the html.
$html = '<td id="' . $this->currentDate . '" class="td-top-text ' . $classNameOne . $classNameTwo . '">';
//Radio button that open the Modal window
$html .= '<input type="radio" data-toggle="modal" data-target="#modal_1" name="schedule_id" value="'. $shedule_id.'">';
//singleModal
$html .=$this->_singleModal();
$html .= '</td>';
return $html;
}
//child window
public function _singleModal(){
//Single Modal
$html = '<form name="myform" method="post" action="">';
$html .= '<div class="modal fade" id="modal_1" role="dialog">';//Modal open
$html .= '<div class="modal-dialog">';//Modal Dialog open
$html .= '<div class="modal-content">';//Modal-Content Open
$html .= '<div class="modal-header">';//Modal-Header open
$html .= '<button type="button" class="close" data-dismiss="modal">×</button>';//bbutton
$html .= '<h4 class="modal-title bold cyan">Sign Up (Single)</h4>';//Title H4
$html .= ' </div>';//Modal-header Close
$html .= '<div class="modal-body">';//Modal-body open
//Type something to pass to parent window
$html .= '<input name="skill_id_t" type="text">';
$html .= '</div>';//Modal-body close
$html .= '<div class="modal-footer">';//Footer open
$html .= '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';//button
$html .= '<input onclick="post_value();" id="save" type="button" name="save-details" value="Save">';//input
$html .= '</div>';//Footer Close
$html .= '</div>';//Modal-content close
$html .= '</div>';//Modal Dialog Close
$html .= '</div>';//Modal close
$html .= '</form>';
return $html;
}
}
I read other posts and according to them, the problem could be javascript because I cant use data-target="#modal_1" with javascript so I tried to delete the target and just add onclick call a function into my <input name="schedule_id"> to do $(#modal_1).modal('show'); but still the $(#modal_1).modal('hide'); doesn't work.
I also had tag php because according to other posts, I need to include the javascript into my php (calendar.php) and not in my application.php
Edit
I also got some error every time I click on Save
TypeError: opener is null
Tried to fix it by adding window.opener... but it didn't work either
New Edit:
I have change my js code to this:
$(function() {
$('#btnLaunch_1').click(function() {
$('#modal_1').modal('show');
});
$('#btnSave_1').click(function() {
opener.document.f1.p_name = document.myform.skill_id_t.value;
$('#modal_1').modal('hide');
});
$('#cancel_1').click(function() {
$('#modal_1').modal('hide');
});
});
and I remove everything that have to be with data-target including the one that close the window data-dismiss. And, I realized that the problem is this line opener.document.f1.p_name = document.myform.skill_id_t.value; for some reason this line fail by giving the above error. ...opener is null
Pleaseeee helpp =/ II am trying hard here....
So, after googling more and more and follow some suggestions from the first comment, I believe that the best way to get the values from a bootstrap modal child window and add it to the parent window is by using jQuery in this way:
$(function() {
//open modal
$('#btnLaunch_1').click(function() {
$('#modal_1').modal('show');//no need data-target just <input id="">
});
$('#btnSave_1').click(function() {
//Get the value from the child into a variable
value = $('[name="skill_id_1"]').val();
//Set the value to the parent window
$('[name="p_name"]').val(value);
//make the modal dismiss (no need data-target)
$('#modal_1').modal('hide');
});
//if user click cancel instead of use data-dismiss, just hide it
$('#cancel_1').click(function() {
$('#modal_1').modal('hide');
});
});
If you find a better solution that this one, please let me know
Thanks
Your opener form name is wrong;
Change
window.opener.document.f1.p_name to
window.opener.document.myform.p_name
as you refer
<form name="myform" method="post" action="">