I am trying to implement ajax loading for the joomla 3.2.1 default contact form component.
I set a menu link to the contact form in the backend.
This is the HTML output :
<nav id="menu2">
<div class="moduletable">
<ul class="nav menu">
<li class="item-138">Contact
</li>
</ul>
</div>
</nav>
and I have this div at the bottom of the page :
<section id="contact_form">
</section>
I implemented this Jquery code :
$('.item-138 a').click(function () {
$('#contact_form').load("index.php?option=com_contact&view=contact&id=1&tmpl=component")
return false;
});
The contact form loads well and my template override works. but how can I prevent loading the <head> content that comes with it?
The <title> tag, default scripts (mootools jquery...) and default css ( /templates/system/css/general.css, /templates/system/css/template.css)
Can I do that with a template override? Is it even possibler?
Well there is this value that you attach to the get request.
&format=raw
so your request looks like
index.php?option=com_contact&view=contact&id=1&tmpl=component&format=raw
also you may want to make a copy of your view.html.php and rename it view.raw.php
You should be able to load part of the page you want from the load, something like this.
$('#contact_form').load('index.php?option=com_contact&view=contact&id=1&tmpl=component #formID');
Check this documentation for Loading Page Fragments here.
Related
I've tried to use jQuery's load() function to change/load content without reloading. That works, but the problem is: the URL keeps the same!
Even if i use history.pushState() to change URL, that does not solve the problem. Example:
with the famous window.history.pushState("object or string", "Title", "/new-url");
With that, I am creating a "fake URL" for each page - If I try to enter the website with this changed URL again, i get an error, basically the link does not exist;
If I refresh the page, i lost all Ajax loaded content - I need to keep the content when refresh;
When I click to change Ajax loaded page, keeps putting new links next to the previous one, as in the image sent;
I want to get this result: https://reactjs.org/ - transiting the pages, they do not reload and the link changes, it is updatable and the link works separately - how do i do it?
3) printscreen of my page and its url
Important: index.html, about.html and contact.html are existing files that will load with the jquery function below.
HTML:
<div class="navbar">
<div class="content">
<div class="logo">My logo</div>
<ul class="pages">
<li id="index">Index</li>
<li id="about">About us</li>
<li id="contact">Contact</li>
</ul>
</div>
</div>
<section id="page">
<div class="content">
<!-- PAGES LOAD HERE -->
</div>
</section>
<div class="footer">
<div class="content">
--Footer-- All rights reserved.
</div>
</div>
JS:
$(document).ready(function () {
$('li').on("click", function () {
$pageName = $(this).attr('id');
$('#page .content').load(`pages/${$pageName}.html`);
$('li').removeClass('active'); //only to remove the selection of actual page in CSS
$(this).addClass('active'); //only to add the selection of actual page in CSS
window.history.pushState("object or string", "Title", `pages/${$pageName}.html`);
})
})
you're describing "routing" which is the idea of URLs matching the content that is being display.
In jquery i'd recommend googling: jquery router or javascript router
IF you're writing other languages you can google [language] router.
most recently google is bringing up https://www.npmjs.com/package/jqueryrouter which is now forwarding to https://github.com/scssyworks/silkrouter
Once you choose a router, read the docs and come back with more questions.
I have a website which consists of 5 different pages.
To maintain the design of all the pages, I copied and pasted the code from the main page to all the other HTML documents to make sure that the Navigation Box and the main divs stay in position.
I've now been asked to implement the design in such a way where when I press a button, the other HTML pages will load dynamically onto my main index page. This way, if I need to change the design of the pages, I only have to change the index page and not have to repeat those changes for every single HTML document I have.
I've tried using Javascript for this, but I can't think of anything that would suffice. I can't understand jQuery at all, if someone has a clear understanding of how to accomplish this task using jQuery or Javascript, could you please explain it to me step by step?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="CSS/Index.css">
</head>
<script src="websitescript.js"> </script>
<body>
<div class="mainwrapper">
<div class="navbox">
<input type="image" id='about' src='images/about.jpg'
onclick="myFunction()"> </a>
<a href="location.html"> <img src='images/location.jpg' class="location">
</a>
<input type="image" id='contact' src='images/contact.jpg'
onclick="myFunction()"> </a>
<a href="inquiries.html"> <img src='images/inquiries.jpg' class="inquiries">
</a>
<a href="employees.html"> <img src="images/employees.jpg" class="employees">
</a>
</div>
<img src="images/duo.jpg" class='logo'>
<div id="header">
</div>
</div>
What you wanna do, is load content using AJAX (XmlHttpRequest). That means, you have just one page with layout, and content/other pages are loaded without the need of reloading the page.
For that, you can use jQuerys .load() function. Tl;dr; what you gonna do, is to have content of the website as simple html files, without layout (header etc), and using ajax you are gonna load it into the page.
Content of your main page index.html could look like this (I removed those images in nav bar)
<div class="mainwrapper">
<div class="navbox" id="js-navigation">
About
Location
Contact
Inquiries
Employees
</div>
<div id="header"></div>
<div id="js-content">
<!-- content will be loaded here -->
</div>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
$('#js-content').load('/about.html');
$('#js-navigation a').click(function(e) {
e.preventDefault();
$("#js-content").load(e.target.href);
})
});
</script>
So in the same folder, you will have those other content files, but without navigation, wrappings header etc. Just plain content like:
<h1>About page</h1>
<p>Lorem Ipsum</p>
Alright so my approach is a bit different as I use PHP but hopefully I am still able to help you with this. I am working on something similar where I have "index" page that includes a nav bar at the top and empty space below it. After I click on something the content of another php file loads into white space, and said another php file is wrapped into a div I can edit with css. To do this I've used this php command:
<div>
<?php
$page = "MainPanel.php"; // my index
if (isset($_GET["page"])) {
$page = $_GET["page"];
}
if ($page == "" or $page == "MainPanel.php") {
$page = "/Main/central.php"; //default page upon running the code.
}
$GLOBALS["page"] = $page;
ob_start();
include($page);
ob_end_flush();
?>
</div>
This should be it. I don't know php very well and one of my collegues suggested to use this but it's relatively small amount of code and it works well.
I am using nanoscroller to show a list of items.
However, in some cases, I load the content via ajax and modify the div.content of the nano.
The problem is that the content is not renedered, although it is there.
<div class="nano">
<div class="content>
<li> asddas </li> <!-- this is loaded via ajax -->
</div>
</div>
Try to fire this on ajax success.
$(".nano").nanoScroller();
This will refresh the scrollbar.
Here are some good references that can help you with this.
http://api.jquery.com/jquery.ajax/
https://github.com/jamesflorentino/nanoScrollerJS
I am trying to add a Tripadvisor widget (rave) to my page which is loaded via Ajax.
Here is the widget code:
<div id="TA_cdsscrollingravewide869" class="TA_cdsscrollingravewide">
<ul id="1NcDZBZ" class="TA_links 8dTZRew">
<li id="ZweVlS" class="3cqMCWiB">Read 37 reviews of <a target="_blank" href="http://www.tripadvisor.com/Restaurant_Review-g188590-d946177-Reviews-Bond-Amsterdam_North_Holland_Province.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Bond</a></li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=cdsscrollingravewide&uniq=869&locationId=946177&lang=en_US&border=true&shadow=true&backgroundColor=white"></script>
Only when the page loads the first time it's get rendered. But after an ajax load it doesn't.
I tried to use jQuery's getScript function but it doesn't help. Even manually deleting the added script en link nodes from the head before executing the script again doesn't help.
Can anyone help me fixing this please?
The solution:
$.getScript('//www.tripadvisor.fr/WidgetEmbed-selfserveprop?nreviews=6&uniq=&iswide=true&locationId=' + tid + '&rating=true&popIdx=true&border=false&writereviewlink=true&lang=fr', function() {
if (typeof(window.taValidate) != 'undefined') {
window.taValidate();
}
});
Perhaps the html iframe is a method.
ex.
<iframe src="tripadvisor.php" scrolling="no" frameborder="0"></iframe>
tripadvisor.php
<div id="TA_cdsscrollingravewide869" class="TA_cdsscrollingravewide">
<ul id="1NcDZBZ" class="TA_links 8dTZRew">
<li id="ZweVlS" class="3cqMCWiB">Read 37 reviews of <a target="_blank" href="http://www.tripadvisor.com/Restaurant_Review-g188590-d946177-Reviews-Bond-Amsterdam_North_Holland_Province.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Bond</a></li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=cdsscrollingravewide&uniq=869&locationId=946177&lang=en_US&border=true&shadow=true&backgroundColor=white"></script>
A far from optimal solution which I had to adopt in a similar scenario was based on the following logic:
Invoke the tripavisor script just once and load the widget inside an hidden html element on whathever page the user lands (so the page is not rendered by an ajax request).
When the page where you want the widget placed is called by ajax, if the request is successfully completed, check if the widget is already in DOM, clone it and inject or append it to the ajax generated piece of html.
I found another solution. If you have the widget HTML on the page, or if you added it via jQuery to the page, e.g. this one:
<div id="TA_cdsscrollingravewide869" class="TA_cdsscrollingravewide">
<ul id="1NcDZBZ" class="TA_links 8dTZRew">
<li id="ZweVlS" class="3cqMCWiB">Read 37 reviews of <a target="_blank" href="http://www.tripadvisor.com/Restaurant_Review-g188590-d946177-Reviews-Bond-Amsterdam_North_Holland_Province.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Bond</a></li>
</ul>
</div>
you can execute this script below, and it will load the widget:
$.getScript("https://www.tripadvisor.com/WidgetEmbed-cdsscrollingravewide", function(){
if (typeof(window.taValidate) != 'undefined') {
window.taValidate();
}
});
Please note that for example in my case the widget class is TA_cdsratingsonlynarrow, so
for me the script URL looks like this:
https://www.tripadvisor.com/WidgetEmbed-cdsratingsonlynarrow
I have the following JQuery Code concerning my tabs :
$("#onglet>ul>li").click(function(){
$("#onglet ul li").removeClass('Selectionne').addClass("OngletPrincipal");
$(this).removeClass().addClass('Selectionne');
$(this).unbind('mouseenter mouseleave');
it works, but as soon as I click on a tab which leads me to another page, the tab gets its original class.... so its appearance finally doesn't change..
<div id="onglet">
<ul >
<li class="OngletPrincipal">
Accueil
</li>
<li class="OngletPrincipal">
Catalogue
</li>
<li class="OngletPrincipal">
Nous
</li>
<li class="OngletPrincipal">
Contacts
</li>
<li class="OngletPrincipal">
Espace client
</li>
</ul>
</div>
how I am supposed to keep the tab with the "Selectionne" class ?
....
thankkkkkk you !
If you are loading a new static page, and the selected tab is just a link to that page, why isn't the selected tab hard coded into each page? If your serving your pages dynamically, why isn't the server set the selected class when it generates the page? It looks like these tabs are navigating between a set of static html pages, so I'm not sure why you need to set this class after the page loads using JavaScript.
But, if there is some reason I'm missing for setting this after page load you could look into using jquery address or some other history type plugin to persist the tab selection in the url so that you can parse it after the page loads, something like http://fake.com/foo.html#/tab1. Or, without the plugin you could just check which page you selected on load and set the tab that way:
$(document).ready(function(){
var loc = window.location.toString();
var page = loc.substring(
loc.lastIndexOf('/',0) + 1,
loc.length);
$('#onglet>ul>li>a[href$="' + page + '"]').parent().addClass('Selectionne');
});
If you completely reload/load the page in the href, it's another page, hence everything is reloaded and your by js added classes are back to the initial classes.
You will have to remember it serverside, or pass it in a url parameter that you parse in js and see what is requested, activating the class on the right li.
Or dynamically load the content and stay on the same page.