I have a html template doing this.
<ul id="things">
<li data-foreach-thing="Thing.all" data-mixin="animation">
<a data-route="routes.things[thing].new" data-bind="thing.id"></a>
</li>
</ul>
The data-route attribute is returning a url like this:
http://localhost:3000/#!/things/new
I don't know why it is adding the #!
I'm using batman.js 0.9 with rails 3.1
Any help figuring this out is be appreciated, thanks.
Here's a good description of hash bang urls hash bang urls. This is normal for batman to do this (pretty much all javascript frameworks do this). You can enable "pushstate:true" which will disable it (however it will fall back to hash bang if you're on a legacy browser).
Regarding your batman.js view not being rendered, I ran into a similar issue. I didn't have an error in my chrome console, however the view wasn't being rendered. You need to make sure you have a data-yield attribute for your view to attach to.
For example:
<div id="container" data-yield="main">
</div>
Excerpt from batman.js github:
Now when you navigate to /#!/faq/what-is-art, the dispatcher runs this
faq action with {questionID: "what-is-art"}. It also makes an implicit
call to #render, which by default will look for a view at
/views/app/faq.html. The view is rendered within the main content
container of the page, which is designated by setting
data-yield="main" on some tag in the layout's HTML. You can prevent
this implicit rendering by calling #render false in your action.
Are you trying to show a link to the show action for the thing? It should look like this if you are:
<ul id="things">
<li data-foreach-thing="Thing.all" data-mixin="animation">
<a data-route="routes.things[thing]" data-bind="thing.id"></a>
</li>
</ul>
Here's an example of some code I'm using (the order of the data- attributes doesn't matter):
<div data-foreach-section="sections" data-mixin="animation">
<a data-bind="section.SectionId" data-route="routes.sections[section]"></a>
<p data-bind="section.Name"></p>
</div>
Related
I know it has been explained in many places here but I can't get it to work.
It concerns: how to use JavaScript which is in - under wwwroot created - folder in a *.js file.
What I am using:
Blazor Server App empty (VS2022, C#).
I only need/use Server App in VS2022 C# and empty - without any predefined navbars and other elements. So there are no any *.cshtml files except one which is automatically created while creating a "Blazor Server App Empty" in VS 2022 and that is "_Host.cshtml"
And I don't want to use any other template in VS 2022, only this one mentioned.
So, after creating a "page" using this in VS integrated template, I added following in MainLayout.razor (I am using *razor and only razor - no any cshtml):
// this was originally created as in the template in VS2022
#inherits LayoutComponentBase
//this one also:
<main> #Body </main>
// That is what I added here in MainLayout.razor, it's from this site: [http://jsfiddle.net/Ag47D/3/](https://www.stackoverflow.com/)
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li id="home">Home</li>
<li id="skill">Skill</li>
<li id="research">Research</li>
<li id="link">Link</li>
</ul>
</div>
</div>
</div>
</div>
And then I added the css part to the existing "site.css" in that simply VS 2022 project:
`.navbar #nav > .active > a {
color: red;
}`
And finally - and that is the big issue for me to understand WHRE/HOW to handle that . a simply JavaScript part (you can find that on the same site mentioned):
` $(function() {
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});`
I added that to a created folder in wwwroot, the flder is called: "js" and the file inside that folder is called: "setactivetab.js". In that file is the mentioned part of javascript.
In "_Host.cshtml" I added then that, here the part of that _Host.cshtml where you can see what I added:
`....
....
Reload
<a class="dismiss">🗙</a>
</div>
<script src="~js/setactivetab.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>`
So I tried with:
<script src="~js/setactivetab.js"></script>
and:
<script src="js/setactivetab.js"></script>
and:
<script src="~/js/setactivetab.js"></script>
But nothing worked. I mean: TABS are shown on the page - no question about that - but if I click on one of that TABs - nothing happens, the color isn't changed.
Somehow I am not able to understand how to use a self created/from google downloaded, JavaScript for simply changing of the color or to set a selected TAB as active/current or however we can use that.
I tried so many examples described on the web. I can't get that working - maybe I am missing/not understood some fundamental knowledge of using a JavaScript. I simply don't know the way how one can use that.
Can you please post me here a working example of a navigation TABS, ideally self created and simply? Important is: WHERE to put a javascript and how to access that properly so the clicking on a TAB wil lchange his color and stay so until I click on another TAB in a simply - if possible: horizontal, not vertical, navigation bar.
I have enough from searching/reading of many web sites descriptions as there works all and if I copy&paste some simply example, it doesn't work.
I am trying to implement a click event to get the details of every entry from this page: https://www.mrlodge.de/wohnungen/
The Html markup of the button which links to the Details looks like this:
<li class="action mrl-list__item details-bt">
<button>
<span class="icon icon-arrow-right">
::before
</span>
"Details"
</button>
</li>
I have some experience with LUA and Splash but have no idea how to attack this problem since there is no actual href link given in the html markup. I have read about the Splash method mouseclick(), which needs pixel directions. However I am looking for a more generic solution with Splash.
Please help
This page doesn't use javascript. Try disabling javascript and the page still works. The page works with forms instead.
>>> fetch('https://www.mrlodge.de/wohnungen/')
2019-07-10 14:56:41 [scrapy.core.engine] INFO: Spider opened
>>> response.xpath('//form/input[#name="name_url"]/#value').extract()
[u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-maxvorstadt-11609/', u'/wohnen-auf-zeit/4-zimmer-haus-muenchen-fuerstenried-10756/', u'/wohnen-auf-zeit/3-zimmer-wohnung-muenchen-lerchenau-11653/', u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-glockenbachviertel-4180/', u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-berg-am-laim-11625/']
I am working on a Native mobile application CMS system using client-side technology(javascript via JQuery for the most part) and have implmented a templating system similar to that of ASP.NET.
So suppose I have a navigation control which has a starttemplate, endtemplate and itemtemplate as follows:
<div data-type="navigation" id="navigationControlDemo">
<div data-type="starttemplate">
<ul id="Menu">
</div>
<div data-type="itemtemplate">
<li>[[Text]]</li>
</div>
<div data-type="endtemplate" >
</ul>
</div>
</div>
My problem is the browser as it laods seems to decide to want to fix the html so that the tags are closed "properly" as follows:
<div data-type="navigation" id="navigationControlDemo">
<div data-type="starttemplate">
<ul id="Menu">
</ul>
</div>
<div data-type="itemtemplate">
<li>[[Text]]</li>
</div>
<div data-type="endtemplate" >
</div>
</div>
I've tried some workaround and quick hacks to no avail..
I have tried replacing the "<" ">" with certain characters and then replacing them after load but the problem still occurs.
Your code is not valid html. You can't interleave tags (open it in one place and close it in a completely different place). Tags have to be properly nested.
Valid:
<p>
<ul>
</ul>
</p>
Invalid:
<p>
<ul>
</p>
</ul>
Note that you can't properly indent the second one without it looking "off". Please make sure your html is correct first, then the browser will behave properly.
-update- since you want client-side templating, what you don't want is the (invalid) html to be parsed as html. However, it's obviously also not valid xml, which is what you might want.
What you could do is wrap the content of the secions as CDATA.
<div data-type="navigation" id="navigationControlDemo">
<div data-type="starttemplate"><![CDATA[
<ul id="Menu">
]]></div>
<div data-type="itemtemplate"><![CDATA[
<li>[[Text]]</li>
]]></div>
<div data-type="endtemplate" ><![CDATA[
</ul>
]]></div>
</div>
Now if you would interpret that as xml, the parts within the templates are considered text rather than markup.
Basically, you're asking for a way to force a browser to display malformed, messy tag-soup. Thank God most browsers don't just blindly render that kind of code, because the results would be unbearable and make your page unintelligible all together.
That said, if you view the raw page source, you'll probably see the un-corrected, raw markup. But because the browser can't really render it, the engine steps up to the plate and does its best.
But please, don't waste your time finding a way around this, it's just a feature to help you, not to annoy you. Also: HTML5 has a lot more rules about what is allowed and what is not, and how the browser is expected to deal with invalid markup (in your code: <div><ul></div> is deemed invalid, for example). If you feel up to it, you can look at the W3C specifications for more info on the subject.
You can't have <div> elements as children of a <ul> element.
<ul>s only accept <li> tags as children. Specification
Also, it appears you're nesting the tags incorrectly, here:
<div data-type="starttemplate">
<ul id="Menu">
</div>
You can't close that <div> if the <ul> is still open. That's why the <ul> is prematurely closed.
Instead of having tags such as I used keywords to represent the < and > and then render all the correct html using the templating system and replace those keywords back to , and > and add it to the document afterwards. Annoying syntax in my template tags, but it works the way I need it to.
I followed the tutorial on the site to get inline content working. Even checked their source and made changes to my own site.
Here is the site: http://miuzer.com/new/
Check the links in the upper right. About works, but register and login don't as their content is inline. What is the issue here?
I find a lot of js libraries are buggy, overcomplicated and poorly documented, fancybox is one of the worse.
Delete this line:
<a id="popup_img" style="display:none" href="img/popup_img.jpg"><img src="img/popup_img.jpg" alt="" /></a>
Alter about/register/login part like this:
<div class="header-content">
<ul>
<li>About</li>
<li>Register</li>
<li>Login</li>
</ul>
Delete these lines from interface.js
$('#popup_img').fancybox();
$('#register-dialog').fancybox({'type':'inline'});
$('#login-dialog').fancybox({'type':'inline'});
// $('#popup_img').click();
and add this line instead:
$('.header-content ul a').fancybox();
By the way, it's a very well documented and well written plugin and I can't say same thing for your code...
I'm having problems trying to get the back button to show in a nexted list. I can see that the same is happening to your demo's here:
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html
You can see the problem here:
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html&ui-page=Animals-8
or just click any list.
Here is my actually issue:
<ul data-role="listview" data-inset="true">';
<li data-icon="info">
<h3 class="ui-li-heading">Heading here</h3>
<p class="ui-li-desc">Author: <strong>some author</strong></p>
<p class="ui-li-desc">Description: <strong>some description</strong></p>
<ul data-role="listview" data-inset="true" data-add-back-btn="true">
<li>sometthing here</li>
</ul>
</li>
</ul>
Is this a bug or I'm I forgetting something?
Thanks
UPDATE: Another example:
<ul data-role='listview'>
<li>
<li><div>Some Text</div><p>ddd</p>
<ul data-role='listview'>
<li>
some text here
</li>
</ul>
</li>
</li>
</ul>
No back button. How do I make the back button appear?
To reenable the back button simply add data-add-back-btn="true" to the page container:
Related: JQuery Mobile Latest 03 June 2011 Version - No back button
You are using the tests and not the demo, so I guess this would be the latest (or close to) build.
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html
http://jquerymobile.com/demos/1.0a4.1/#docs/lists/index.html
UPDATE:
http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Adding Back buttons
jQuery Mobile has a feature to automatically
create and append "back" buttons to any header, though it is disabled
by default. This is primarily useful in chromeless installed
applications, such as those running in a native app web view. The
framework automatically generates a "back" button on a header when the
page plugin's addBackBtn option is true. This can also be set via
markup if the page div has a data-add-back-btn="true" attribute.
If you use the attribute data-rel="back" on an anchor, any clicks on
that anchor will mimic the back button, going back one history entry
and ignoring the anchor's default href. This is particularly useful
when linking back to a named page, such as a link that says "home", or
when generating "back" buttons with JavaScript, such as a button to
close a dialog. When using this feature in your source markup, be sure
to provide a meaningful href that actually points to the URL of the
referring page (this will allow the feature to work for users in
C-Grade browsers. Also, please keep in mind that if you just want a
reverse transition without actually going back in history, you should
use the data-direction="reverse" attribute instead.
Maybe try:
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.addBackBtn = true;
});