In my site I have an iframe, which contains a Chtml::ajaxButton. I have found many posts regarding this problem, but couldn't find a solution.
What I think is important to highlight, is that this iframe is not being used to send data to a domain which is different from the host page.
view.php
<div style="height: 385px; width: 350px; overflow: hidden">
<?php $url = "displayMessages?league_id=".$model->id; ?>
<iframe src="<?php print $url?>" width="350" height="385">
</iframe>
</div>
LeaguesController.php
public function actionDisplayMessages()
{
if(isset($_GET['league_id'])){
$selectedLeague = $_GET['league_id'];
$league = LigasDeAmigos::model()->findByPk((int)$selectedLeague);
$user = (int)Yii::app()->user->id;
$this->renderPartial('leagueWallMessages', array(
'model'=>$league,
'messages'=>$league->messages,
'user'=>$user,
));
}
}
LeagueWallMessages.php
<?php
echo CHtml::ajaxButton(
"Compartir", CController::createUrl('leagues/insertComment',
array(
'league_id'=>$model->id)),
array(
'success' => "js: function(){ alert('Success!!'); }",
'type' => 'post',
),
array(
'id'=>'idButtonShare',
'style'=>'width:70px;height:40px; align:right;'
)
);
?>
This button in LeagueWallMessages.php, when clicked, doesn't fire any action. What might cause this issue?
Turns out I had forgotten to have the button within a form definition. I placed the button and other contents within a form, and changed the button for a ajaxSubmitButton.
Related
I am troubleshooting a website that uses audio.js as an audio player. I am trying to configure the audio player's event callbacks using the click method, but it is not recognizing my click.
It does however work like it should on this jsfiddle. Any help is greatly appreciated
What I've done -
Eliminated all CSS and irrelevant scripts.
Click method works on divs before and after the audiojs class.
Shortcode that I'm using for the audio player -
// audio player
add_shortcode( 'sp_audio', 'sp_audio_shortcode' );
function sp_audio_shortcode( $atts, $contents = null )
{
extract( shortcode_atts( array(
'id' => 'sp-audio-player',
'url' => '',
),
$atts ) );
$output .= '<audio preload="none">';
$output .= '<source src="' . $url . '" type="audio/mpeg">';
$output .= '</audio>';
return $output;
}
Output in Chrome's inspect element
<div class="musicplayer">
<div class="audiojs" classname="audiojs" id="audiojs_wrapper5">
<audio preload="none">
<source src="http://soundtrackloops.com/Demo/Electronisounds-AcousticBarefootBeats-DEMO.mp3" type="audio/mpeg">
</audio>
<div class="play-pause">
<p class="play"></p>
<p class="pause"></p>
<p class="loading"></p>
<p class="error"></p>
</div>
<div class="scrubber">
<div class="progress"></div>
<div class="loaded"></div>
</div>
<div class="time">
<em class="played">00:00</em>/<strong class="duration">00:00</strong>
</div>
<div class="error-message"></div>
</div>
My test click method
jQuery(document).ready(function($) {
$( ".audiojs" ).click(function() {
alert( "CLICK" );
});
Initialize audio.js
audiojs.events.ready(function() {
audiojs.createAll();
});
Looks like you're appending the audio track after the page has loaded so you'll need to use a live click event.
Try this:
jQuery(document).ready(function($) {
$('.audiojs').live('click', function() {
alert( "CLICK" );
});
I had a similar issue and solved it by using event listeners on the audio object. I guess it depends on what you want to track but that gives you control over playing and stopping etc.
I adapted my code so it should be working with yours
audiojs.events.ready(function() {
var as = audiojs.createAll();
$(".audiojs audio").on('playing',function(){
console.log("Push playing");
});
// Other callbacks
});
Hope you get it working. I only have one player per page, if you have more just use the $(this) element in the callback to identify which has been altered.
I have comment on my site, that have a reply button. When the reply button is hit a new text box pops up and allows the user to reply to the comment.
For some if there is more than one comment on a page, the reply link only works for the comment at the bottom of the other comments. Essentially the first comment in a list of more than one.
I'm pretty certain is has to do with my click function class.
Here is my html and php structure:
<a name='reply_form_<?php echo $airwave_comment_row['id']; ?>' style="clear:both"></a>
<div id='reply_to_<?php echo $airwave_comment_row['id']; ?>' class="respond_structure_future" <?php if(isset($_GET['reply_to']) && $_GET['reply_to'] == $airwave_comment_row['id']) { echo 'style="display:block;"';}else{ echo 'style="display:none;"';} ?>>
<div class="response_polaroid_future">
<a href="http://www.cysticlife.org/Profile.php?id=<?php// echo $auth->id; ?>">
<img src="/styles/images/prof_thumbnail_2.jpg" />
</a>
</div>
<?php
echo validation_errors();
echo form_open('community/insert_airwaves_comments_replies/'.$this->uri->segment(3));
?>
<div class="respond_body_future">
<div class="response_arrow_future"></div>
<div class="response_tail_future"></div>
<div class="respond_data_future">
<?php
$data = array('name' => 'airwaves_comments_replies', 'id' => 'reply_to'. $airwave_comment_row['id'].'_textarea', 'class' => 'respond');
echo form_textarea($data, set_value('airwaves_comments_replies'));
$data = array('type' => 'hidden', 'name' => 'comment', 'value' => $airwave_comment_row['id']);
echo form_input($data);
?>
<div class="respond_nevermind">
nevermind
</div>
<?php
echo form_submit('sub_comment_reply', 'Reply');
?>
</div>
</div>
</form>
</div>
jquery:
<script type="text/javascript">
$(document).ready( function() {
$('.scroll').localScroll({ offset:{top:-0,left:0} });
$("a.reply_link").click( function() {
$("#"+$(this).attr('name')).fadeIn('slow');
});
$(".respond_nevermind a").click( function(event) {
event.preventDefault();
var reply_box = document.getElementById($(this).attr('href'));
$(reply_box).css('display','none');
var reply_textarea = document.getElementById($(this).attr('href')+"_textarea");
$(reply_textarea).val('');
});
});
</script>
Thanks in advance.
The click event handler is bound to the initial existing elements but dynamically created elements are not bound.
Try using live() or on() to bind dynamically created elements.
I have a website with a search function. The user enters his search parameters, and a popup (via bpopup.js) is displayed with links to the results. I want the user to be able to click each link and have another iframe pop up with the data from that url. I plan to limit the user to 5 results at a time. Currently my search works fine, and the popup comes up with the list of links. However, when I click on each of the links, the data is loaded inside that particular iframe, not a new one. I want to be able to have multiple iframes open, which bpopup says is possible.
Here's the pertinent search.php code:
if($searcher->getResultCount() > 0) {
echo('<div><ul>');
foreach($searcher->getResults() as $result) {
$newclass="imagen" . $counter;
$url = '<a id="' . $newclass . '" href="' . $result['filePath'] . '">Test</a>';
echo('<li><em>' . $url . '</em></li>');
$counter++;
}
echo('</ul></div>');
} else.....
At the bottom of search.php is where I set up my bpopup:
$(document).on(function() {
$(function() {
$('#searchResults').bPopup({
content: 'iframe',
contentContainer: '.searchResults',
position: [200,200],
follow: [false, false],
opacity: 0,
scrollBar: 'true'
});
$('#imagen1').bind('click', "a.imagen1", function (e) {
e.preventDefault();
var urltoLoad = $(this).attr("href");
$('#result1').bPopup({
content: 'iframe',
contentContainer: '.resultcontent1',
follow: [false, false],
position: [50,200],
positionStyle: 'fixed',
closeClass: 'b-close1',
scrollBar: 'true',
escClose: 'true',
loadUrl: urltoLoad
});
});....
There is one #imagen set up for each of the 5 results.
And finally,
<div id = "searchResults"> </div>
<div id = "result1">
<a class="b-close"></a>
<div class="resultcontent1"></div>
</div>
<div id = "result2">
<a class="b-close"></a>
<div class="resultcontent2"></div>
</div>
<div id = "result3">
<a class="b-close"></a>
<div class="resultcontent3"></div>
</div>
Ok I am looping through my news postings and each one you can comment on. So I built a dialog modal for each news posting (which I think is silly), but it's the only way I can keep the news_id looping through and passing it into the form action attribute.
Anyway, hopefully that's not such a huge deal, but whenever I click on a comment link (.comment), it opens up ALL of the repeating dialog modals since it's the same class. How do I make it only open up that dialog modal with the same news id as the comment link they are clicking on so I can insert their comment based on the news id?
This is the HTML for my news looping (using CodeIgniter)
<div id="news">
<?php foreach($news_array as $news) { ?>
<div class="news_box">
<h3 align="right">Peanut - December 18, 2012</h3>
<p align="right"><?php if($admin) { echo anchor('admin/news/edit/'.$news->id, 'Edit').' | '.anchor('admin/news/delete/'.$news->id, 'Delete', array('onClick' => "return confirm('Are you sure you want to delete this post?')")); } ?></p>
<h2><?php echo $news->title; ?></h2>
<p><?php echo nl2br($news->body); ?></p>
<p align="right"><?php echo anchor('news/comment/'.$news->id, 'Comment', array('class' => 'comment', 'onclick' => 'return false')); ?></p>
<div class="comment-form" title="Comment">
<?php echo form_open('news/comment/'.$news->id, array('class' => 'form')); ?>
<fieldset>
<legend>Please Leave A Comment</legend>
<div class="row clearfix">
<div class="full control-groups">
<div class="clearfix">
<div class="form-status"></div>
<?php echo form_label('Comment', 'comment'); ?>
</div>
<?php echo form_textarea(array('name' => 'comment', 'id' => $news->id, 'maxlength' => 200, 'placeholder' => 'Please enter 5 - 200 characters.', 'value' => set_value('comment'))); ?>
</div>
</div>
</fieldset>
<? echo form_close(); ?>
</div>
<hr color="orange" />
</div>
<?php } ?>
</div>
Then here is my Javascript (only showing the important stuff so it's not all jumbled together):
$('.comment-form').dialog({
autoOpen: false,
height: 380,
width: 900,
modal: true,
buttons: {
"Comment": function() {
form = $('.form');
$.ajax({
type: 'POST',
url: form.attr('action'),
data: form.serialize(),
type: (form.attr('method'))
});
},
Cancel: function() {
$(this).dialog('close');
}
}
});
$('.comment').click(function() {
$(this).closest('.comment').find('.comment-form').dialog('open');
});
Thank you for any help!
There's a few ways you can do it. I'd probably just do it like this. Give each comment form an id e.g. id="comment-form-0", id="comment-form-1" etc as you're looping through and creating them in PHP.
Also for each comment element you store an HTML5 data attribute on it e.g. data-comment-id="0", data-comment-id="1".
Then in the JavaScript you'd do something like:
$('.comment').click(function() {
var commentId = $(this).attr('data-comment-id');
$('#comment-form-' + commentId).dialog('open');
});
I'd search for the parent container, then grab the appropriate comment form:
$('.comment').click(function() {
$(this).closest('div.news_box').find('.comment-form').dialog('open');
});
Given that [.closest()][1]:
Begins with the current element
Travels up the DOM tree until it finds a match for the supplied selector
The returned jQuery object contains zero or one element for each element in the original set
You likely have some containing element above div.news_box that has a class of .comment. The above code (untested), should stop the .closest() match at div.news_box and then find the sole child element with class .comment-form, thus only opening a single dialog.
I have a page that is using jQuery tabs. Within one of my tabs I have a div that contains a form (initially hidden) that I want to use to add content to the tab. What I have works perfectly in Chrome, Firefox, and Safari. But, in IE 7 the tab will not refresh. The post works and the data gets added to the database, but it simply will not show the new content after submitting it.
I don't think it matters - but, just for information I am using the Codeigniter PHP framework as well.
Here is my javascript:
<script type="text/javascript">
$(document).ready(function(){
// initialize the addChild form as hidden until user requests it open
$('#addChild').hide();
// open the form
$('#openDialog').click( function(){
$('#addChild').slideToggle();
return false;
});
// close the form
$('#closeDialog').click( function(){
$('#addChild').slideToggle();
return false;
});
// submit the form
$('#frmAddChild').submit( function(){
$('#addChild').slideToggle();
$.ajax({
url: '/children/add',
type: 'POST',
data: $('#frmAddChild').serialize()
//cache: false
});
//reload the children tab
$('#tabs').tabs('load',3);
return false;
});
});
</script>
And, here is my PHP/HTML:
<?php
// initialize the elements of the form
$frmAddChild = array(
'name' => 'frmAddChild',
'id' => 'frmAddChild',
'method' => 'post'
);
$child_name = array(
'name' => 'child_name',
'id' => 'child_name',
);
$child_dob = array(
'name' => 'child_dob',
'id' => 'child_dob'
);
$btnOpenDialog = array(
'name' => 'openDialog',
'id' => 'openDialog',
'value' => 'true',
'content' => 'Add Child'
);
$btnCloseDialog = array(
'name' => 'closeDialog',
'id' => 'closeDialog',
'value' => 'true',
'content' => 'Cancel'
);
// button that shows the drop down to add
echo form_button($btnOpenDialog);
?>
<div id="addChild" title="Add Child">
<?php echo form_open('children/add/',$frmAddChild); ?>
<table>
<tr>
<td>
<?php echo form_label('Child\'s Name', 'child_name'); ?>:
</td>
<td>
<?php echo form_input($child_name); ?>
</td>
</tr>
<tr>
<td>
<?php echo form_label('Date of Birth','child_dob'); ?>:
</td>
<td>
<?php echo form_input($child_dob); ?>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<?php echo form_submit('submit', 'Add'); ?>
<?php echo form_button($btnCloseDialog); ?>
</td>
</tr>
</table>
<?php echo form_close(); ?>
</div>
Does anyone have any ideas how I can get this working correctly in IE? Also, if anyone has any comments about how I have things structured, please let me know. I'm new to Codeigniter and I am by no means a javascript or jQuery expert.
Thanks for your help!
I think you should expand on the .ajax and add a .success and .error state in the AJAX call. Refer to this:
http://api.jquery.com/category/ajax/
Add that as part of the ajax process, because right now it looks like hitting submit will hide the form and reload the tabs even if there was an error.
Try that out and remove the return false and see what happens.