Im currently building a website with django and htmx and i like the combination so far. Lets say I use an htmx attribute on a button to replace a div in the DOM with another div that is supposed to contain a wysiwyg editor. Now the wysiwyg editor has to be initialized with javascript. How do I do this? Can I just return the script tag under the editor div that is being requested with htmx? Wouldnt that be also a little ugly or bad practice because youd have script tags in the middle of the html body? Whats the best way of solving this?
Thanks in advance
If it's just a single htmx:afterRequest event that you are trying to listen to (or if you have code that should run after all htmx requests) then you can use the below code to run your Javascript code after any successful request is completed:
document.addEventListener('htmx:afterRequest', function() {
// Put the JS code that you want to run here
});
If you want it to run after a specific event only, you need access to the (evt) associated with the event, to which you should refer to the official docs here.
Check out HTMX after request event.
It should look something like this
htmx.on('afterRequest', (evt) => {
// check which element triggered the htmx request. If it's the one you want call the function you need
})
Related
I have a fairly complex text that I need to generate programmatically for display within an ember template. So far I have put this text construction into a controller.
Unfortunately, the text also needs to contain hyperlinks to other pages within the same ember app. When I just insert a href links into the text, ember does not recognize those links and triggers a full page reload upon following the link.
Is there a way to invoke ember's linkTo helper from within a controller?
I could also try to put this into a template, but the logic is fairly complex and emblem is somewhat limiting in this regard.
You can use an action in the template and inside the action you can do this.transitionToRoute
http://emberjs.jsbin.com/uMeQAvuk/1/edit
BTW, the only reason it should be causing a full page refresh is if something is different in the base url (before the hash) than the current page, or if it is doing some sort of page refresh instead of just an anchor tag.
Is there a way to auto refresh an HTML table inside a DIV tag every few seconds without refreshing the whole page?
There are more than one ways to achieve this. Easiest thing that comes to mind is have a Javascript timer run every few seconds to make an AJAX call to refresh the DIV tag enclosing the table.
Here is some info on Javascript timing functions
http://www.w3schools.com/js/js_timing.asp
You can choose some javascript frameworks thats already use Ajax to do it.
For example Extjs libraty. In this library you will need to invoke method of the store
I'm not really experienced with web development especially on views , I need a simple explanation (and pointers to a resource would be really nice as well) on how to deal with rendering a layout or a template partially without rendering whole page again...
What is the best practice?
Does Sitemesh layouts provide this? if so how ?
Shall I use JQuery pass the data as JSON from controller and update the corresponding div with ".html()" ? (which i did something like this a long time ago for some basic stuff, and think this is not really a grails way to do it)
or <g:include> does this for me?
Everything I read about this confused me even more :)
Actually the question is, what is the best practice in Grails to handle partial page updates (with Ajax or without ajax if there is any other ways these days)
Thanks in advance
EDIT:
this tutorial actually gives a really good idea of how to do it
What is the best practice?
The usual practice is to submit an AJAX request (i.e. a HTTP request triggered from JavaScript), and use a JavaScript callback function that updates a section of the page when a response is returned.
Does Sitemesh layouts provide this? if so how ?
When an AJAX request is received on the server-side, you could layout the response using Sitemesh in the same way that you can layout the response of a non-AJAX request. Sitemesh doesn't know or care what kind of request is being processed or whether it's laying out a whole page or just a fragment.
Shall I use JQuery pass the data as JSON from controller and update the corresponding div with ".html()"
Have a look at the tags provided by Grails that have the word "remote" somewhere in the tag name. They provide a very simple way to perform common AJAX tasks within a Grails application. For example, to submit an AJAX request to an action named bookByName and add the response to an element with id foo, simply add the following tag to your page.
<g:remoteFunction action='bookByName' update='foo'/>
Probably you need to use RemoteLink tag: http://grails.org/doc/latest/ref/Tags/remoteLink.html
You can configure it to update some fragment of your page, after calling an remote action.
BTW, it's grails way too, to use ajax and javascript, on client side :)
Hey everyone, I would appreciate a pointing in the right direction with the problem I'm having. In short, I'm working on an application that will create PDFs using TinyMCE and ColdFusion 8. I have the ability to create a PDF by just entering in text, pictures, etc. However, I want to be able to import an html template and insert it into the TinyMCE .
Basically, I have a file directory code snippet that lets me browse through my 'HTMLTemplates' folder, and am able to select an HTML document. Now, I want to be able to take all the code from that selected HTML document and insert it into my TinyMCE box. Any tips on how I might do this, maybe?
Thanks!
If I understood you correctly, you already have a TinyMCE plugin which pops up a window and allows you to browse the certain directory using existing cfm page which you render within the popup window. Right?
If not, you should start with this. Not sure how easy it is done in current version, but in the older TinyMCE I've created the custom upload plugin (needed to track the site security permissions for current user) pretty quickly.
Next, I can see two quick ways to pass the server file contents to the client-side:
Make it available via HTTP so you can make the GET request and read contents into the variable.
Output it on the page using CF (say, on form submit when file selected) and grab using JavaScript.
I'd personally tried the second option. After you grab the text into the variable you can put it into the TinyMCE using it's API.
It can be as simple as output escaped text into the hidden div with known ID and read it using DOM operations (assuming that there is cfoutput around):
<div id="myTemplate">#HTMLEditFormat(myFileContents)#</div>
Also you can output the text directly into the JavaScript variable (of cource, with accurate escaping), maybe like this.
<script type="text/javascript">
var text = '#HTMLEditFormat(myFileContents)#';
</script>
Most advanced and possibly better for performance (and definitely "cooler") way is to use the concept of script tags as data containers, like this:
<script type="text/plain">
#HTMLEditFormat(myFileContents)#
</script>
Last time I've seen this in Nadel's blog, I think. Read it, pretty interesting.
Hope this helps.
I have some links on an html page like , , currently I handle them as so
<p> rate down
and have a url.py entry:
(r'^cases/(?P<case_id>\d+)/case_rate/(?P<oper>.)$', 'mysite.cases.views.case_rate'),
then I have a view function that handles the logic and hits the DB, then does this:
return HttpResponseRedirect(request.META.get('HTTP_REFERER','/'))
I's there a better way to do this? I can see how this would be OK because it does have to redraw the screen to show the new rating...
The typical way to handle this is with an ajax request.
Instead of a link, you put a javascript handler that calls a view, wich updates the db, and returns a json / xml object with the new rating for the item. Then another javascript handle receives that response and updates the rating number on the screen, without a page reload.
Ideally, you'll keep both versions: plain html (the one you currently have) and the ajax one. The ajax one can be attach to the element after page load, so if javascript is not available, you'll still have a working site.
Then, regarding organization, you can have an "ajax" parameter on your view. The view should update the db accordingly, and if it's an ajax call, return the json / xml response, otherwise, return the new page. That way you can keep the logic (fetching the object, updating the db) on one place.
If you're asking whether case_rate should still go in the views.py given that it returns a redirect rather than providing content, the answer is yes, since case_rate is handling an request and returning a response.
But consider a situation where you had two view functions in views.py that had some duplicate code, and you chose to factor that duplicate code into another function that didn't both take request and return a response. Would that be fair game to leave in views.py? Sure, if moving it elsewhere would make the code harder to read. Or you might choose to put it elsewhere. It's really your call based on your sense of taste.