I've tried putting my fragments in {root}/fragments/myFragment.html and also {root}/src/fragments/myFragment.html and neither seemed to work.
Also from my behaviors.css
.tableFragment{
-randori-fragment: "fragments/tableFragment.html";
}
and I can't seem to get things going. Is there a missing step? Finally my view:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body class="tab-content boxoffice">
<h1>Box Office</h1>
<div class="tableFragment"></div>
</body>
</html>
Fragments do work.
They should be in the main project directory, not the src, just to be clear on why:
The only thing that goes in src is source code that is being cross compiled. HTML shouldn't be in the src folder, we don't cross compile it.
One thing I did notice... IF you have an older SDK, there was a bug fixed in v0.2.4 IU believe where the space between .tableFragment and { mattered. You can try adding a space there else as a next step to debug, take a look at the network tab in chrome or your browser of choice and watch what is loading. Does it try to load the HTML at all?
Related
I'm Sreenesh, a beginner in Django web framework.
I've been facing some problems while doing a project.
this is my
OUTPUT of my django website which is not what i expected it to be.
this is my
HTML CODE from this I think you can say output is not the desired one.
command prompt throws me these 2 errors CMD PROMPT and I'm unable to fix these problems on my own as I'm a self learner.this is my bootstrap files directory as you can see the path I specified in link tag in my html code is right. this is my Settings.py and Url.py. Could anyone help me where i am doing wrong and how to fix these problems so I can get ahead with my project and learn some valuable lessons. Thank you everyone.
Update: this is my folder tree for those who need it for some verifications.
If you are facing some trouble wile using bootstrap in local then use CDN
in your base html file :
Into the <head> tag
<!-- Boostrap css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
Just before closing the body tag
<!-- jQuery and Bootstrap js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
Try it and let us know the result
You are getting a 404 error (does not exist) when it tries to load bootstrap.min.css. So, it's not in the folder specified by
{% static css/css/bootstrap.min.css %}
(or possibly, there's a file protection problem). Anyway, I think that translates to $BASE_DIR/static/css/css/bootstrap.min.css (using Linux notation, I don't do Windows).
Check that the file is there? And to debug in case I'm wrong, you can get the actual path it's looking for by using the same template tag to generate visible HTML content, or an HTML comment that you can see with your browser view page source
<!-- trying to load bootstrap from {% static css/css/bootstrap.min.css %} -->
edit: Following #eyllanesc comment, here is a minimal example hosted on github. The test is run on Qt5.9, on OS X 10.12.
Base HTML
Let's create a minimal example HTML loading an image by relative path, test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div>Image:</div>
<img src="img.jpg"></img>
</body>
</html>
This file is created in a folder also containing img.jpg (which should be a picture of an adorable puppy)
When test.html is opened directly in the browser, it shows the image as expected.
The problem with qrc and relative paths
Now, if we embed both resources into a Qt application, with the following .qrc file:
<!DOCTYPE RCC><RCC version="1.0">
<qresource>
<file alias="test.html">resources/web/test.html</file>
<file alias="img.jpg">resources/web/img.jpg</file>
</qresource>
</RCC>
We can open the HTML page in a QWebEngineView with some code of the form:
mWebView->load(QUrl{"qrc:///test.html"});
The page is loaded, but the image is not.
Enabling the web developer console (by running the app with argument --remote-debugging-port=8888) and going to the Network tab, we can see that there is not even an attempt to load img.jpg.
With absolute path, no problem
If the image element was changed to <img src="qrc:///img.jpg"></img>, then everything works fine and the image is loaded.
Questions
Is this limitation of the qrc system by design?
Is there a way to work around it? (without hardcoding the absolute path with the scheme)
The main problem seems to be how the URL of the .html file is declared:
In the case of #ad-n he followed the docs:
...
For example, the file path :/images/cut.png or the URL
qrc:/// images/cut.png would give access to the cut.png file, whose
location in the application's source tree is images/cut.png. This can
be changed using the file tag's alias attribute:
...
And use: qrc:///home.html
However in my case I used Qt Creator to provide me the url as shown in the following image:
And use: qrc:/home.html
That's why I work on my case.
Investigating the problem, it turns out that getting rid of all aliases in the .rcc file, and changing the resource path accordingly in the code, make it possible to use relative pathes.
Here are the changes to the sources:
<!DOCTYPE RCC><RCC version="1.0">
<qresource>
<file>resources/web/test.html</file>
<file>resources/web/img.jpg</file>
</qresource>
</RCC>
-
mWebView->load(QUrl{"qrc:///resources/web/test.html"});
I do not accept this answer yet, as it feels like a workaround. Hopefully there is a way to have it work with aliases.
I have a section of my site in a subdirectory. My slicknav code works fine for any file in the main directory, hiding the regular navigation on small screens and displaying the hamburger menu icon instead. I assume I need to modify it to work correctly for a page in the subdirectory. I don't see how to do it.
designsondemand.com/about.htm works fine with this standard code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu').slicknav();
});
</script>
But designsondemand.com/products/mugs.htm does not execute the code. I have set the link rel to reference the absolute file location, thinking that might be the problem.
<link rel="stylesheet" href="http://www.designsondemand.com/slicknavstyle.css">
<link rel="stylesheet" href="http://www.designsondemand.com/slicknav.css">
I would like to know if I can modify my JavaScript slicknav code to execute properly on a subdirectory, or if the only solution is to change my site's structure to do away with subdirectories.
Fresh night of sleep, new idea on Google search to answer my question. Today it was a search on "jquery on subdirectory." Answers seemed semi-relevant, and in the first one I got the answer although it took two tries. But SUCCESS!
The answer is to modify the script
<script src="jquery.slicknav.js"></script>
to instead include a leading slash to tell the page to find the code up one directory.
<script src="/jquery.slicknav.js"></script>
If this seems not-so-helpful (Noting the 'too localized' close votes), then please tell me why. I think Django and JQuery UI make a pretty good team so it's worth working out any gotchas about using them. The answer to this question is not something I've found documented or in another question and is relevant to use of other widgets in other places.
And on to the question...
I have a django project in development mode. Inside its static directory I have the following file structure:
directory: js
jquery-1.9.1.js
jquery-ui-1.10.1.custom.js
other_stuff.js
directory: css
directory: ui-lightness
directory: images
jquery-ui-1.10.1.custom.css
jquery-ui-1.10.1.custom.min.css
I'm trying to get the datepicker to work on one of my forms:
In my html head I have:
<link type="text/css" rel="stylesheet" href="/static/css/ui-lightness/jquery-ui-1.10.1.custom.css"/>
<script src="/static/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/static/js/jquery-ui-1.10.1.custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#id_date_of_birth").datepicker();
});
</script>
And the input I am trying to change looks like:
<input type="text" size="10" id="id_date_of_birth" class="vDateField" value="1987-01-19" name="date_of_birth"/>
Now I know this question has been asked like a billion times before but none of the listed solutions I have read so far seem to work...Can anybody hazard a guess as to why I am getting the error$(...).datepicker is not a function ?
Stuff I've considered:
Everything seems to be included in the correct order. Other solutions mention including jquery ui's ...core.js but I think everything is included in jquery-ui-1.10.1.custom.js because otherwise the jquery ui download page is very misleading (I chose to download every component and there is no effect)
No other errors came up except the one I mentioned. All scripts loaded correctly
Nothing is included more than once
I'm waiting until the document is ready before calling anything at all so my problem is not due to bad timing
If the directory structure you listed is accurate, your jquery files do not end with ".js", while your references to those files do have ".js" in the page header. Add the ".js" extension to your jquery files and it should work.
you should also close your input element:
<input type="text" size="10" id="id_date_of_birth" class="vDateField" value="1987-01-19" name="date_of_birth" **/**>
For some reason the link wanted a separate closing tag...
<link type="text/css" rel="stylesheet" href="/static/css/ui-lightness/jquery-ui-1.10.1.custom.css"><link/>
This happened to me several times.
What i did was to copy the whole code (script) and placed it in the parent view.
If you're trying to place the script in a partial it may not work, try to put it in a higher level until you get the job done.
One example in django-oscar i had to place the script in the basket.html template to make it work in here:
{% include 'basket/partials/basket_content.html' %}
I'm going to be printing out a bunch of HTML5 examples that will be presented in a book format. With this constraint, space is at a premium, so every line I can remove is helpful. I'd like a minimal setup that is clear, but correct, and won't steer anyone down the wrong path.
This is the template I have so far:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- examples... -->
</body>
</html>
I see <meta charset="utf-8"> in every html5 template on the web. Obviously it's best practice to keep it in, but is it so important that I can't remove it, even if it doesn't affect the examples I've provided. Likewise with <!doctype html>.
I could always provide a more robust example in the introduction, but as I expect people to cut-and-paste examples, I'd prefer to have them in a good, but concise, form. Thanks.
You've got to have the DOCTYPE, otherwise HTML5 type stuff won't work in certain browsers (notably IE9). It would probably be safe to leave out the charset - it's not like you can guarantee what charset your readers will be saving the examples in anyway. You will have to add a title element to the head - the document is not valid without it.