I'm trying to change the content of the div with "panel_alumno" id using a JS function when a button is pressed so it shows a different table but I can't make it work. When the button is pressed nothing happens.
This is my script:
<script>
function insertarTablaSolicitudes(){
document.getElementById('panel_alumno').innerHTML = '<?php include ("tabla_solicitudes_alumno.php") ?>';
}
function insertarFormatoSolicitud(){
document.getElementById('panel_alumno').innerHTML = '<?php include ("formato_solicitud.html") ?>';
}
This is my html body:
<body>
<ul>
<li><a type="button" onclick="cambiarPagina()">Mis solicitudes</a></li>
<li><a type="button" onclick="insertarFormatoSolicitud()">Enviar Solicitud</a></li>
<li>Salir</li>
</ul>
</br></br>
<div id="panel_alumno">
<?php include ("tabla_solicitudes_alumno.php") ?>
</div>
</body>
I've tried different methods to do this but none of them have worked. If anyone know a better way to achieve this, I'd be glad to read it. Thanks in advance.
Found the solution, I just checked the browser console and it seems the problem is the PHP code inside the JS script so I changed it to use JS instead of PHP. Here are the new functions that work as intented.
<script>
$(function(){ <!--This one puts the default insert when the page is loaded-->
$("#panel_alumno").load("tabla_solicitudes_alumno.php");
});
function insertarTablaSolicitudes(){
$("#panel_alumno").load("tabla_solicitudes_alumno.php");
};
function insertarFormatoSolicitud(){
$("#panel_alumno").load("formato_solicitud.html");
};
</script>
And this is my HTML Body:
<body>
<ul>
<li><a type="button" onclick="insertarTablaSolicitudes()">Mis solicitudes</a></li>
<li><a type="button" onclick="insertarFormatoSolicitud()">Enviar Solicitud</a></li>
<li>Salir</li>
</ul>
<div id="panel_alumno">
</div>
</body>
Related
I've two pages in HTML-PHP:
first page, the main page, has buttons that can rederict to second page, second page has title and image that I would like to change with JS code.
I try to use function in my first page to change title in second page but it doesn't work.
My FIRST PAGE:
<div class="hover">
<a onclick="hello();" href="secondPage.php" target="_blanck" ;>Second Page</a>
</div>
My SECOND PAGE:
<h2 id="title2">Hy</h2>';
MY JS:
function hello (){
document.getElementById("title2").innerHTML='<h2 id="title2">Hello!</h2>';
}
I'm new in JS and I think there's something wrong in my JS code, can anyone help me?
Thanks!
You can use the following codes to do it.
firstPage.php
<div class="hover">
<a href="secondPage.php?change=1" target="_blank" ;>Second Page</a>
</div>
secondPage.php
<h2 id="title2">Hy</h2>
<?php
if ( (isset($_GET['change'])) AND ($_GET['change'] == 1) )
{
?>
<script>
document.getElementById("title2").innerHTML='<h2 id="title2">Hello!</h2>';
</script>
<?php
}
?>
I have this in my index.php:
<?php
require_once '/myFunctions.php';
output_layoutHead();
output_layoutHeader();
output_layoutHome();
output_layoutFooter();
These 4 functions basically generate my HTML, which looks similar to this:
<head>
//Metatags, title, CSS links, etc.
</head>
<body>
<div id="navbar">
<ul class="nav">
<li class="active">Home</li>
<li>Contact</li>
<li>Help</li>
</ul>
</div>
<div class="container" id="contentContainer">
<div id="content">
Homepage content
</div>
</div>
//JS script links, etc.
</body>
Function output_layoutHome() generates the entirety of #contentContainer. I also have functions for other pages called output_layoutContact() and output_layoutHelp().
I basically want the content generated by the output_layoutHome() to disappear completely when Contact or Help button is clicked and instead the other function like output_layoutContact() or output_layoutHelp() to output content in it's place.
I realize I can remove entirety of #contentContainer with $("#contentContainer").remove(); but I'm not sure how to output the result of an another function in it's place.
Can I get some pointers?
You can do a second file beside index.php and name it contact.php something like that:
<?php
require_once '/myFunctions.php';
output_layoutContact();
and then add an onclick handler to the contact button with something like that:
$( "#content" ).remove();
$( "#contentContainer" ).load( "contact.php" );
you could also specify the layout identifier as data in load-call and then conditionally output all content by index.php.
I'm creating a squarespace website in which I have a navigation bar.
I would like to add a javascript code as a link in the navigation bar.
The javascript code is the following:
<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript"> xMinicart("style=","layout=Mini"); </script>
</div>
I have the following html code: (I got it with FireBug)
<nav id="main-navigation">
<ul class="cf">
<li class=" active-link">
page1
</li>
<li class="">
page2
</li>
</ul>
</nav>
I cannot edit the code above but I'm able to inject header code.
So, how can I add the javascript code as a third link in the navigation bar?
Thanks a lot!
edit
So I've added the following code
<script>
window.onload=function(){
$('nav ul').append('<li><a onClick="test()" href="javascript:void(0);">Link 3</a></li>');
}
</script>
but I need the original javascript code within the append. I need the actual code to be the link. How do I do that? If you see the javascript in Firefox you'll understand what I mean. I need the actual link it generates in the navigation bar.
Thanks!
window.onload=function(){
$('nav ul').append('<li><a onClick="yourFunction()" href="javascript:void(0);">Link 3</a></li>');
}
Since you specify you don't have direct access to the html. Only the header.
This will add your menu item with a link, that upon click, executes the function yourFunction(). It will add this item as soon as the page loads.
Note: You need jQuery for the above. But it is also possible with raw Js.
In an unordered list i have some a's with some href's. When clicked I want some html from an external file written. I cannot use any server side languages since it only gonna be running localy.
The structure of my file is:
<body>
<ul>
<li><a href="#">item1</li>
<li><a href="#">item2</li>
<li><a href="#">item3</li>
<li><a href="#">item4</li>
</ul>
<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>
</html>
Thanks in advance
Since it looks like you're trying to load a script, there's a better way to do that, by using jQuery.getScript():
$('#triangle').click(function() {
$.getScript("js/triangle.js");
});
Also, as arieljuod points out, you haven't actually loaded jQuery in your HTML file. You'll need to do that to use it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
(Or pick your favorite jQuery version and CDN; this is one of many.)
You don't want document.write().
You probably want this instead, depending on where you want the new HTML to go:
$('head').append('<script src="js/square.js"></script>');
You can listen for a click on an item and based on that trigger an ajax call for the appropriate file. Load the contents of that file into your content div within the success callback.
Happy to walk you through sample code live over here: https://sudonow.com/session/525cb34035e089113700000a
Pasting the content of the code editor here:
<body>
<ul>
<li id="item1" class="item"><a href="#">item1</li>
<li id="item3" class="item"><a href="#">item2</li>
<li id="item4" class="item"><a href="#">item3</li>
<li id="item5" class="item"><a href="#">item4</li>
</ul>
<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>
</html>
//JS
//convert some file content to html
var genHtmlContent = function(content){
//do something here depending on how data is stored e.g. we could just return an html string from some keyvalue json
return content.htmlContent;
}
//Use javascript to detect a click on a list item and grab the appropriate content
$("item").click(function(event){
var selectedId = event.target.id;
var url = "http://www.mysite.com/" + selectedId + ".json";
$.get(url, function(content) {
var htmlContent = genHtmlContent(content);
$("#content").val(htmlContent);
})
})
//sample json file on server
//item1.json
{htmlContent: "<div>I am Item 1</div>"}
A quick and easy solution will be an iframe. Add as many iframes as you want, each having a different url. Give them a common class and hide them using CSS or jQuery. On clicking a link, prevent default and show the corresponding iframe, like;
<ul>
<li><a href="#" id="item1">item1</li>
</ul>
<div id="content">
<iframe class="iframes" id="iframe1" src="http://www.page1.com"></iframe>
</div>
and in your JavaScript, add this;
$('.iframes').hide();
$('#item1').click(function() {
event.preventDefault();
$('#iframe1').show();
});
I'm trying to get Addthis to work in a div tag that's being loaded with AJAX I read on their site I had to render the toolbox with javascript http://support.addthis.com/customer/portal/articles/381263-addthis-client-api
I'm using the code below but it doesn't seem to be working, any help with the function is appreciated. Thanks.
<div id="toolbox"></div>
<script type="text/javascript">
addthis.method('#toolbox', [configurationObject], [sharingObject]);
</script>
Since I don't know that much about your particular problem, I'd start start by looking into addthis.toolbox('.yourClass');
If you have a typical toolbox like this...
<div id="myToolbox" class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
Once your ajax content has finished loading into the dom you could do the following...
addthis.toolbox('#myToolbox');
However, watch out for this!
Don't put your like button inside your toolbox because when you call the addthis.toolbox method it will create a duplicate like button iframe for some reason. It must be a bug but it took a couple years off my life. Instead you should put it in its own toolbox containing div and call the method on it as well.
In the case of multiple toolboxes
you should probably use a class instead. See the following code for the final example.
html
<div class="toolbox">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:userid="myCompany"></a>
</div>
<div class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
javascript:
//on complete of ajax load
addthis.toolbox('.toolbox');
var addthis_config =
{
ui_hover_direction: -1
, ui_offset_left: offsetLeft
, ui_offset_top: -45
, ui_delay: 300
, ui_click: false
};
var addthis_share =
{
url: 'http://www.example.com',
title: 'example title'
}
addthis.method("#Button2", addthis_config, addthis_share);
Visit http://www.addthis.com/forum/viewtopic.php?f=5&t=14137 this may help you.
method is not a valid function of the addthis object. It's a placeholder in the example for you to use a real method name.
You are never really calling anything as you aren't waiting for the DOM to ready:
<script type="text/javascript">
$().ready(function () {
addthis.method('#toolbox', [configurationObject], [sharingObject]);
});
</script>