I have some content that is fed in from mysql that, when clicked should fire an alert()...
however, this is not working...
here is my code for the code that is fed in from php/get_answers.php
<?php session_start(); ?>
<?php require_once("../includes/include_all.php"); ?>
<?php $answers = $question->get_answers_for_question($_GET['id']); ?>
<?php while($row = $answers->fetch_array()){ ?>
<!-- ALL ANSWERS HERE -->
<div class = 'answer-row'>
<div class = 'answer-side'>
<div class = 'arrow-contain-answer' type = 'answer' id = 'arrow-up' answer-id = '<?php echo $row["id"]; ?>'></div>
<div class = 'answer-votes-contain'>
<?php echo $row['popularity']; ?>
</div>
<div class = 'arrow-contain-answer' id = 'arrow-down'answer-id = '<?php echo $row["id"]; ?>'></div>
</div>
<div class = 'answer-content'>
<?php
echo $row['content'];
?>
</div>
<div class = 'actions'>
<a href = '#' class= 'add-comment' id = '<?php echo $row["id"]; ?>'> add comment </a>
</div>
</div>
<?php } ?>
and here is the jquery on the page that it is displayed on:
$(".arrow-contain-answer").click(function(){
alert();
});
What I want to happen is when someone clicks the element with the class of 'arrow-contain-answer' an event will occur..
I think I have had problems before when elements are being 'fed' into the page via mysql/php.
$(document).on("click", ".arrow-contain-answer", function(){
alert();
});
Try this way for dynamic added elements!
even better(performancewise) if you delegate it with the closest static element(parent) which is present in the document when dynamic fed element is added.
$('.answer-row').on("click", ".arrow-contain-answer", function(){
alert('clicked');
});
to read more about on delegated event
Related
I am new to ajax, is there a way you can help me, how to disable all items once click is successful:
Here is my code for ajax:
if (!parent.hasClass('.disabled')) {
// vote up action
if (action == 'click') {
alert("test");
};
//how do i add disabled function on a particular div
// add disabled class with .item
parent.addClass('.disabled');
};
here is my index:
<?php while($row = mysql_fetch_array($query)): ?>
<div class="item" data-postid="<?php echo $row['recipe_id'] ?>" data-score="<?php echo $row['vote'] ?>">
<div class="vote-span"><!-- voting-->
<div class="vote" data-action="up" title="Vote up">
<i class="icon-chevron-up"></i>
</div><!--vote up-->
<div class="vote-score"><?php echo $row['vote'] ?></div>
</div>
<div class="post"><!-- post data -->
<p><?php echo $row['recipe_title'] ?></p>
</div>
</div><!--item-->
i jst want to disable the loop icon-chevron-up class.not just one but all.
Actually no ajax call needed here. I will only be done by using jquery. See the code
$(document).ready(function(){
$('.item').click(function(){
if (!parent.hasClass('.disabled')) {
parent.addClass('.disabled');
}
});
});
Here you have not mentioned, on what click you need the action, so i consider that on the div contains class='item', the action will be performed. I hope it will help.
This is my jQuery code
<script>
$(document).ready(function() {
$('#countries').change(function(){
$('#countriesForm').submit();
});
});
</script>
and my php code looks like this
<form action="<?php echo $this->createUrl($this->id."/".$this->action->id); ?>" id="countriesForm" method='POST'>
<?php echo CHtml::dropDownList('countries', $select = array(),
CHtml::listData($countries, 'code', 'name'));
?>
<form>
<div class='description'></div>
Can someone pls help me how to get echo/print name or code of the selected country into the div .description.
And how to send the selected code to other php script.
It can be like
<div class='description'><?php
if( isset($_POST['countries']) ) {
echo CHtml::encode($_POST['countries']);
}
?></div>
<?php
$controller = Yii::app()->controller->id;
$action = Yii::app()->controller->action->id;
?>
Using this, you get the controller and action performed.
<li <?php
if ($controller=="site"&&$action=="index"){
echo 'class="active"'; } ?> >
<?php echo CHtml::link('Home',array('site/index')); ?>
</li>
I am using Jquery RateIt plugin with the view more button.
so In my project i am showing restaurant rating with these plugin by default i am displaying first 5 rating.Then after 5 records i am displaying other content through ajax so in the content loded through ajax rating is not being showd i am using readonly mode..If anyone can help thanks in advance
foreach($list_review as $row): ?>
<div class="user_reviews_data">
<div class="width-20 float-left">
<span class="padleft-10"><?php echo $row->User; ?> </span>
<br/>
<span class="padleft-10">
**<div class="rateit" data-rateit-value="<?php echo $row->Rating;?>" data-rateit-ispreset="true" data-rateit-readonly="true"></div>**
</span>
<div class="muted padleft-10 float-left"><small><?php echo date('dS M Y' ,strtotime($row->CreatedDate)); ?></small></div>
</div>
<div class="width-80 float-left"><?php echo $row->Feedback;?></div>
<span class="report_span">Report this Feedback <img src="<?php echo base_url();?>themes/images/FLAG_GREY.png"></span>
</div>
<?php
$msg_id=$row->Id;
endforeach;?>
</div>
<div id="more<?php echo $msg_id; ?>" class="btn-container center_text morebox">
View More
</div>
Now code of jquery
/*view More Button*/
$('.more').live("click",function()
{
var this_tag = $(this);
var ID = $(this).attr("id");
if(ID)
{
$.post(siteUrl+"ajax/ajax_more",{lastmsg:ID,restid:$(this_tag).data("restid")},function(html){
$("ol#updates").append(html);
$("#more"+ID).remove();// removing old more button
});
}
else
{
$(".morebox").html('The End');// no results
}
return false;
});
I am adding content on view more button click through ajax ajax code is same as above code
I am Using this plugin http://www.radioactivethinking.com/rateit/example/example.htm
In the $.post success handler you should invoke rateit again via JavaScript after you append the HTML like so:
$("ol#updates").append(html);
$(".rateit").rateit();
Replace $(this_tag) with either this_tag or $(this) in your ajax call.
You should use var this_tag = this; instead of using var this_tag = $(this);
OR try var $(this_tag) = $(this);
I have spent the last several hours trying to simply post the data (text/html) that was entered in the ckeditor (textarea) to the PHP file.
Their API claims that the data automatically posts the data on form submissions, but it does not, it returns nothing.
EDIT: here is the real code:
<?php
require("fns.php");
// grab tab content from database
$tab = array();
$query ="SELECT * FROM tabs";
$db_conn = db_connect();
$results = mysql_query($query,$db_conn);
while($row = mysql_fetch_array($results))
{
$tab[]= $row;
}
// form validation
if($_POST['btnSave'])
{
// grab selected tab ID
$tabId = $_POST['tabId'];
$title = $_POST['txtTitle'];
$content = $_POST['ckeditor'];
// all fields required
if(isset($tabId) && isset($title) && isset($content))
{
// update recorde where id = tabId
$query = "UPDATE tabs SET title = '$title', content = '$content' WHERE id = $tabId";
if($content !== "")
{
if(mysql_query($query,$db_conn))
{
$message = "<h3 style='color:#003300;'>Changes Saved!</h3><br /><p>".$content."</p>";
header("Location:testtabs.php");
}
}
else
{
$message ="<h3 style='color: #950000;'>Content cannot be blank!</h3>";
}
}
}
?>
<!-- in head section -->
<script type="text/javascript">
$(document).ready(function() {
// inflate ckeditor
$('#ckeditor').ckeditor();
//track selected tab
var currentId = -1;
// Tab initialization
var $tabs = $('#tabs').tabs({
select: function(event, ui){
/*
ui.index: zero based index selected tab
ui.tab: anchor element of the selected tab
ui.panel: element containing the content for the selected tab
*/
// get current tab ID for php script
var currentId = ui.index + 1;
$("#tabId").val(currentId);
var tabName = $(ui.tab).text();
var content = $(ui.panel).html();
// swap title
$( '#title' ).val( tabName );
// swap content
$("#ckeditor").val(content);
}
});
});
<body>
<?php echo $message; ?>
<div id="tabs">
<ul>
<li><?php echo $tab[0]['title'];?></li>
<li><?php echo $tab[1]['title'];?></li>
<li><?php echo $tab[2]['title'];?></li>
</ul>
<div id="tabs-1">
<div class="content">
<?php echo $tab[0]['content']; ?>
</div>
</div>
<div id="tabs-2">
<div class="content">
<?php echo $tab[1]['content']; ?>
</div>
</div>
<div id="tabs-3">
<div class="content">
<?php echo $tab[2]['content']; ?>
</div>
</div>
</div>
<?php
if (isset($_SESSION['valid_user']) && ($_SESSION['account_type'] == 'ADMIN'))
{
// display editor with tab 1 content
?>
<table id="tab-editor">
<form action = 'testtabs.php' method ='post'>
<input type="hidden" id="tabId" name ="tabId" value="-1"/>
<tr><td>Title: <input type='text' name='txtTitle' id='title' value='<?php echo $tab[0]['title'];?>'/></td></tr>
<tr><td>Tab Content:</td></tr><tr><td> <textarea name='ckeditor' id='ckeditor' class='tab-editor'><?php //echo $tab[0]['content'];?></textarea></td></tr>
<tr><td><input type='submit' name='btnSave' value='Save Changes' /></td>
</form>
</table>
<?php
}
?>
CKEditor create an istance of CKEditor from a textarea (maybe even from other elements, I don't know that) using the content of the textarea to populate the editor.
Anyway when you use jQuery:
$('#ckeditor').val("Initial text (test)");
you're putting text inside the textarea tag.
After you create a CKEditor instance you'll need to use CKEditor methods to get the data:
http://docs.cksource.com/ckeditor_api/
Specifically I think you'll need:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData
PS: sorry for my bad english
EDIT: hadn't seen the edit, sorry
Reverted back to the traditional ckeditor javascript, works fine now...
CKEDITOR.replace( 'ckeditor' );
// Tab initialization
// Tab initialization
var $tabs = $('#tabs').tabs({
select: function(event, ui){
/*
ui.index: zero based index selected tab
ui.tab: anchor element of the selected tab
ui.panel: element containing the content for the selected tab
*/
// get current tab ID for php script
var currentId = ui.index + 1;
$("#tabId").val(currentId);
var tabName = $(ui.tab).text();
var content = $(ui.panel).html();
// swap title
$( '#title' ).val( tabName );
// swap content
CKEDITOR.instances['ckeditor'].setData(content);
}
});
Here is the JavaScript I use to animate slider (fade effect) of the content I read from database:
<script language="javascript">
jQuery(document).ready(function ()
{
var terms = ["span_1","span_2"];
var i = 0;
function rotateTerm() {
jQuery("#text-content").fadeOut(200, function() {
jQuery(this).text(jQuery('#text-slider .'+terms[i]).html()+i).fadeIn(200);
});
jQuery("#title-content").fadeOut(200, function() {
jQuery(this).text(jQuery('#title-slider .'+terms[i]).html()+i).fadeIn(200);
i == terms.length - 1 ? i=0 : i++;
});
}
rotateTerm();
setInterval(rotateTerm, 1000);
});
</script>
And here is the PHP code I use:
<?php
if (!empty($testLst)) :
$num=1;
foreach($testLst as $key=>$item):
$item->slug = $item->id;
$item->catslug = $item->catid ;
?><div id="hidden-content" style="display:none;">
<div id="title-slider">
<span class="<?php echo 'span_'.$num; ?>">
<h4><a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($item->id, $item->catid)); ?>">
<?php echo $item->title; ?></a>
</h4>
</span>
</div>
<div id="text-slider">
<span class="<?php echo 'span_'.$num; ?>">
<p>
<?php
$concat=array_slice(explode(' ',$item->introtext),0,20);
$concat=implode(' ',$concat);
echo $concat."...";
?>
</p>
</span>
</div></div>
Learn more >></p>
<?php
$num++;
endforeach;
endif;
?>
<div id="title-content">
</div>
<div id="text-content">
</div>
And here is a JSFiddle page reproducing what I would like to do.
My problem is that I am getting data that still has HTML tags, however I would like the output to have my CSS styles.
You could clone the node, and set that to be the new content of the target elements, to keep everything in jQuery objects, but personally, I'd use the .outerHTML property.
I've updated your fiddle to show you what I mean: I've changed the .text(...set content here) to .html(), because we're injecting HTML content. Then, I added [0] at the end of your selector, to return the raw element reference, which gives access to all standard JS properties and methods an element has, and just went ahead and fetched the outerHTML... easy-peasy