I am looking to update a specific div that can change depending on the stream.id.
I have the following :
ActionCable.server.broadcast('webconferencier_channel', participants_html: participants_html, stream_id: webconferencier.stream_id)
Where I do pass the stream_id.
I am looking to retrieve it in coffee file like this:
received: (data) ->
# Called when there's incoming data on the websocket for this channel
participantsHtml = data.participants_html
$('#show_participants' + data.stream_id).html(participantsHtml);
And then update the view as:
<div id="show_participants_#{<%= #stream.id %>}">
</div>
I can see the AC sending the div template with the other variables, but i cannot seem to retrieve and update it. I think my coffee syntax is incorrect.
In the view, the div id show up as :
<div id="show_participants_#{67089dbd-9826-41f2-97bc-b774b667ef66}">
</div>
with the UUID being the exact same string that i am passing through the coffee file.
Does anyone know how i could make this work please?
Thank you
You should remove curly braces and octothorp from div's id like show_participants_UUID.
You can add console.log to the coffee to see what's happening inside.
Related
I'm using Rails 5. I want to create a message that flashes on my page after I submit an AJAX form and an error comes back. I'm not using twitter bootstrap and would only consider using that if it doesn't screw up any of the other styling I already have. Anyway, on my view I have this
<div id="error_explanation" class="alert alert-success"></div>
and in my controller I have this
displayError('#{error_msg}')
which invokes this coffee script ...
#displayError = (msg) ->
...
$("#error_explanation").text(msg)
As you guess, right now, the message just displays in plain text . I would like it to flash and then disappear. How do I do that?
If you just need the message to fade out after a set amount of time, then change that last line of CoffeeScript to:
$("#error_explanation").text(msg).delay(3000).fadeOut()
If you need something a bit more complex (e.g. don't fade out if hovered, stacked notifications, dismiss button etc), or ready-styled - then you might want to investigate using a JS library such as toastr.
this should help get you started:
show_ajax_message = (msg, type) ->
$("#flash-message").html "<div id='flash-#{type}'>#{msg}</div>"
$("#flash-#{type}").delay(5000).slideUp 'slow'
$(document).ajaxComplete (event, request) ->
msg = request.getResponseHeader("X-Message")
type = request.getResponseHeader("X-Message-Type")
show_ajax_message msg, type
https://www.google.com/search?q=flash+messages+session+rails+ajax
Based on nothing but your coffee script, here's how:
Not familiar with CoffeeScript and its syntax, so here's plain JS code.
setTimeout(function() {
$('#visitLink').hide()
}, 2000);
That'll make the message disappear after 2 seconds.
what is the correct way to display the tag name on the tag specific page and a link to it in Modx revo using tagLister? e,g, a post has tags Tag1, Tag2 and Tag3. Now you click on one of the tags and it brings to the target resource displaying al posts with that single tag. What code to put in that target resource so it shows that the user has landed on the specific single tag page. I want to display the name and the link of that exact single tag.
My tags target resource is the main blog resource: Here is the code:
<section>
[[The Code to Display the Tag name to put here]]
[[!getResourcesTag#Blog Pagination Hy?
&elementClass=`modSnippet`
&element=`getResources`
&tpl=`Blog Post on Blog Page`
&hideContainers=`0`
&pageVarKey=`page`
&parents=`[[*id]]`
&limit=`3`
&includeTVs=`1`
&includeContent=`1`
&cache=`0`
]]
<div class="PaginationContainer">
<span class="TotalPages">p [[+page]] (total. [[+pageCount]])</span>
<ul>
[[!+page.nav]]
</ul>
</div>
</section>
is it possible at all?
Finally found on the web.
If you got better solution, please put it here.
So the idea is to make a snippet which gets the tag and call the snippet where we want.
Step by Step.
Step 1. Make a new snippet and name it something, e.g. Tag Name,
Step 2. Put the snippet code in the snippet code placeholder,
Snippet code:
//-- Get all request string key/value pairs
$s = $_REQUEST;
if($s['key'] == 'tags'){
return $s['tag'];
} else {
return false;
}
Step 3. Call the snippet where you want the tag nam to show up, e.g. [[!Tag Name]]
It will show up the tag name on tag pages only.
Here is where I found it
https://forums.modx.com/thread/11108/dynamically-generated-list-of-documents-that-are-tagged-with-categories?page=2#dis-post-397237
I am trying to move my website to Hack and XHP, of course. Below is a structure of what code structure I want to achieve:
<ui:backstageHeader>
<ui:backstageHeader-navItem href="/">stories</ui:backstageHeader-navItem>
<ui:backstageHeader-navItem href="/story/send">send a story</ui:backstageHeader-navItem>
<ui:backstageHeader-navItem href="/aboutus">support</ui:backstageHeader-navItem>
</ui:backstageHeader>
(Note: :ui:backstageHeader-navItem basically renders to <a href={$this->:href}>{$this->getCHildren}</a> so there is not need to attach its class here.)
Below is the code for :ui:backstageHeader:
final class :ui:backstageHeader extends :ui:base {
attribute :div;
children (:ui:backstageHeader-navItem)*;
protected function compose() {
$dom =
<section class="backstage-header">
<div class="container">
<div class="cell-logo">
<a href="/">
<span class="no23-logo-white"></span>
</a>
</div>
<div class="cell-navigation">
</div>
<div class="cell-account">
<div class="cell-login">
<div id="siteNav-login">Autentificare</div>
</div>
</div>
</div>
</section>;
$mainContainer = $dom->getChildren("div")[0];
$cellNavigation = $mainContainer->getChildren("div")[1];
$navItems = <ul class="main-navigation"></ul>;
foreach($this->getChildren() as $child) {
$navItems->appendChild(<li>{$child}</li>);
}
$dom->appendChild($navItems);
return $dom;
}
}
I used the Terminal to debug my code using hhvm -m d <file.php>, and everything was alright there; however, when I get to my browser, I get 500 error header. This is what the log says:
Catchable fatal error: Hack type error: Could not find method getChildren in an object of type XHPChild at /var/www/res/ui/backstage-header.php line 25
The error comes from
$cellNavigation = $mainContainer->getChildren("div")[1];
But, somehow, I need to append ul.main-navigation to div.cell-navigation from my section.backstage-header.
How can I do it?
Don't structure your code this way. Built it up from the inside out, so that you don't have to do a ton of unreadable getChildren calls looking for specific children. Those calls are super hard to read, and super inflexible when you change the structure of your XHP. You wouldn't do something like node.firstChild.lastChild.lastChild.firstChild in the JS DOM, would you? No, there's a better way in JS, to find things by class or ID; in XHP, you can just build it up the right way in the first place!
I'd give you an example of this, but it doesn't look like you actually use $mainContainer or $cellNavigation, so you can just remove those two problematic definitions.
As an aside, you really shouldn't be getting your type errors as catchable fatals from HHVM; this is a last resort sort of check. Try running the hh_client checker directly, maybe even showing its result in your IDE; it will give you a much faster iteration cycle, and much more information than HHVM provides.
From my experience, appendChild is very prone to human error. It's easier to do something like:
$items = (new Vector($this->getChildren()))->map($child ==> <li>{$child}</li>);
return <div id="container">{$items}</div>;
If you want to wrap the children in <li />.
Not sure if that will work but it will be close.
Pro tip: You can assign variables from within an XHP tree.
$root =
<div>
{$child = <span>
Text children
</span>}
</div>;
Now $child is already set to the <span> element.
i dynamically generate this html code to delete an item with an id=3 for example:
"<a href='javascript:delete('" + item.id + "')>";
when i click this, it will execute delete('3');i change it as:
<a href='#delete' data-rel='popup' data-position-to='window' data-transition='pop'>
and add a dialog for this tag:
<div data-role='popup' id='delete'>
<a href='javascript:delete(item.id)' data-role='button'>delete</a>
</div>
how to transfer the item's id to this popup dialog's tag, any suggestion?
I feel like you might be going through the wrong way to achieve this. Some things to change :
delete is a JavaScript keyword. You cant use it as a function.
Don't use the onclick attribute. It results in duplication. Instead, you could use a click event for repetitive actions.
You seem to have gotten the idea to create multiple popups (one for each click of the anchor tag). I think one would do.
Now, in correlation with whatever I've just put down, here's some sample code.
HTML
<a href='#' class='delete' data-num='" + i + "'>Delete me</a>
(Note the data-num attribute in the HTML, the addition of class attribute and the removal of onclick in your code)
It could be replaced by JS which looks like this :
$(this).on("click", ".delete", function (e) {
//prevent default action
e.preventDefault();
//take the id value
var id = $(this).data("num");
//send that value to the popup
$("#delete").find("span").html(id).end().popup("open");
});
A demo fiddle for you to look at : http://jsfiddle.net/hungerpain/AxGde/2/
I have a menu header and when you click one of the menu links it directs to another page half way down (which i want) as it finds the relevant div id name. I was wondering if there is a way to clean the url back up again so it doesn't include the #id in my url? Tried window.location hash and this breaks it from scrolling and leaves the # in the url. Here is what i have:
In my menu: <li><a href="about#scroll-to" ....
And on the about page, it scrolls down to a div called #scroll-to..<div id="scroll-to"></div>
Any suggestions would be great. Thanks!
Using jquery, you can make a POST call to the target page when menu is clicked.
The POST data will contain the id of the div where you want to slide to.
On your target page, use your server language (php, asp) to output that id in a js variable and on document ready slide using jquery to that id.
Then you will have a clean url, and the page scrolling to your div.
---- edit: here comes the code!
Lets use jquery to make a POST to the target page, when a menu item is clicked. We will add a class, lets say, "mymenuitem". We will add this class to our link in the menu. So we will have
<li>Information about us</li>
(the onClick stops link from redirecting manually)
and an empty form (put it after the < body >)
<form id="slidinganchorform" method="post" action="YOURTARGETPAGE.HTML"></form>
then we will create the neccessary jquery so when the < a > tag with class "mymenuitem" is clicked, we will make a POST to the target page.
<script type="text/javascript">
jQuery(document).ready(function(){
$(".mymenuitem").click(function() {
// we will split the clicked href's value by # so we will get [0]="about" [1]="scroll-to"
var the_anchor_id_to_scroll_to = $(this).attr("href").split('#')[1];
// lets do the POST (we WILL TRIGGER a normal FORM POST while appending the correct id)
$("#slidinganchorform").append('<input type="hidden" name="anchorid" value="'+ the_anchor_id_to_scroll_to + '">');
$("#slidinganchorform").submit();
});
});
</script>
then in our YOURTARGETPAGE.HTML we will have something like (let's assume we use php)
<head>
<!-- make sure your jquery is loaded ;) -->
<?php
if($_POST['anchorid']!='')
{
?>
<script type="text/javascript">
jQuery(document).ready(function(){
// lets get the position of the anchor (must be like <a name="scroll-to" id="scroll-to">Information</a>)
var thePositiontoScrollTo = jQuery('#<?php echo $_POST['anchorid']; ?>').offset().top;
// Lets scroll
jQuery('html, body').animate({scrollTop:thePositiontoScrollTo}, 'slow');
});
</script>
<?php
}
?>
</head>
be sure the correct id must exist ;)
<a name="scroll-to" id="scroll-to">Information about us or whatever...</a>
(remove your old code because i changed some variable names and it will be difficult to debug if there are parts from the previous version. write everything from the start )
You can do this when the new page loads
history.pushState("", document.title, window.location.pathname);
However it will also remove the query string. Although, you could play with it a little bit to keep it