How to use "onload()" function in twig. I tried using windows.load and $(document).ready(function(){ ****** }) but the map does not to load. I got no errors using firebug
Here is the code with both and windows.load
https://gist.github.com/anonymous/f7d6954f172dbf67a6ac
for use without the jQuery library i recommand:
window.onload = function() {
alert('script works');
};
The best option using Twig is to using the javascript block:
...
{% block javascript %}
window.onload = function() {
alert('script works');
};
{% endblock %}
The javascript block will be inserted just before the /body tag.
Do this
<script type="text/javascript">
jQuery(document).ready(function () {
/*ALL YOUR CODE*/
});
</script>
Related
Picture 1 Picture 2 Picture 3 I am building a page in Django that first renders a blank page with a loading picture, and then calls an Ajax get function to one of my views. Once my Ajax get function succeeds, it is supposed to load one of my HTML files. I get a 404 error saying that the template cannot be found, but the template is in the same folder as my other file. Is my file path wrong?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
{% extends "stocks_sites/base.html" %}
<!-- The loading image -->
{% block loader %}
<div id="loading">
<p>Loading</p>
</div>
<div id="articles">
</div>
<script>
// AJAX call when page has loaded
$(document).ready(function(){
$.ajax({
type: "GET",
url: "{% url 'stocks_sites:get_news_articles' %}",
success: function(response) {
const news_articles = response;
const posts = news_articles.posts;
const search = news_articles.search;
document.getElementById("loading").style.display = "none";
$("#articles").load("news_articles.html");
}
});
});
</script>
{% endblock loader %}
I have a input in a td and the click script is not getting picked up and im not sure why? There are no errors in the console.
<td>
<input type="button" class="edit btn btn-primary" value="Edit"></input>
</td>
Script below:
<script>
$('.edit').click(function () {
console.log("Test")
})
</script>
The 'click' even listener might run before the .edit element is rendered to the page. maybe wrap it in a document ready function to ensure it doesn't run till the page is loaded. like this:
$( document ).ready(function() {
$('.edit').click(function () {
console.log("Test")
})
});
Please add jquery.js file first like this.
<script src="https://code.jquery.com/jquery-3.6.0.js"> </script>
<script type="text/javascript">
$('.edit').click(function () {
console.log("Test")
})
</script>
I have an accordion element in my page. The problem is that the accordion appears on the page but it is not clickable. By 'not clickable', I mean that when I click on the header it does not expand to reveal the contents. Nothing happens at all. I hope someone can help.
Thanks in advance.
Your jQuery.js module must be loaded before the semantic-ui accordion.js
module.
Simply put
<script src="js/accordion.js"></script>
after
<script src="js/vendor/jquery-1.11.2.min.js"><\/script>
( or whatever your jQuery version is ... )
and initialize the accordion in the html document inside a script tag as :
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
It happens on nested accordions while you script is under $( document ).ready(function()
So try to call accordion function in an ajax callback like this;
$('input[name=sampleInput]').on('input', function() {
var val = $("input[name=sampleInput]").val();
if (val.length >= 3)
{
$.ajax( {
url: 'sample_handler.php',
type: 'GET',
data: {
data: data
},
dataType: 'html',
success: function ( response ) {
$('.ui.accordion').accordion({});
}
})
}
})
For instance, I've put accordion function in a callback. So I could use it again and again, even I add nested accordions.
In my case I had syntax errors inside javascript/jQuery. After fixing that and importing jQuery module before semantic-ui it works. You can open development tools in the browser and check the console for errors in javascript (F12 in Chrome).
<script type="text/javascript">
$(document).ready(function() {
window.onload = function(){
$('.ui.accordion').accordion();
};
});
</script>
When I try document.querySelector('core-drawer-panel').togglePanel() in the console it works but when I do the following core-drawer-panel is not ready yet?
<template>
<core-drawer-panel forceNarrow>
</core-drawer-panel>
</template>
<script>
document.addEventListener('polymer-ready', function() {
document.querySelector('core-drawer-panel').togglePanel()
console.log('polymer-ready');
});
</script>
Note that I can not wrap it in a polymer element due to issues with other js frameworks.
try this
var template = document.querySelector('template');
template.addEventListener('template-bound', function () {
//code
});
with your element inside a template you need to look for template to be ready not polymer.
I'd like to execute a piece of JavaScript when a certain condition is true in my view model:
<script type="text/javascript">
#if (Model.Employees.Count > 1)
{
executeJsfunction();
}
</script>
This code doesn't compile, how should I do this?
Try with this:
<script type="text/javascript">
#if (Model.Employees.Count > 1)
{
#:executeJsfunction();
}
</script>
Note the "#:"
For multi-line script within the razor conditional block, you can use:
<script type="text/javascript">
#if (Model.Employees.Count > 1)
{
<text>
executeJsfunctionOne();
executeJsfunctionTwo();
executeJsfunctionThree({
"var_one": true,
"var_two": false
});
</text>
}
</script>
This can make it cleaner and more practical than adding #: to each line. Everything within the <text></text> blocks is rendered as script.
If you have more complicated JS, you can do the following (script tags, or any tags, within an #if don't need extra escaping):
#if (Model.Employees.Count > 1)
{
<script type="text/javascript">
$(function() {
executeJsfunction();
});
</script>
}
Use js if-else block, not C#. Js has its own if-else block.
<script type="text/javascript">
if (#Model.Employees.Count > 1)
{
executeJsfunction();
}
</script>
The MVC variables are processed on the server side, the code is always trying to render the Javascript values in order to generate the HTML, please try the code below :
<script type="text/javascript">
#{if (Model.Employees.Count > 1)
{
#:executeJsfunction();
}
}
</script>
I hope this helps.
I know this question posted while ago however I added a new solution as an alternative solution:
you can inject your value from the model into data attribute of selected DOM's element and validate your condition by checking the value of the same data attribute you injected while building your view.
for example, check the following view and the script code snippet how to do it:
<div id="myDiv" data-count="#Model.Employees.Count">
</div>
<script>
if($("#myDiv").data("count") > 1){
executeJsfunction();
}
</script>
In case if you don't want to even render the java script based on some condition
define a section in your layout html
<html>
<body>
#RenderSection("xyz", required: false)
</body>
</html>
in your view
#if (Model.Condition)
{
#section xyz{
<script>
$(function () {
// Your Javascript
});
</script>
}
}
In my case I don't want to expose my Javascript if that feature is not enabled, also it'll reduce the size of the page