Sometimes, I want to load JS from an external source, but only when it's absolutely necessary. Typically, this is done by creating a <script> element with document.createElement('script'), setting the src, and then appending this to the <head>.
However, I'm curious if AlpineJS has a means of doing this—perhaps with <template> or something—without the browser attempting to load the external JS file until I've told it to.
Is this possible?
There is no special handling for this in alpineJs.
You could:
Create a property which defines if the script tag should be loaded or not.
Create a method which creates a <script> tag and appends it to the <head> element.
Add a $watcher on the property you created in the first step where you call the method you created in the second step whenever the value of the property fits your needs.
That should do the job.
Related
I want to put login module in to modal popup. But when I use class="modal" whole page gets loaded in to modal. Can you show me the way to put only module.
This stands also for displaying articles in modal.
here is the link with problem
I do this fairly often and there are two tricks that can help make this work better. First you will likely want to add tmpl=component to your url. This causes Joomla to only display the article instead of the entire template (as long as your template supports this, most do).
This should do pretty well. If you want to get even more selective, you can do one of two things:
Add CSS to hide pieces
.modal-body .other-selector {
display:none;
}
Use Javascript to select only the piece that you want
$('#myModal').on('show', function () {
// selects a piece of the current modal body and sets it as the only content of the modal
$('#myModal .modal-body').html($('#myModal .modal-body').find('.other-selector).html());
})
The way you can only display the component is to add an extra parameter tmpl=component in the url.If you'll see the component.php inside your template folder that has mainly <jdoc:include type="component" /> with no module position.So it'll load only component.
I did not try for module but you can try similar for module.So you can try it by just giving the position of the module in whole template like create a new page called modules.php in your template folder and put the module position inside this page.And you call it in a similar way just like component like tmpl=modules
I hope this will work.
It was problem with my templates component.php file. I just added inside and now it works fine. Thanks guys
Using Cassette.net, MVC 3, Razor, C#, relative locations, and shared layouts, how do you get references in the right order without modifying the original javascript files?
In the shared layout, I reference jQuery like this:
Bundles.Reference("~/Scripts/jquery-1.7.2.js");
Then in the view I add another reference:
Bundles.Reference("~/Scripts/myScript.js");
myScript depends on jQuery, yet Cassette references myScript in front of jQuery:
<script src="/_cassette/asset/Scripts/js/myScript.js?...
<script src="/_cassette/asset/Scripts/jquery-1.7.2.js?...
I find it odd that scripts referenced in child pages render before parent page scripts.
I see you can add notations to your scripts, e.g., /// <reference path="other.js" /> but I really don't want to modify javascript code to include this.
Update:
I added
Bundles.Reference("~/Scripts/jquery-1.7.2.js","head")
Bundles.Reference("~/Scripts/js/myScript.js","body")
which at least puts my script after the jQuery script using #Bundles.RenderScripts("head"); and #Bundles.RenderScripts("body"); within the appropriate tags. It seems to keep the scripts in the order added. I'd still like to know how to custom order these scripts with some type of Bundle.config or how to get parent pages to order scripts before child pages using Shared Layouts.
Use a bundle descriptor file. You can then force the file order.
I sometimes get messed up by the three rendering methods:
Controller::render()
Controller::renderPartial()
Controller::renderFile()
Please could you explain. Thank you!
render() is commonly used to render a view that corresponds to what a user sees as a "page" in your application. It first renders the view you have specified and then renders the layout for the current controller action (if applicable), placing the result of the first render into the layout. It then performs output processing (which at this time means automatically inserting any necessary <script> tags and updating dynamic content) and finally outputs the result.
renderPartial() is commonly used to render a "piece" of a page. The main difference from render() is that this method does not place the results of the render in a layout. By default it also does not perform output processing, but you can override this behavior using the $processOutput parameter.
renderFile() is a low-level method that does the grunt work of rendering: it extracts the data variables in the current scope and then runs the view code. The other two methods internally call this one, but you should practically never need to call it yourself. If you do, keep in mind that you need to pass in a file path (not a view path).
Render File:
Will run the rendering methods on a given file with the set rendering engine. This is fairly low level within Yii and only really used internally or in console commands.
Render Partial:
This takes the alias given and converts it into a file path using all the local variables such as current running controllers and modules and alias definitions. It then pretty much just uses render file.
Render:
This is combination of render partials to make our lives easier. It will render the layout on the currently active contoller, or the defined one, render all the content within it, handle caching of renders, and process the output for client scripts.
Hope that clears it up.
renderPartial() is really useful for displaying ssi components in a page - ie, headers, footers, widgets etc.
I'm using ASP.NET MVC3 with razor engine.I want to apply css class on body tag according to page call.
I want to add class name in child page and it will affect on layout page which has body tag.
and don't want to use jquery because it execute after page render.
How can i do this?
While you may have full control of the HTML a solution was what was needed so here is one ;-)
In the _layout.cshtml page
<body class="#RenderSection("BodyClass", false)">
This will look for a section in all the child pages but says don't worry if it can't find one
Then in your child views just do this
#section BodyClass {productList}
Keep it on one line and then the outputted HTML will look fine, also you can then build up the class names as well.
#section BodyClass {productList generic}
This idea goes perfect with DOM-Ready page specific code, why not checkout
http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/
Or my extended version here
https://github.com/AaronLayton/H5BP-Core
My way lets you do page specific code, but allows you to keep all of the Javascript in separate pages so each page becomes easily manageable. The final step would be to concatenate and minify all the JS into 1 file ;-)
Aaron's answer above works great for MVC 3, but I found that MVC 4 chokes on the single line section statement:
#section BodyClass {productList}
Instead, you need to use:
#section BodyClass {#("productList")}
First of all jQuery's .ready function executes after the DOM is available so it's the optimal moment to start interaction with your page's elements. ( http://api.jquery.com/ready/ ) If you experience a behavior that results in styles 'flicker' you may wan't to apply display:none to body element, and removing it after you css class has been applied.
but if you really don't want to use jQuery you should consider either making a variable to hold your css class name as a part of a viewmodel your controller will be sending to Views, or going with ViewBag.CssClass that should be declared in each of your controller's actions (or in base controller's OnActionExecuting method.
Thing to consider here is understanding and following MVC pattern, where View and Business Logic should be separated. So in my opinion you should rather avoid involving controllers in view building process.
It's much easier to simply put the following in your main layout
<body class="#ViewBag.BodyClass">
Then in the content pages put:
#{
ViewBag.BodyClass = "myClass";
}
Problem solved!
When I set a cffunction's access to remote--so I can call it through AJAX--the call returns the HTML I have in my Application.cfm template.
Is there any way around this, or do I have to move the HTML out of Application.cfm?
This would be considered expected behavior. I'd suggest not outputting content within your Application.cfm. Consider using custom tags for wrapping your pages or better yet switch to using Application.cfc and use custom tags.