I have several a link in 'a' HTML. I expect the page to open in a new window when I click each link and these new windows are using the 'b' HTML. I would like to use 'b' HTML renders different content via different URL, such as /get_node or /get_vue etc. But 'b' HTML has only one URL.
If I pass get parameters to that URL like http://localhost:8000/xxxx.html?show=something,how to make AngularJs can receive this parameters?
For instance, here is 'a' HTML code.
<ul class='list-wrapper'>
<li>Javascript</li>
<li>Node.js</li>
<li>Angular</li>
<li>Vue</li>
<li>CSS/SASS</li>
<li>NPM</li>
<li>Gulp</li>
<li class='getback'><i class="fas fa-times"></i></li>
</ul>
Here is 'b' HTML code, http://XXXXXXXXXXXX.html.
URL get by angularjs via $http.get.
var app = angular.module('app',[]);
app.controller('index',($scope,$http)=>{
$http.get('/get_js',then((res)=>{
$scope.js = res.data;
},()=>{
alert('database error');
})
})
Could anyone tell me how can I do that? Can I put several URLs in $http.get to solve it?
Thank you very much!!
PS: I am using an express server to host the content.
Related
This is my first time posting a question, so I will be as concise as possible.
I am trying to dynamically populate the HTML of a page upon log in. For the front end application I use Django + HTML & CSS. I want to dynamically add a 'li' item to an existing 'ul'.
The previous code, when the page was statically loaded was:
<ul id="marketplace-list">
<li id="shoes-marketplace-dropdown" class="dropdown dropdown-toggle">
Shoes
<ul class="dropdown-menu" role="menu">
<li>Men</li>
<li>Women</li>
</ul>
</li>
</ul>
When clicking the "Men" href, my browser would redirect to the following URL : http://localhost:9000/marketplaces/shoes/men/
Now I created a js variable with'li' tag having id 'shoes-marketplace-dropdown'.
I plan to dynamically add and create 'ul' tag with id 'marketplace-list dynamically' to the above tag in $(document).ready( function {...}).
My approach is:
var shoes_market = " <li id=\"shoes-marketplace-dropdown\" class=\"dropdown dropdown-toggle\">" +
" Shoes" +
" <ul class=\"dropdown-menu\" role=\"menu\">" +
" <li>Men</li>" +
" <li>Women</li>" +
" </ul>" +
"</li>";
And in the $(document).ready() function I have:
$("#marketplace-list").prepend(shoes_market)
The HTML page builds correctly, but when I click the "Men" link, the following URL is seen in the browser:
http://localhost:9000/%7B%%20url%20'shoes_men'%20%%7D
The url is defined in urls.py as follows"
url(r'^marketplaces/shoes/men/$', views.shoes_men, name='shoes_men')
My guess is that, somehow the HTML code which contains url, placed in javascript as a string, does not get parsed through Django as defined in urls.py to it's associated value. Can you please help me? I have got no idea how to solve this out.
Thank you in advance!
The problem is occurring because your URL tag is in JS instead of HTML, and the Django template engine doesn't work on JS static files. If you really want to still continue with the JS implementation, then in HTML template create script tag with a variable
<script>
var men_shoe_link = {% url 'shoes_men' %}
</script>
And then you can use this variable in the JS, as your code is in $(document).ready() function, first your var will be created and then the JS file will be processing.
So then in JS string now you can have
"<a href='${men_shoe_link}'>Shoes</a>"
It's one of the first time that I use express.js and Handlebars.
I need to autocomplete this field: <input type="text" id="myInput" autocomplete="on" placeholder="Search here...">. When everyone digit to this text, I need to make a POST and after a GET without refreshing the content in the page. The problem is, when I do the GET, Handlebars refresh all page. This is the command that I use:
res.render('home',{ items:typeOfCategory});
and this is the structure of the hbs:
{{#if items}}
<ul>
{{#each items}}
<li>{{this.title}}</li>
{{/each}}
</ul>
{{/if}}
My question is: how to avoid the refreshing of the all page?
Thanks
I had read something like that in another question. Based on this tutorial: I found the answer to all my problems.
this tutorial explain how to use a PJAX library that manages both the client and server side.
Thanks to 3 rows of code you can obtain a speed navigation without reload the page.
Install client side library from jQuery-pjax page
into your html page that send the request add: <a href='/yourLink' data-pjax='main'>YourLink</a>
where main is the div that will content yout change. In my case is:
<div id="main" class="main">
{{{body}}}
</div>
In your.js file add $('a[data-pjax]').pjax(); This command 'simply call the pjax extension on every element that contains the data attribute ‘data-pjax’'
Install inside express the depency with the command: npm install --save express-pjax
Set your server:
var app = express();
var pjax = require('express-pjax');
...
app.use(pjax())
Replace the normal rendering:
res.render('index', {title: "Index"});
with
res.renderPjax('index', {title: "Index"});
UPDATE
Alternatively you can obtain the same result. Consider that the structure of the project is as follows:
views
|-> partials
| |-> addtest.hbs
|
|-> index.hbs
For example, image that in your index.hbs you have a sidebar with different items, described in this way:
<li>
<a href="#testDB" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<img src="../img/database-data.svg" class="svg icon">Test</a>
<ul class="collapse list-unstyled select-specific" id="testDB">
<li value="addTest" class=" ">
Add Test
</li>
....
....
</ul>
</li>
Inside the partials directory you have a simply form.
Now for manage the form you have to do two operations:
Server side: For switching from one partial to another without refresh the page, you specify:
router.get('/addtest', function (req, res) {
res.status(200);
res.header("Content-Type", "text/html");
res.render('partials/addtest', {title: "Add Test"});
});
Client side: In your client side file, you add make a simple get request:
$('#add-new-test').click(function (event) {
$.get('/addtest').then(function (data) {
$('#main').html(data);
});
});
In this way, when you make a get request with the same address (i.e in this case /addtest) the client add a part of code inside your view without refresh all.
NOTE: Keep in mind that, if you needed a some file.js in your partial, for load the file, use this:
<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>
This is used for avoid: “Synchronous XMLHttpRequest on the main thread is deprecated…” because the call is asynchronous. For more info..
The problem here is that you're making the browser request a new resource each time. This is triggering your templating and serving up a brand new page every time.
You'll want to make an express endpoint which returns JSON, and then send up a request to that endpoint using something like AJAX (found in jQuery) or a similar library. This way you can make a call up to your web server, express can return you some data in a JSON format (res.json({}) and your frontend can then interpret that response and decide how to display it on the DOM.
This sort of partial updating is where you start to need frontend JS along side programatic endpoints that return JSON. This is often where some of these big frontend frameworks like Vuejs and Angular thrive, but if you're new to this sort of thing I'd recommend using jQuery to make a HTTP call to your server and return the JSON down to the frontend.
My website is currently using .tpl template files to load different pages dynamically. That will load an entire page again, so header, sidebar (chat), main content and the footer.
In my index.php file there is a switch case which loads the page 'home' when you click on 'home' in the menu. (example)
But I don't want that. Because their is also a chat in the sidebar, and that reloads/resets eveytime you load a different page. So all previous messages will be gone. So what I do want is changing only the main content part. So header, sidebar and footer will stay and won't reload.
I tried to do it with javascript but that didn't work...
Can someone help me or atleast put me on the right path?
(And yes, I have been searching for the last hour on stackoverflow and google but couldn't find anything...)
What you need is called AJAX(With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.)
To use ajax u need Javascript to send the request to a PHP file that loads the smarty template that contains your main content and insert the html code back into the page:
<?php
//some-php-file.php
include("Smarty.class.php");
$smarty = new Smarty;
$smarty->display("main_content_part.tpl");
?>
//link on 'home' site
Home
//javascript(jquery) ajax request
$('#ajaxHomeBtn').click(function(e){
e.preventDefault();
$.get("some-php-file.php", function(smarty_html_data) {
$(".main-content").html(smarty_html_data);
});
});
Please follow following instruction :
Create separate .tpl file for header,footer,sidebar and contents files.
In main file include header,footer,sidebar and left one section for content.
3.Replace your .tpl (using id or class) file content using ajax call.
bind your url with function.
Sample code as below:
// sidebar.php
<ul>
<li><a onclick="changePage(this)" data-page="home.tpl">Home</a></li>
<li><a onclick="changePage(this)" data-page="aboutus.tpl">About Us</a></li>
</ul>
// master.php
<?php
include("header.php");
include("sidebar.php");
?>
<section id="fileContent">
</section>
<?php include("footer.php");
?>
<script href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function changePage(obj)
{
var Filename=$(obj).data('page')
$.get(Filename, function( data ) {
$( "#fileContent" ).html(data);
});
}
</script>
I cloned the ionic project from GitHub
While the contact's phone number is not clickable to call and message. So for the index.html file line 39, I converted from
<p ng-if="contact.emails.length > 0">{{contact.emails[0].type}} : {{contact.emails[0].value}}</p>
to
<p ng-if="contact.phones.length > 0">{{contact.phones[0].type}} : <a ng-href='{{contact.phones[0].value}}'>{{contact.phones[0].value}}</a></p>
But it turns out the app will not load any contact's information anymore.
Is there anything I missed or am I totally wrong on sending data?
to make phone call with ionic you need to add this code in confi.xml
<access launch-external="yes" origin="tel:*" />
and in your view you need to add:
<a ng-href=tel:{{user.phoneNumber}} class="button button-positive">Call me</a>
Update:
I've just noticed it's (probably) an issue with loading data not the link itself. Would need to see your controller code to know more about why it's not populating the ng-href if it's not the issue below...
Previously:
Using the following href should be enough to trigger a call:
tel:' + number
Angular (which ionic sits on) doesn't like anything unusual going into an anchors href unless you tell it you want it to. See here:
http://forum.ionicframework.com/t/ng-href-tel-redirecting-to-call-with-empty-number/4567/2
The quickest fix, if you 'just' want it to work is this in your view:
<p ng-if="contact.phones.length > 0">{{contact.phones[0].type}} : {{contact.phones[0].value}}</p>
and then in your controller:
$scope.triggerCall = function(number){
document.location.href = 'tel:' + number
}
Not sure if I have phrased my question correctly but I shall try to explain clearer in the body of my question.
I am using ASP.NET C#.
I have a single WebForm page.
In this page, for example I have this:
<div id="page1" style="display:block">
page 1 contents
<a href='#' id="liPage1" onclick='Page2();'>Page2</a>
</div>
<div id="page2" style="display:block">
page 2 contents
<a href='#' id="liPage2" onclick='Page1();'>Page1</a>
</div>
<script>
//this is just sudo code
Page1 function will hide div page2 and show div page1
Page2 function will hide div page1 and show div page2
</script>
Now I do not need any help with the script.
What I am asking is whether I can have the HTML for page1 in 1 file and the HTML for page2 in another file and load these HTML 'fragments' via client-side.
I can easily do this in server code by encapsulating the HTML in a user-control.
I want to know if I can do the same using client calls. But I really do not want to 'write' the HTML within JavaScript code itself.
I am asking this because I intend to have quite a few pages and I want to render it all via client-coding rather than calling back to the server each time. It is all a question of readability and management.
I was thinking along the lines like resource files but not sure how.
I hope this is all clear?
Yes, you can simply do some ajax calls, and then set the response as the content of a container element.
So, let's say yo have file1.html, file2.html and file3.html, and you want to include all those "fragment files" in a #container.
The script will look something like this:
[
"file1.html",
"file2.html",
"file3.html"
].forEach(function(file) {
var xhr = new XMLHttpRequest();
xhr.open("GET", file, true);
xhr.addEventListener("load", function() {
document.querySelector("#content").html += xhr.response;
});
xhr.send();
});