So I am using the Disqus Plugin v2.65. I am trying to edit the dsq-global-toolbar at the top of the Disqus comments.
The following tags are in disqus-comment-system/comments.php
<div id="disqus_thread">
<?php if (!get_option('disqus_disable_ssr')): ?>
<?php
// if (is_file(TEMPLATEPATH . '/comments.php')) {
// include(TEMPLATEPATH . '/comments.php');
// }
?>
<div id="dsq-content">
<ul id="dsq-comments">
however on my site there are mulitple tags (the disqus-global-toolbar div) that seem to be dynamically appended between the dsq-content div and the dsq-comments ul. Where is this coming from and where can I edit this? Any help would be greatly appreciated.
I think it is coming somewhere around line 3140 in disqus.js
You can use this code to wait for the document to finish loading completely then do your changes (client side):
$(document).ready(function() {
window.disqus_no_style = true;
$.getScript('http://sitename.disqus.com/embed.js', function() {
var loader = setInterval(function() {
if($('#disqus_thread').html().length) {
clearInterval(loader);
disqusReady();
}
}, 1000);
});
function disqusReady() {
//whatever you can imagine
}
});
window.diqus_no_style can be deleted as well as the $.getsript wrapper.
Is that what you are looking for?
Something like this (use livequery instead of live):
function disqusReady() {
$('#dsq-global-toolbar').livequery(function() {
//$(this) will refer to object
});
}
Not sure what plug-in you're talking about, but if it's WordPress, I've done the same thing. Modify wp-content/plug-ins/disqus-comment-system/comments.php by adding an event handler for 'afterRender' (fires when the content ready in the DOM, but still hidden), eg. around line 70:
config.callbacks.afterRender.push(myFunctionToModifyDisqusOutput);
Related
I want to implement a simple inbox in yii. it reads messages from a database table and show it.
but i don't know how i should show read and unread messages in different styles and how i can implement a notification for new messages.
i searched a lot but only found some extensions and i don't want to use them.
it is so important to find how i can show unread messages in a different way
any initial idea would help me
a part of mailbox extension code :
public function actionInbox($ajax=null)
{
$this->module->registerConfig($this->getAction()->getId());
$cs =& $this->module->getClientScript();
$cs->registerScriptFile($this->module->getAssetsUrl().'/js/mailbox.js',CClientScript::POS_END);
//$js = '$("#mailbox-list").yiiMailboxList('.$this->module->getOptions().');console.log(1)';
//$cs->registerScript('mailbox-js',$js,CClientScript::POS_READY);
if(isset($_POST['convs']))
{
$this->buttonAction('inbox');
}
$dataProvider = new CActiveDataProvider( Mailbox::model()->inbox($this->module->getUserId()) );
if(isset($ajax))
$this->renderPartial('_mailbox',array('dataProvider'=>$dataProvider));
else{
if(!isset($_GET['Mailbox_sort']))
$_GET['Mailbox_sort'] = 'modified.desc';
$this->render('mailbox',array('dataProvider'=>$dataProvider));
}
}
First of all the scripts things should be in the view. For you problem I would do something like
In the controller
$mailbox = Mailbox::model()->inbox($this->module->getUserId()); //I assume this returns the mailbox from that user?
$this->renderPartial('_mailbox',compact('mailbox ')); //compact is the same as array('mailbox'=>$mailbox) so use whatever you prefer.
In the view I would simply do something like this
<?php foreach($mailbox->messages as $message):
$class = ''; //order unread if you want to give both a different class name
if($message->read): //if this is true
$class = 'read';
endif; ?>
<div id='<?= $message->id ?>'class='message $class'> <!-- insert whatever info from the message --></div>
<?php endforeach; ?>
So now it will add the class read to every message that has been read. Then in CSS you can simply change it style. I hope this is enough information? I use foreach(): endforeach; and if(): endif; in the view files, but you could use foreach() {}, but I prefer foreach, as it looks better combined with HTML.
EDIT about you second question, how do they become read. This you could do with JQUERY. example.
$(".message").on("click", function() {
var id = $(this).attr('id');
$.ajax {
type:"POST",
url: "controller/action/"+id; //the controller action that fetches the message, the Id is the action variable (ex: public function actionGetMessage($id) {})
completed: function(data) {
//data = the message information, you might do type: 'JSON' instead. Use it however you want it.
if(!$(this).hasClass("read"))
$(this).addClass("read"); //give it the class read if it does not have it already
}
}
});
This simply gives the div the class read and it should look like the other items with the class read.
I know that InfiniteScroll and Masonry work well together. But I am using the Infinite Scroll Extension of Yii (called yiinfinite-scroll) and tried to apply Masonry on it. Infinite Scroll for itself works perfectly, Masonry for itself too. But after InfiniteScroll tries to load a new set of images (I've got an image page), the callback part of InfiniteScroll doesn't seem to fire, because the newly appended elements don't have any masonry code in it and appear behind the first visible items. (I know that this bug is reported often, but the solutions I found so far didn't work for me).
My structure for showing the picture looks like this:
<div class="items">
<div class="pic">...</pic>
<div class="pic">...</pic>
...
</div>
The first page load looks like this
<div class="items masonry" style="...">
<div class="pic masonry-brick" ...></div>
<div class="pic masonry-brick" ...></div>
...
</div> // everything's fine, masonry is injected into the code
After infinite scroll dynamically loads new images these look like this:
<div class="items masonry" ...></div>
<div class="pic masonry-brick" ...></div>
...
// appended pics:
<div class="pic"></div>
<div class="pic"></div>
</div> // so no masonry functionality was applied
My Masonry Code:
$(function (){
var $container = $('.items');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.pic',
columnWidth: 405
});
});
});
$container.infinitescroll({
// normally, the options are found here. but as I use infinitescroll as a Yii extension, the plugin is already initiated with options
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
});
});
I also tried to copy and replace the current InfiniteScroll-min.js file in the extension folder by the newest one. Same effect...
Best regards,
Sebastian
Okay I found a solution. I post it here if somebody else has the same issue:
I just modified the YiinfiniteScroller Class from the Yiinfinite Scroll Yii Extension and added the callback part for Infinite Scroll which was missing:
private function createInfiniteScrollScript() {
Yii::app()->clientScript->registerScript(
uniqid(),
"$('{$this->contentSelector}').infinitescroll(".$this->buildInifiniteScrollOptions().", ".$this->callback.");"
);
}
At the beginning of the class I added the line
public $callback;
to use it later in the method.
Then you can call the Widget with an additional option callback, for example like this:
'callback' => 'function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now theyre ready
$newElems.animate({ opacity: 1 });
$(".items").masonry( "appended", $newElems, true );
});
}',
Works like charm.
I'm having problems trying to get the unobtrusive jquery validation to work with a partial view that is loaded dynamically through an AJAX call.
I've been spending days trying to get this code to work with no luck.
Here's the View:
#model MvcApplication2.Models.test
#using (Html.BeginForm())
{
#Html.ValidationSummary(true);
<div id="res"></div>
<input id="submit" type="submit" value="submit" />
}
The Partial View:
#model MvcApplication2.Models.test
#Html.TextAreaFor(m => m.MyProperty);
#Html.ValidationMessageFor(m => m.MyProperty);
<script type="text/javascript" >
$.validator.unobtrusive.parse(document);
</script>
The Model:
public class test
{
[Required(ErrorMessage= "required field")]
public int MyProperty { get; set; }
}
The Controller:
public ActionResult GetView()
{
return PartialView("Test");
}
and finally, the javascript:
$(doument).ready(function () {
$.ajax({
url: '/test/getview',
success: function (res) {
$("#res").html(res);
$.validator.unobtrusive.parse($("#res"));
}
});
$("#submit").click(function () {
if ($("form").valid()) {
alert('valid');
return true;
} else {
alert('not valid');
return false;
}
});
The validation does not work. Even if I don't fill any information in the texbox, the submit event shows the alert ('valid').
However, if instead of loading dynamically the view, I use #Html.Partial("test", Model) to render the partial View in the main View (and I don't do the AJAX call), then the validation works just fine.
This is probably because if I load the content dynamically, the controls don't exist in the DOM yet. But I do a call to $.validator.unobtrusive.parse($("#res")); which should be enough to let the validator about the newly loaded controls...
Can anyone help ?
If you try to parse a form that is already parsed it won't update
What you could do when you add dynamic element to the form is either
You could remove the form's validation and re validate it like this:
var form = $(formSelector)
.removeData("validator") /* added by the raw jquery.validate plugin */
.removeData("unobtrusiveValidation"); /* added by the jquery unobtrusive plugin*/
$.validator.unobtrusive.parse(form);
Access the form's unobtrusiveValidation data using the jquery data method:
$(form).data('unobtrusiveValidation')
then access the rules collection and add the new elements attributes (which is somewhat complicated).
You can also check out this article on Applying unobtrusive jquery validation to dynamic content in ASP.Net MVC for a plugin used for adding dynamic elements to a form. This plugin uses the 2nd solution.
As an addition to Nadeem Khedr's answer....
If you've loaded a form in to your DOM dynamically and then call
jQuery.validator.unobtrusive.parse(form);
(with the extra bits mentioned) and are then going to submit that form using ajax remember to call
$(form).valid()
which returns true or false (and runs the actual validation) before you submit your form.
Surprisingly, when I viewed this question, the official ASP.NET docs still did not have any info about the unobtrusive parse() method or how to use it with dynamic content. I took the liberty of creating an issue at the docs repo (referencing #Nadeem's original answer) and submitting a pull request to fix it. This information is now visible in the client side validation section of the model validation topic.
add this to your _Layout.cshtml
$(function () {
//parsing the unobtrusive attributes when we get content via ajax
$(document).ajaxComplete(function () {
$.validator.unobtrusive.parse(document);
});
});
test this:
if ($.validator.unobtrusive != undefined) {
$.validator.unobtrusive.parse("form");
}
I got struck in the same problem and nothing worked except this:
$(document).ready(function () {
rebindvalidators();
});
function rebindvalidators() {
var $form = $("#id-of-form");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse($form);
$form.validate($form.data("unobtrusiveValidation").options);
}
and add
// Check if the form is valid
var $form = $(this.form);
if (!$form.valid())
return;
where you are trying to save the form.
I was saving the form through Ajax call.
Hope this will help someone.
just copy this code again in end of modal code
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
;)
I am trying to invoke the onclick function in an html page that displays content. I am using the httpwebreqest control and not a browser control. I have traced the function and tried to find the link it calls but looking at the code below I tried inserting the link into the browser with the main url but it does not work.
<div style="position:relative;" id="column_container">
<a href="#" onclick="
if (! loading_next_page) {
loading_next_page = true;
$('loading_recs_spinner').style.visibility = 'visible';
**new Ajax.Request('/recommendations?directory=non-profit&page=**' + next_page, {
onComplete: function(transport) {
if (200 == transport.status){
$('column_container').insert({ bottom: transport.responseText });
loading_next_page = false;
$('loading_recs_spinner').style.visibility = 'hidden';
next_page += 1;
if (transport.responseText.blank()) $('show_more_recs').hide();
}
}
});
}
return false;
Any ideas would be deeply appreciated.
Thanks anyone who has viewed...but I resolved the issue. The link after the ajax request was actually correct and it just was not showing anything in the browser but the source contains all the links I need.
dojo.addOnLoad( function() {
attach on click to id="textDiv"
dojo.query('#Specific_consultant-Yes').onclick( function(evt) {
// document.getElementById("Consultants").style.visibility = "hidden";
dojo.style.setVisibility('Consultants', false);
//alert('hai');
});
});
I tried to write code like this in zend in views page . the alert command works but the hiding of element does not work!!!any problem in code?
try to use the following code:
dojo.style("Consultants", "visibility", false);
i suspect the id of the element to be hidden is "Consultants"?
if this is not working, please provide your html-code.