Change title with JS with button in secondary page - javascript

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
}
?>

Related

Change PHP include in HTML Page with JS

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>

jquery load() causes a tags to lose their href value

<div class="page">
Click!
</div>
<script>
$("a").click(function(){
$(".page").load($(this).attr("href"));
window.history.pushState("", "", '/'+$(this).attr("href"));
return false;
});
</script>
<!-- in another-page.php -->
Click here!
<!-- what the another-page.php looks like once it's been loaded by jquery -->
<a href>Click here!</a>
and then clicking on a link will load a page in a <div class="page"> BUT, I noticed at the top of the page, where there is a <h1>Title</h1> it lost the color i had defined h1 a {...} and then when inspecting element, instead of being the above h1, a thing, it was <h1><a href>Title</a></h1>
Something else is wrong here.
The issue I described occurs when you use <a href=/> not <a href="/">. I didn't test to check and see if the same occurs when using <a href=another-page.php> but found that, quoting the forward slash fixed the problem.

Move the focus of the page to the clicked element using javascript or jquery

I'm trying to add a functionality like on Wikipedia there are outline of the article at the top and when I click on it, it will take me to the clicked element in the same page, I have tried to search it but I'm having trouble in interpreting it so I could get the exact search, can anybody please help me. Here is the code, the $myvalues[1] in the second foreach is the name of the div and $cat_name[1] is the href attribute.
<div class="bran-cat">
<h2>Category</h2>
<div class="cat-list">
<?php
foreach($cat_arr['cat_pro'] as $cat_name){
echo "".$cat_name[1]." <br>";
}
//$sel_cat= $wpdb->get_results("SELECT * FROM ");
?>
</div>
</div>
<?php
foreach($cat_arr['cat_pro'] as $mykey=>$myvalues){
echo '<div name="'.$myvalues[1].'" class="cat-title" id="'.$myvalues[0].'"><h2>'.$myvalues[1].'</h2></div>';
?>
Add a name attribute to an anchor tag, and then from another anchor tag, set the href to #name.
E.g.:
<a name='gohere'></a>
<a href='#gohere'>Click here to go to the named anchor tag</a>
You can have something like this:
<div id="scrollToThisDiv"></div>
GoToTheDiv
You can animate the same using jQuery to give it a smoother effect.
<div id="top"></div>
go to home
<div> some other contents
</div>
<div id="home">Home content Home content Home content Home content</div>
scroll top
Go to Div
.
.
.
<div id="clickhere">
Your Stuff
</div>
Add ID tag to where you wana go like the above Div tag and use an Anchor tag to point to that particular element.

jQuery initiate JavaScript action

<div class="button">
<a class="testclass" href="javascript:actionx(objectId);"></a>
</div>
So the question is how do I initiate JavaScript bit using jQuery, I have tried:
window.location = javascript:actionx(objectId);
And some other similar variations, but they do not seem to work.
By the way, class is universal and all the buttons have it. The only thing that changes is the objectId.
If you are trying to redirect then you can try this:
html:
<div class="button">
<a class="testclass" href=" javascript:actionx(1234);">Redirect</a>
</div>
script:
function actionx(data){
//rest of the code without return
window.location="d3.php";//here your location to redirect
}

AddThis in AJAX

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>

Categories