django onclick load template to {% block %} using ajax - ajax

Im creating a webapplication in django to which Im very new.
what I want to do is on user click open a modal window (basically just an absloute positioned div) which contains a {% block some_content%} tag. This block should then contain either a log in form or a register form (or anything else). I want to load this using ajax (so that nothing is loaded in vain).
here is the part of my template where i want the stuff to appear:
<div id="modal" style="position: absolute; top: 60px; left: 100px; height: 400px; width:700px; background: #777; z-index: 20">
<div class="button">Test</div>
<br />
{% block test_content %}{% endblock test_content %}
</div>
and here is my ajax.py
#dajaxice_register
def tester1(request, user_id):
print "test " + user_id
#contenxt = Context({'items': range(2)})
print "1"
return_str = render_block_to_string('my_site/testr.html', 'test_content')
print "7"
return HttpResponse(return_str)
Im using snippet http://djangosnippets.org/snippets/942/
following the print "#" leads me to believe that this works all the way up to the
return HttpResponse(return_str)
where nothing seems to happen, not even an error message.
forgot to include the template i want to load to the block:
{% extends "my_site/header.html" %}
{% load url from future %}
{% block test_content %}
<div style="background: red; height: 70%; width:90%">
<span>HEJ!!!</span>
</div>
{% endblock test_content %}
if there is a better approach Ill be glad to know about it but remember, Im new to django so please go slow.

You seem to be using the Dajax framework. Have a look at the examples there.
Some of those examples may be outdated so take a look at this site.
If you have Dajax and Dajaxice installed you can do something like
<div id="test_content"></div>
load ajax content
ajax.py in your app
#dajaxice_register
def ajax_test:
str = 'Hello World'
dajax = Dajax()
dajax.assign('#test_content', 'innerHTML', str)
return dajax.json()

So, here is my solution:
I have Dajax installed. The reason it didn't work is below but here is a complete solution that works.
html:
<input type="button" name="testerbutton" value="Test" id="testerbutton" onclick="Dajaxice.my_site.tester1(Dajax.process);">
<br />
<div name="result" value="" id="result">
ajax.py:
#dajaxice_register
def tester1(request):
dajax = Dajax()
str = render_to_string('my_site/testr.html')
dajax.assign('#result', 'innerHTML', str)
return dajax.json()
testr.html:
<div style="background: red; height: 70%; width:90%">
<span>HEJ!!!</span>
</div>
And the most important part -- something it appears I can only blame myself for: make sure you correctly import jquery.dajax.core.js in your header. Otherwise Dajax.process does nothing.
Thanks #pyronic for the help.

Related

How to embed html using plugin in Jekyll?

