here my code.
Save |
Unsave |
In my Ajax code, when user clicks on Save, it saves one information into my mysql table. Then, when he clicks on unsave, it deletes it.
What i want to do:
When user clicks on save, it displays Unsave instead save.
I've tried with
$('#bar_save').text(' Unsave'); but it doesn't work.
Is it possible to do it ?
You can set bar_unsave to be hidden by default. Show bar_unsave on user 'save' action and hide bar_save.
$('#bar_save').addClass("hidden");
$('#bar_unsave').removeClass("hidden");
I can't use your methode hidden because i do mysql query.
Here my whole code.
<?php
if($fgmembersite->CheckLogin()) {
<?php
$req = $bdd->query('SELECT * FROM membres_save WHERE id=\'' . $_GET['id'] . '\'');
if ($req->rowCount() == 0) {
?>
<span id ="bar_save_span"> Save</span> |
<?php }
else {
?>
<span id ="bar_unsave_span"> Unsave </span> |
<?php } } ?>
I've tried with
$('#dbar_save_span').replaceWith(' Unsave ');
When user clicks on save, it display this html code but when user clicks on unsave, my ajax function doesn't work.
Related
I have a navbar on my users' panel. A part of the navbar indicates if the user has a new unread message. In this case a badge will appear next to an icon. I've simplified the codes here to make them easier to understand and read.
So this is the simplified HTML code:
<div class="btn-group msg-box">
<i class="fa fa-envelope"></i>
// this is the default state, no badge is shown
</div>
Here is the AJAX request which calls a custom function every 10 seconds:
<script type='text/javascript'>
$(document).ready(function(){
setInterval(checkMsg,10000);
});
function checkMsg(){
$.get('ajax.php',{user_id : <?php echo $user_id; ?>},function(data){
$('.msg-box').html(data);
});
}
</script>
And this is the ajax.php file content:
if(isset($_GET['user_id']){
// a few lines of code here to check if that particular user has any unread message.
// In such case a variable name $newMessage is set to 1. Now ... :
if($newMessage>0){
$data='
<i class="fa fa-envelope"></i>
<span class="badge"><i class="fa fa-info"></i></span>
';
}else{
$data='
<i class="fa fa-envelope"></i>
';
}
echo $data;
}
First of all, I know the way I've written this AJAX request is very rookie, but it works fine anyway, up to one point!
In case the user has a new message, and if they stay on a page, the code runs perfectly and shows the badge. But when the user refreshes the page or goes to another page, even-though they have a new message, that default state is shown again where there's no badge. And I know it's of course because I have specified a default state via HTML codes.
I need to know how I can keep the result of the AJAX request regardless of how many times the user refreshes the page or goes to another page.
UPDATE
I tried storing the query result in a SESSION in my ajax.php file. So instead of $data I wrote $_SESSION['data'].
Back on my HTML I made the following change:
<div class="btn-group msg-box">
<?php
if(!isset($_SESSION['data'])){
?>
<i class="fa fa-envelope"></i>
<?php
}else{
echo $_SESSION['data'];
}
?>
</div>
I made this change because I considered the fact that SESSIONS, by definition, are created and accessed globally within the domain. So once it's set, it can be checked and used on all other pages.
So that only if that SESSION isn't set, the default state should be displayed. But that as well doesn't seem to have my desired result. Still the same thing happens.
Ok, answering my own question now. :)
My UPDATE seemed to be a good idea which I tried.
The problem there was that I had written session_start(); on my main PHP file which was included in all other PHP files of the project.
So I basically thought that when the ajax.php file is called, there's no need to write session_start(); again. Because ajax.php was called inside a PHP file that had session_start(); in it already. So, I was wrong!
Adding session_start(); to the beginning of my code in ajax.php simply fixed the issue.
I have two buttons in view that redirect to
own website
Customer Website
I am using 'codeigniter'. In this, I want to keep a condition the user can click on the "own website" button only one time. Then, that button should be disabled, i.e, only the "customer website" button should work.
To do this, I want to check if the customer id is present in the database. If yes, (i.e, there is customer id inserted) then, the "own website" button should be disabled.
If you're simply wanting to conditionally set HTML on load of page, you can do so with the below code (change it to apply to your db etc), but if you want to do it dynamically you will need to use a client side language to watch for events.
View Code:
// View - Own Site
<button class="button" id="own-button" data-customerId="<?= $customerId ?>" disabled="<?= $disabled ?>">Click Me!</button>
// View - Customer Site
<button class="button" id="customer-button">Click Me!</button>
CodeIgniter:
function index() {
$data["customerId"] = "1"; // Just an example
$data["disabled"] = $this->getButtonStatus($data["customerId"]);
$this->load->view("ownsite/index", $data);
}
// get current button status i.e. is there anything in the DB
private function getButtonStatus($customerId) {
if(!$customerId) {
return FALSE;
}
$this->load->database();
$disabled = $this->db->select("customerId")
->where("customerId", $customerId)
->get("myTable");
return $disabled->num_rows() > 0 ? TRUE : FALSE;
}
I succeed to use Ajax with Yii framework.
I renderPartial a form from within a list of post.
What I want to do is to prevent refresh when the user click on the ajaxbutton in the form.
In the beginning of the form I used the following code to activate ajax
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'post-form',
'enableAjaxValidation'=>true,
'enableClientValidation'=>true,
)); ?>
and at the end of the page I simply have the ajaxbutton
<?php echo CHtml::ajaxSubmitButton('Save'); ?>
in the action controller I have the following
if(isset($_POST['ajax']) && $_POST['ajax']==='comment-form')
{
echo CActiveForm::validate($comment);
Yii::app()->end();
}
When I click on the ajax button, it saves the data but refresh the page, so it display the form.
What I want is to stay on the page.
Is anyone to help ?
Thank you in advance.
you can prevent the page from refresh, or ask the user if he's sure he want to leave the page by this code:
window.onbeforeunload = function() {
return "Dude, are you sure you want to leave? Think of the kittens!";
}
you can check this question: Prevent any form of page refresh using jQuery/Javascript
I think you have some thing like $this->redirect( ... ));
in your controller after $model->save() , right?
so don't redirect there
Refer to my code below, when user click on en button, the content will be changed to English, while clicking tw button, the content will be changed to Chinese.
However, the page will be refreshed each time when user click either en or tw button. I want to ask how can I implement AJAX content update in this case?
The result is when user click either en or tw button, the page won't be refreshed to change the content language.
Thanks
I have refer to Yii docs here, but seem that it is not appropriate for my case
C:\wamp\www\website\protected\views\site\index.php
<?php
$lang = isset($_GET["lang"]) ? $_GET["lang"] : "en_uk";
$lang = $lang == "en" ? "en_uk" : "zh_tw";
Yii::app()->setLanguage($lang);
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
<input type="submit" value="en" name="lang" />
<input type="submit" value="tw" name="lang" />
</form>
<div class="main">
<?php echo Yii::t(Yii::app()->controller->id, "Causeway Bay"); ?>
</div>
Best practice is to reload the page in these cases, because usually you have to update so much, that it is just not worth it.
That said, CHtml's ajaxSubmitButton is the cleanest way to implement this, because you can map every event of your call very easily. It looks something like this:
<?php
echo CHtml::ajaxSubmitButton('en', CHtml::normalizeUrl(array('site/changeLanguage')),
array(
'error'=>'js:function(){
alert("error");
}',
//if you add a return false in this, it will not submit.
'beforeSend'=>'js:function(){
alert("beforeSend");
}',
'success'=>'js:function(data){
alert("success, data from server: "+data);
}',
'complete'=>'js:function(){
alert("complete");
}',
//'update'=>'#where_to_put_the_response',
)
);
?>
You don't have to use every parameter of course. The update parameter can update a HTML tag instantly.
EDIT:
This can be done easily if you use the controller's renderPartial method, for instance in your site controller if you have the action responsible for the index.
public function actionIndex(){
//get variables, etc
if(Yii::app()->request->isAjaxRequest) {
$lang = $_POST['nameOfSubmit'];
}else {
//...
}
//if the 3rd parameter is true, the method returns the generated HTML to a variable
$page = $this->renderPartial('_page', array(/*parameters*/ ), true);
echo $page;
}
And then, in your view file you can simply have
<?php echo CHtml::ajaxSubmitButton('en', CHtml::normalizeUrl(array('site/index')),
array('update'=>'#content_div',));?>
and
<?php echo CHtml::ajaxSubmitButton('tw', CHtml::normalizeUrl(array('site/index')),
array('update'=>'#content_div',));?>
I created a confirmation page for deleting an item. This works perfectly.
Now I want to appear the confirmation page in fancybox, still passing all the variables and delete the data or close the dialog.
It's important that the process still works as it does now (delete->confirmationpage->redirect/deletion) so that users with javascript disabled can perform these actions without a problem.
Now have I been reading about zend framework,ajax, json and more, but the more I read, the less I understand.
So in a nutshell, my question:
I want to pass a variable to the fancybox and if 'yes' perform the delete action or on 'no' close the dialog. This within the zend framework and jquery.
Any advice or tips are greatly appreciated!
You need to use content switching in your ajax which will then render your action appropriately, for example:
function confirmDeleteAction() {
if($this->_request->isXmlHttpRequest()) {
//This is ajax so we want to disable the layout
$this->_helper->layout->disableLayout();
//Think about whether you want to use a different view here using: viewRenderer('yourview')
}
//The normal code can go here
}
function deleteAction() {
//You probably don't want to show anything here, just do the delete logic and redirect therefore you don't need to worry where it's coming from
}
And in your fancybox, have a view that has a form and two buttons, the form should point to your delete action with the id of whatever your deleting as a get param. Set some javascript up that says something like (and this is mootools code, but you can convert it easily):
$('confirmButton').addEvent('click', function(e) {
e.preventDefault();
this.getParent('form').submit();
}
$('cancelButton').addEvent('click', function(e) {
e.preventDefault();
$('fancyBox').destroy(); //I'm not sure it has an id of fancyBox, never used it
}
Came across the question today and figured I could give it a fresh look. For Zend Framework the solution is really simple:
This is how the action looks:
public function deleteAction()
{
$this->_helper->layout()->disableLayout();
$this->view->news = $this->newsService->GetNews($this->_getParam('id'));
if($this->getRequest()->isPost())
{
if($this->getRequest()->getPost('delete') == 'Yes')
{
$this->newsService->DeleteNews($this->_getParam('id'), $this->view->user->username, $this->view->translate('deleted: ').'<strong>'.$this->view->pages[0]['title'].'</strong>');
$this->_helper->flashMessenger(array('message' => $this->view->translate('The page is deleted'), 'status' => 'success'));
$this->_helper->redirectToIndex();
}
elseif($this->getRequest()->getPost('delete') == 'No')
{
$this->_helper->flashMessenger(array('message' => $this->view->translate('The page is <u>not</u> deleted'), 'status' => 'notice'));
$this->_helper->redirectToIndex();
}
}
}
The delete.phtml
<div>
<h2><?php echo $this->translate('Delete news'); ?></h2>
<?php
foreach($this->news as $news)
{
?>
<p>
<?php echo $this->translate('You are now deleting <strong>\'').$news['title'].$this->translate('\'</strong>. Are you sure about this?'); ?>
</p>
<p>
<?php echo $this->translate('<strong>Note! </strong>This action is inreversable, even for us!'); ?>
</p>
<form action="<?php echo $this->baseUrl(false).'/news/index/delete/'.$news['id']; ?>" method="post">
<?php
}
?>
<input class="submit deleteYes" type="submit" name="delete" value="<?php echo $this->translate('Yes'); ?>" />
<input class="submit deleteNo" type="submit" name="delete" value="<?php echo $this->translate('No'); ?>" />
</form>
And this is how the link to delete a file looks (within a foreach loop with my database results)
<a class="deleteConfirmation" href="<?php echo $this->baseUrl(false).'/news/index/delete/'.$news->id; ?>">delete</a>
This works like you would expect; when you click on delete the user goes to the delete confirmation page and redirects the user back to the index after the form is submitted. But I wanted the confirmation in a dialog (in my case I use fancybox). To achieve this, add the following jquery to your index:
$('.deleteConfirmation').fancybox({
// Normal fancybox parameters
ajax : {
type : "POST"
}
});