i set my own template and now i want to load a module to the main content div. In the main template file there is this tag {content}. If i browse through my page into this all modules Content is loaded.
Now i want load a module manualy to this div by ajax. So if i click on a Link i want to load it. Somethink like this:
$( document ).ready(function() {
$("#change").click(function() {
$("#content").load('module/mymodule/template/myfile.html.php');
});
});
But i want to load the whole module not only a template file.
What must i do?
Or maybe it is possible to load a Block into this div. I think this is a better solution.
If you want to call a block file within a template then you have to use : {module name="feed.comment"} this code will call comment block of feed module.
Related
I have a {{!! Form::model!!}} where I am passing a variable $values from the Controller and displaying it inside of the Form select those values. In mine main blade i have 3 additional blades I am including through
#if($jobs->open)
#include('jobs.review.open')
#endif
I am trying to load the data $jobs from controller only when someone clicks , I figured to do some by create an ajax call with onclick event, so i have the data $jobs back. An only now trying to include jobs.review.open blade.
Any help will be appreciated
One common strategy is to put the rendering in the AJAX call. The server returns a ready-to-go chunk of HTML in its reply, and the JavaScript code simply inserts it into the DOM at the appropriate place with innerHTML. The server uses a blade to prepare the HTML that it then returns.
The initial page HTML that is displayed doesn't include the content, but does include dummy placeholder <div>s which mark the places where the HTML will be inserted.
I have javascript files defined in the <head> of both my layout decorator template and my individual pages which are decorated. When I update a thymeleaf fragment in one of my pages the javascript defined in the head of the parent page no longer works. Is there a standard way to 'refresh' these js files?
Thanks.
Additional clarification :
I have a form submitted by an ajax call which updates a table in the page. I have a Jquery onClick function targeting a button in the updated table. The javascript doesn't seem able to bind to the returned elements in the updated part of the page. I select by element class and can see that the selection works prior to the partial fragment render.
For me it is unclear what you mean by
javascript defined in the head of the parent page no longer works.
The page is created on the server. Normally it contains urls of the javascript files
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
In this case 'refreshing' the javascript files can happen only in the client.
Check the html of the page in the client.
Are the tags as expected ?
Are there tags for all expected javascript files ?
With the browser tools (for example Google Chrom developer tools ) check that all script files are actually loaded.
If this doesnt help, it could be that the order of the script tags has changed between the first and second load. This could cause a different behaviour of the javascript executed in the browser.
EDIT :
With the initial load you bind javascript callbacks to dom elements.
You do this directly or through Jquery or other libraries.
When a new dom element is loaded, it has no callbacks bound to it, even if it has the same id as a replaced dom element.
So after the load you have to bind your callbacks again.
If you bound them 'by hand', just bind it again.
If you are using a JQuery plugin, that made the bindings, look into the code or documentation, many of them have a function for that or you can call initialization again.
Once you added new content to the DOM you need to bind again the new content.
Let's say I have a button with some class, the event in binded to the class:
<button class="someclass">Button 1</button>
<script>
var something = function() {
// do something
};
$(".someclass").on("click", something);
</script>
If I add more buttons from the same class to the DOM, they will have not have the click event binded. So once you load the new content via ajax, also remove all binding and add again (you need to remove or you will have buttons with 2 events).
$(".someclass").off("click");
$(".someclass").on("click" , something);
I'm attempting to run the following simple bit of code on an html snippet contained in a php file, loaded with jquery's .load() function:
$(".thumbnail").on("click", function(event){
alert("thumbnail clicked");
});
However, I can't seem to get it to work on this portion of my page. I have other calls to elements not loaded via ajax and they work fine with the .on() function. I was under the impression that .on() would recognize ajax loaded content.
My .thumbnail elements are pictures in img tags contained within a series of divs all loaded via ajax, jquery can't seem to find any of this content. All of my code is contained within the ready function.
Is there a way to get jquery to recognize these new elements?
Thanks.
You need a delegated event handler for dynamic content :
$('#container').load('somefile.php');
$('#container').on('click', '.thumbnail', function(event){
// do stuff
});
The closest non-dynamic parent would probably be the element you're loading the content into, and you need to attach the event handler to that element, filtering based on the .thumbnail class, like the code above.
I am trying to load in some text from another page, however I want to prepend it rather than replace.
So at the moment I have:
$('#01-L1-00-Container').load('Page.aspx #Q-01-L1-00');
But '01-L1-00-Container' includes some content I need to keep and cannot overwrite. How do I prepend instead of replace?
You can either do this:
$("#01-L1-00-Container").prepend( $("<div>").load("Page.aspx #Q-01-L1-00"));
Or
$("<div>").load("Page.aspx #Q-01-L1-00", function() {
$("#01-L1-00-Container").prepend($(this).find("#Q-01-L1-00").html());
});
These both work by creating a div in the dom, loading the new page (with ajax) into that div and then prepending the newly created div to the container.
Assuming you don't want to append the data to some other element inside the container, you can't do this with .load alone, but it is easy:
$.get('Page.aspx').done(function (html) {
$(html).find('#Q-01-L1-00').prependTo("#01-L1-00-Container');
});
Try this instead :
$("#01-L1-00-Container").prepend($("<div />").load("URL of Page"));
Hope this will help !!
I'd like to use razor syntax inside my Javascript files. Is this possible without including the javascript inline into the page?
I found a razor engine RazorJS on nuget that solves # in js files
The owner blog and explanations about the package abilities
The Nuget package
see more in this question
The Razor engine only runs against the page, not any included javascript files.
You could write a custom parser that will run the view engine against any javascript files before serving them, and I imagine any attempt to do so would be a very useful open source project.
However, the simplest solution that comes to mind (if these variables are not sematically linked to any DOM elements) is to simply declare and initialise your variables in the page (or in an included partial page) and your javascript (in .js files) relies on these variables being defined.
If however the variables that you require are logically associated with DOM elements, I prefer to use data-* attributes to define these, this way your javascript can be consumed by the html, rather than the other way around. For example, if you have a content area that should be automatically updated by javascript (using jQuery as an example here):
HTML:
<div data-auto-refresh="pathToContent" data-auto-refresh-milliseconds="1000"></div>
Javascript:
$(function() {
$('[data-auto-refresh]').each(function() {
var self = $(this);
var url = self.data('auto-refresh');
var interval = self.data('auto-refresh-milliseconds');
// Code to handle refresh here ...
});
});
You can set the value in hidden field in yout cshtml file , and then in your javascript files you can access the hidden field.