in this issue, i use booster widgets tbcollapse to make some like a inbox in message menu, unread or new message is have status 0, so when i click the panel title in collapse widgets, it will open div with id #collapse, and change the status in database to be 1 (readed), its possible??? how?
<?php $collapse = $this->beginWidget('booster.widgets.TbCollapse');
<div class="panel-group" id="accordion">
<?php for ($a = 0; $a<count($pesan); $a++){ ; ?>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $a ;?>">
<?php echo $pesan[$a]["sender"] ;?>
</a>
</h4>
</div>
<div id="collapse<?php echo $a ;?>" class="panel-collapse collapse">
<div class="panel-body">
<?php echo $pesan[$a]["message"] ;?>
</div>
</div>
</div>
<?php }; ?>
</div>
Just use bootstrap's collapse events to trigger an ajax call, for what you want probably the best option is the shown.bs.collapse event, for example:
$('#myCollapsible').on('shown.bs.collapse', function () {
//Get the id of the message and use ajax to update the database
});
Edit #1
A little example:
First add a custom id to your widget
<?php $collapse = $this->beginWidget('booster.widgets.TbCollapse',
array('id'=>"myCollapsible")
);?>
At the end of your view add a script tag, or you can register a script with yii's CClientScript. For the sake of simplicity I will use script tags
<script>
$(function(){
$('#myCollapsible').on('shown.bs.collapse', function (e) {
var target=$(e.target);//get shown element
if(target.attr('id')===$(this).attr('id'))return;//Event is fired on page load, ignore event on main collapse
$.post('controllerUrl',{messageId:$(e.target).attr("id")},function(data){//call server to update
//do something if everything was ok or display error
});
});
});
</script>
In your controller just add a method to update the message status
public function actionUpdateMessage{
MessageModel::model()->updateByPK($_POST['messageId'],'viewed'=>'1');//update the model whose id was sent, provide some validation if needed
return;//end processing
}
Hope this helps
Edit #2
In case you need to put more metadata for the ajax call, I recommend to use data attributes in your elements, so for example you could add an Id based on your database
<div id="collapse<?php echo $a ;?>" class="panel-collapse collapse"
data-messageId="<?php echo $pesan[$a]["id"] ;?>">
<div class="panel-body">
<?php echo $pesan[$a]["message"] ;?>
</div>
</div>
And in the javascript code you can retrieve the info with data method like the following
<script>
$(function(){
$('#myCollapsible').on('shown.bs.collapse', function (e) {
var target=$(e.target);//get shown element
if(target.attr('id')===$(this).attr('id'))return;//Event is fired on page load, ignore event on main collapse
$.post('controllerUrl',{messageId:$(e.target).data("messageId")},function(data){//call server to update
//do something if everything was ok or display error
});
});
});
</script>
Edit #3
If retrieving data attributes using jquery data method doesn't work, you still can access these attributes using attr method
$.post('controllerUrl',{messageId:target.attr("data-messageId")},function(data){//call server to update
//do something if everything was ok or display error
});
If the data attributes aproach doesn't work, you can also try with hidden fields like this:
Firs, instead of setting data-messageId attribute, add inside your panel-collapse div an input hidden like the following:
<div id="collapse<?php echo $a ;?>" class="panel-collapse collapse">
<input type="hidden" value="<?php echo $pesan[$a]["id"] ;?>"/>
<div class="panel-body">
<?php echo $pesan[$a]["message"] ;?>
</div>
</div>
Then, change the following in the javascript:
$.post('controllerUrl',{messageId:target.find("input").val()},function(data){//call server to update
//do something if everything was ok or display error
});
Related
i have this div in my homepage.php file:
<?php foreach($posts as $post): ?>
</div class="post>
<div class="options">
<div class="option"></div>
<div class="option"></div>
<div class="option"></div>
</div>
<div class="none editanddelete">
<button type="button" class="edit">edit</button>
<button type="button" class="delete">delete</button>
</div>
<div class="imageandname">
<img src="<?php echo $post->user_image ?>">
<div class="username"><?php echo $post->username ?></div>
</div>
<div class="post_body">
<?php echo $post->post_body ?><br>
</div>
</div>
<?php endforeach; ?>
the $posts is array that is coming from database through controller and each time i publish a post, the body will add new div like above with the data needed from the $post array, now as shown above, the child div with class "editanddelete" is hidden by giving class "none" which is display:none;
now with javascript i want to make an event where when i click on the child div with class="options", it toggles the "none" class of the child div with class="editanddelete", like the following:
post = document.querySelector('.post');
options = post.querySelector('.options');
editanddelete = options.querySelector('.editanddelete');
options.addEventListener('click', () => {
editanddelete.classList.toggle('none');
})
when i execute this code, it works fine on the first post (div) that is dynamically created, but when i add another post, the event will not work on the second post div, i tried to use querySelectorAll and loop "options" classes that will be created dynamically, but it just does not work as expected and the event affects other divs, what i want is to make the event for all divs, every div on it's own
You need to work with the same .editanddelete element as .options is clicked.
JS code could be like
var options = document.querySelector('.options');
// here maybe would be for cycle over options (I can't test it now)
options.addEventListener('click', () => {
this.parentNode.querySelector('.editanddelete').classList.toggle('none');
})
how do you pass the value to anchor tag on every click using jquery?
I have this code here.
I am trying to get value every time I click the button
//My HTML
<button id="a-selectNm" data-a_name="<?php echo $row['username']; ?>" data-toggle="modal" data-target="#selectNm">SELECT nursemaid</a>
//The modal
<div class="modal" id="selectNm">
<div class="card-body">
<h4 class="card-title">
<?php echo $row['username']; ?>
</h4>
</div>
</div>
//My jQuery code
jQuery(document).on('click', 'button#a-selectNm', function() {
var a_name = jQuery(this).data('a_name');
jQuery('.modal a[href="#a_name"]').val(a_name);
});
</script>
What is my mistake? what do I have to change?
Replace
jQuery('.modal a[href="#a_name"]').val(a_name);
with
jQuery('.modal a[href="#a_name"]').text(a_name);
I am not so into PHP and JavaScript and I have the following problem trying to pass a value from a main page to a popup page (defined into this main page).
I try to explain my situation in details:
I have an account.php page containing this link:
<a href="#" onclick="doRemoveBooking();">
<i class="fa fa-times"></i>
</a>
Clicking on this link it is performed the doRemoveBooking() JavaScript function that is defined in the same page into this block:
<script type="text/javascript">
//metodo richiamato al click del bottone "RIVENDI"
function doRemoveBooking(id){
console.info("Into doRemoveBooking");
$('.popUpRemoveBooking').magnificPopup({
items: {
src: '#remove-booking-popup'
}
// (optionally) other options
}).magnificPopup('open');
}
</script>
that opens a popup defined at the end of the dame account.php page by this div element:
<div class="popUpRemoveBooking">
<div id="remove-booking-popup" class=" white-popup-block mfp-hide">
<div class="fluid-container">
<div class="row">
<h2><?php echo $texts['CANCEL_BOOKING'] ?></h2>
<p>Sei veramente sicuro di voler cancellare la prenotazione?</p>
<?php echo $id_booking; ?>
</div>
</div>
</div>
</div>
This popup is correctly opened but I obtain an error message when it try to render this line:
<?php echo $id_booking; ?>
I know that it is wrong. As you can see my JavaScript function take an id as parameter:
doRemoveBooking(id)
How can I print this id received as input parameter from the JavaScript function used to open the popup in the popup body? (instead the wrong ). What is a smart and neat way to do it?
Replace <?php echo $id_booking; ?> with <span id="bookingID"></span>
Then replace the content of that <span> in your function:
function doRemoveBooking(id){
console.info("Into doRemoveBooking");
$('#bookingID').html(id); // <---------------- Add this line
$('.popUpRemoveBooking').magnificPopup({
items: {
src: '#remove-booking-popup'
}
// (optionally) other options
}).magnificPopup('open');
}
Don't forget to call doRemoveBooking(id) with the correct booking-id !
enter image description hereThis is my index_category.php.
<?php
include("db.php");
$sql="SELECT * from tcategory";
$conect= mysqli_query($conn, $sql) or die ("Failed To Connect.");
while($rows= mysqli_fetch_array($conect, MYSQLI_ASSOC)){ ?>
<div class="dialog-outer" data="<?php echo $rows['cat_id']; ?>" onclick="openNav()">
<div class="dialog-inner">
<?php echo $rows['cat_nm'];?>
</div>
</div>
<?php }
?>
This is the side nav to which I want to pass the data of div
<div id="mySidenav" class="sidenav">
<h3 class="sub"><i class="fa fa-arrow-right" aria-hidden="true"></i><strong> Sub Category</strong></h3>
×
<div id="result">
<?php include("functions/sub_category.php")?>
</div>
</div>
<script>
function openNav() {
$("#mySidenav").attr("style","width:250px");
var id=$(".dialog-outer").attr("data");
alert(id);
$.post('functions/sub_category.php',{id: id},function(data){
$('#result').html(data);
});
}
function closeNav() {
$("#mySidenav").attr("style","width:0px");
}
</script>
The problem is it is taking data=1 only but in network it showing as data=1 data=2 data=3 so on...
How to pass all the values from div in index_category.php to script in index.php
as u can see in the image i want to filter the sub category based on category. But when i click on any of the category it is taking only first value.But when u look in the image(inspect element) it is taking all the values as data=1 data=2 so on...when i click on category i want to get their respective id's.
If I understand correctly your your outer nav is repeated, that means that your $(".outer-nav") will return an array of elements not just one. You will need to iterate over them to read their data attributes. If you are looking to get just one specific one I would recommend using JQuery(since you are using it) selector for the click detection and from there working out the .outer-nav that you need.
Sorry if I did not understand your question correctly, but you use a weird mixture of pure JS and JQuery so it is a bit stange to read the code.
as #Aurus told, it is not only one element. You should modify like this:
===== 1st method =====
.... onclick="openNav(this)">
and the function too:
function openNav(element) {
...
var id=$(element).attr("data");
.....
}
===== 2nd method =====
<div class="dialog-outer" data="<?php echo $rows['cat_id']; ?>" onclick="openNav('oid_<?php echo $rows['cat_id']; ?>')" id="oid_<?php echo $rows['cat_id']; ?>">
and the function too:
function openNav(id) {
...
var id=$("#"+id).attr("data");
.....
}
I have an area on my Wordpress theme where I am showing info about a random taxonomy. Basically, the taxonomy is "playwrights" and I am featuring a random one on the home page. Here is the HTML:
<div id="home-top-right">
<?php
$allpw = get_terms( 'playwrights', 'hide_empty=0' );
$randpw = $allpw[ array_rand( $allpw ) ];
$randpw = get_term($randpw->term_id, 'playwrights');
$pwlink = get_term_link($randpw->term_id, 'playwrights');
?>
<div class="title">
Playwright Spotlight
<li class="fa fa-refresh refresh"></li>
</div>
<div class="content" id="p-spotlight">
<?php if (get_field('image', 'playwrights_'.$randpw->term_id)) { ?>
<div class="thumb">
<?php $imageid = get_field('image', 'playwrights_'.$randpw->term_id); ?>
<a href="<?php echo $pwlink; ?>">
<?php echo wp_get_attachment_image($imageid, 'pwthumb'); ?>
</a>
</div>
<?php } ?>
<div class="text">
<div class="sub-title">
<?php echo $randpw->name; ?>
</div>
<?php echo print_excerpt('', '200'); ?>
</div>
</div>
</div>
I want to be able to click a button (in the code, it is the <i> tag) and reload just that section (not the whole page) with a new random taxonomy term (playwright). I'm not great at JS/jquery and I'm not able to find a tutorial online that gets me where I need to go, especially considering the exchange between post data and the js function.
How should I go about this?
By default, WordPress has an admin-ajax.php file which you can send AJAX calls to. You can create a hook that is linked to your own custom function in which you can do the stuff you want, like getting the random term and send it back to the client.
Then you can pass a value to your AJAX call, called 'action'. When admin-ajax.php is getting a POST request with the action you 'hooked', your custom function is being executed.
Have a look at the links below for a more detailed explanation:
http://premium.wpmudev.org/blog/how-to-use-ajax-with-php-on-your-wp-site-without-a-plugin/
http://codex.wordpress.org/AJAX_in_Plugins