I have this problem I want to inject html into markdown file (blog post) but It's little bit long so I want to have plugin with parameters because it will change and I may add it multiple times. When search inject html I only found that you can insert html directly into markdown files, but I want to have one tag that will do this for me, to not duplicate the code, it will also be easier to update if Codepen decide to change the embed code.
This is the code I want to add, Codepen embed demo with button:
<div id="codepen">
<button class="btn" onclick="document.body.classList.toggle('sticky')">Dock</button>
<iframe height="265" scrolling="no" title="in browser sql terminal"
src="//codepen.io/jcubic/embed/dVBaRm/?height=265&theme-id=dark&default-tab=result"
frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/jcubic/pen/dVBaRm/'>in browser sql terminal</a> by Jakub T. Jankiewicz
(<a href='https://codepen.io/jcubic'>#jcubic</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
</div>
I want to have params username and id (maybe also title and full name), what is the easiest way to create such plugin and how to use in my markdown file?
You don't need a plugin to do this.
You can use a Jekyll include.
example_page.html
---
layout: page
title: Codepen include example
codepen:
author: jcubic
name: Jakub T. Jankiewicz
id: dVBaRm
title: "in browser sql terminal"
---
{% include codepen.html %}
_includes/codepen.html
{% if page.codepen %}
{% assign c = page.codepen %}
<div id="codepen">
<button class="btn" onclick="document.body.classList.toggle('sticky')">Dock</button>
<iframe height="265" scrolling="no" title="{{ c.title }}"
src="//codepen.io/{{ c.author }}/embed/{{ c.id }}/?height=265&theme-id=dark&default-tab=result"
frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/{{ c.author }}/pen/{{ c.id }}/'>in browser sql terminal</a> by {{ c.name }}
(<a href='https://codepen.io/{{ c.author }}'>#{{ c.author }}</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
</div>
{% endif %}
You can also use a parametrized include.
{% include codepen_param.html
author="jcubic"
name="Jakub T. Jankiewicz"
id="dVBaRm"
title="in browser sql terminal"
%}
_includes/codepen_param.html
{% assign pen = include %}
<div id="codepen">
<button class="btn" onclick="document.body.classList.toggle('sticky')">Dock</button>
<iframe height="265" scrolling="no" title="{{ pen.title }}"
src="//codepen.io/{{ pen.author }}/embed/{{ pen.id }}/?height=265&theme-id=dark&default-tab=result"
frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/{{ pen.author }}/pen/{{ pen.id }}/'>in browser sql terminal</a> by {{ pen.name }}
(<a href='https://codepen.io/{{ pen.author }}'>#{{ pen.author }}</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
</div>
Like this, you can call any number of pens from your page.

Jekyll render partial inside markdown

We are attempting to move sites to Jekyll, and have a BS4 theme. In order to make it user friendly to the content managers, I've placed the following in my page layout:
<div class="container">
<div class="row">
<div class="col-md-12">
{{ content }}
</div>
</div>
</div>
However, I'd like to create a liquid tag or filter to allow for full-width images to be injected into the middle of the page. This would close the three container divs above the image, write out the image, and the create new divs below, and continue to write the markdown file. i.e.
{% fullwidth xenia-map.png %}
would produce something like this in the middle of the page:
</div>
</div>
</div>
<img src="input.jpg" class="img-responsive" />
<div class="container">
<div class="row">
<div class="col-md-12">
I have been able to create a filter and a tag (class) that will do 80%, however neither will write out closing tags at the beginning of the output. I just get the <img> tag.
Here's my class:
class FullWidth < Liquid::Tag
def initialize(tag_name, image, tokens)
super
#image = image.strip
end
def render(context)
"</div></div></div><img src='uploads/#{#image}' class='img-responsive'>"
end
end
Liquid::Template.register_tag('fw', FullWidth)
Your problem looks like an escaping issue.
Although I like the simplicity of your solution, I would consider two alternatives. The first ('include' solution) because it is easier to implement (anyone can make that one work). The second one ('javascript' solution) because it will allow your content editors to use a regular/graphical markdown editor and it will keep your markdown clean and reusable for other purposes.
'Include' solution
Just put an include in your markdown/html:
{% include fullwidth.html image="/uploads/xenia-map.png" %}
... and use this 'fullwidth.html':
</div>
</div>
</div>
<img src="{{ include.image }}" class="img-responsive" />
<div class="container">
<div class="row">
<div class="col-md-12">
'Javascript' solution
Use this markdown (or let a regular/graphical markdown editor generate this):
![Xenia map](/uploads/xenia-map.png){: .fullwidth}
... and use this jQuery:
$(document).ready(function(){
$('img.fullwidth').each(function() {
var img = $(this).parent().html();
$(this).unwrap();
document.body.innerHTML = document.body.innerHTML.replace(img,
'</div></div></div>'+img+'<div class="container"><div class="row"><div class="col-md-12">');;
});
});

How to use ngStyle for background url in Angular 4

I have below html:
<li>
<div class="w3l_banner_nav_right_banner1" style="background:url('./assets/images/2.jpg') no-repeat 0px 0px;">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now
</div>
</div>
</li>
Problem:
I want to replace image url /assets/images/2.jpg with dynamic variable like {{ article.uri }}.
I tried with several way from below ref:
Attribute property binding for background-image url in Angular 2
How to add background-image using ngStyle (angular2)?
Tried so far:
<li *ngFor="let article of arr;let i=index;">
<div *ngIf="i == 0" class="w3l_banner_nav_right_banner" [ngStyle]="{ 'background-url': 'url('+article.uri+')'} no-repeat 0px 0px;">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now1
</div>
</div>
</li>
I am using Angular 4.1.3.
background-url is incorrect CSS, use background or background-image instead.
Here is an example of correct syntax:
<div [ngStyle]="{'background': '#fff url(' + article.uri + ') no-repeat 0 0'}"></div>
Your full example would look like this:
<li *ngFor="let article of arr; let i=index;" >
<div *ngIf="i == 0"
class="w3l_banner_nav_right_banner"
[ngStyle]="{'background': '#fff url(' + article.uri + ') no-repeat 0 0'}" >
<h3> Make your <span>food</span> with Spicy. </h3>
<div class="more">
Shop now1
</div>
</div>
</li>
If you're getting your background image from a remote source or a user input you will need to have angular sanitize the url. In your component you will want to add the following bits of code...
import { DomSanitizer } from '#angular/platform-browser';
export class YourComponent {
constructor(private _sanitizer: DomSanitizer) { }
public sanitizeImage(image: string) {
return this._sanitizer.bypassSecurityTrustStyle(`url(${image})`);
}
}
Try setting your HTML to this...
<li *ngFor="let article of arr;let i=index;">
<div *ngIf="i == 0" class="w3l_banner_nav_right_banner" [style.background-image]="sanitizeImage(article.uri)">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now1
</div>
</div>
</li>
And apply the no-repeat 0px 0px; in some class you attach to the div.
The correct answer is [style.background-image]="'url(' + article.uri + ')'"
but if you are using ngFor for carousel, make sure you have added class 'active' properly.
This code will NOT working:
<div class="carousel-item active"
*ngFor="let article of arr;"
[style.background-image]="'url(' + article.uri + ')'"></div>
You should use 'active' class for first item only!
<div class="carousel-item"
*ngFor="let article of arr; let i = index;"
[ngClass]="{'active': i === 0}"
[style.background-image]="'url(' + article.uri + ')'"></div>
you can use it by adding url path in a single variable.
for example
bgImageVariable="www.domain.com/path/img.jpg";
[ngStyle]="{'background-image': 'url(' + bgImageVariable + ')'}"
Working for Angular 8+ (Power of template literals):
In component, define ngStyle object var (here called as styles, initialised in constructor):
const bgImageUrl = 'assets/images/dot-grid.png'
const styles = {
backgroundImage: `url(${bgImageUrl})`
};
In template, assign this as ngStyle
<div [ngStyle]="styles"><!-- your content --></div>
In my case the following syntax worked:
<ion-slide *ngFor="let page of pages">
<div class="cardImage" style.background-image="url('{{ page.imageUrl }}')"></div>
</ion-slide>
Ionic CLI : 6.16.3
This works fine for me:
js file:
path = 'url(../assets/about.png)';
array:
string[] = [this.path];
and HTML file:
<div *ngFor="let item of array" [ngStyle]="{'background-image': item}">
To solve this, the correct syntax is
<div class="modalContainer"
ng-style="{'background-image': 'url(' + selectedMeal.url + ')'}">
Mark answer if it helps.

Why won't datepicker work in a twig in userfrosting?

Bit of a beginner here and this issue has been causing me a headache for over a day. I'm using userfrosting as a framework, with the usual twig files for the web pages.
I'm trying to include a datepicker (bootstrap-datepicker.js hasn't worked, neither is the current iteration using jquery-ui) in a form in a twig - but no matter what I do, I can't get it to work!
Here's the basic setup:
{% block head %}
{{ parent() }}
<script src="{{site.uri.js}}/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="{{site.uri.js}}/custom.js" ></script>
{% endblock %}
{% block content %}
.... {{boring stuff missed out}}
<form class="form-inline" role="form">
.... {{boring stuff missed out}}
<div class="form-group row">
<label for="datepicker" class="col-sm-3 form-control-label">Subject Date:</label>
<div class="col-sm-6">
<input type="date" class="form-control" id="datepicker" />
</div>
</div>
.... {{boring stuff missed out}}
</form>
.... {{boring stuff missed out}}
{% endblock %}
{% block javascripts %}
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
{% endblock %}
The box is on the page, you can type a date into it etc, but nothing appears when you click on it (there should be a calendar appearing.)
Anyone have any ideas? I'm at a total loss. I've tried various versions, locally and (as you can see, currently) on a CDN, but nothing works. I'm sure it's probably something basic as I'm not an experienced web dev or anything, but any advice or working examples would be gratefully received!
Uh! facepalm
Well, after some digging and serious consideration of the inspector output (thanks CTRL-SHIFT-I!) it turns out to be a simple case of script loading order and multiple scripts being loaded.
I didn't realise twig loads a whole bucketload of scripts on top of what I ask it to load in the template I was creating. Only after seeing the inspector output for the page did I see that I was trying to load two different versions of jQuery and my own custom script was being loaded out of order - I was loading them here:
{% block head %}
{{ parent() }}
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="{{site.uri.js}}/custom.js" ></script>
{% endblock %}
that block should be reserved for stylesheets. Instead, I should be loading them here:
{% block page_scripts %}
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="{{site.uri.js}}/custom.js"></script>
{% endblock %}
... so that they are loaded AFTER all the default Bootstrap and userfrosting scripts.
https://jqueryui.com/datepicker/ uses type="text" for the input field. When I google the matter it seems that type="date" has at least previously caused problems.
In short: I would try changing type="date" to type="text".

BigCartel - Removing sidebar on Entry Page in 'Sidecar' theme

So I'm trying to make an entry page in the BigCartel theme 'Sidecar'. I have managed to get an image in there fine that is clickable to be redirected to my products however I want to be able to remove the side navigation links/icons on the entry page - so it's purely just the image being shown & once the customer clicks on the image to be taken to the shop the side bar appears - is this doable?
I appreciate all thoughts & comments - thanks much!
There might be more elegant methods, but this seems to work.
(1) In 'Layout', find <aside> and add {% if page.name != 'Home' %} before it, like:
{% if page.name != 'Home' %}
<aside>
Then find </aside> and add {% endif %} after it:
</aside>
{% endif %}
The sidebar is <aside>, so what we're doing here is only including that code if the page name is not 'Home'.
(2) In 'CSS', find:
.page.home {
margin-right: 16px;
padding-top: 60px;
}
And change it to:
.page.home {
margin-right: 16px;
margin-left: 16px;
padding-top: 60px;
}
The .page class usually has a margin-left of 260px to provide space for the sidebar, so here we're overriding it when we're on the home page.

Resources