overlay page in views - php

I have a little problem with display data queried from mysql database table
the data obtained is 3d array and I would like to use it in a javascript function
Usually, data in cake php is displayed in a ctp page whose file name(excluding the extension) is the same as the controller function's.
I would normally call that page if I click on a link in the current page as
<a href='../nextpage'>Next page</a>
or
<input type='button' onclick='../nextpage'>
'nextpage' is a ctp page (nextpage.ctp) as well as a controller function name
My problem is like this
database data queried ---sent to---> current page (having a link/button)---click to open ---->nextpage
next page will again display some data queried from the database. I sure can make nextpage as a new ctp page but I would like to make nextpage as an overlay page (a popup that grays out its parent once it shows up).
Is there any to accomplish this ?

You could have an HTML link with the following markup:
Next page
which will trigger a javascript function defined as
<script>
function someJavascriptFunction(){
//do something here
}
</script>

Related

Echo different form on main.php page without loading whole page php

On my site main.php page's sidebar (shown on pic) have some feature for member only. Each feature is in different pages (form1.php, form2.php, etc...)
I want to know :
How can I call each form on main.php. When I click on "inbox", it should call form1, and when I click on "company profile" it should call form9.
Is this possible to do without loading the whole main.php file? If so, how?
If number 2 is too complicated, then please just help me with number 1, as that is my most important point.
do it this way
let us say you want to display the form on this div
<div id="display">
<!-- load it here-->
</div>
<!-- example this are your menus
when you click the inbox link it will call the inbox function
-->
Inbox
Outbox
<script>
function inbox() {
$("#display").load("form1.php");
}
function outbox() {
$("#display").load("form2.php");
}
</script>
you need to include jquery for this
It's possible to do this you can use two things for that
1- If the form have database things to show use ajax with jquery
2- If it's static content you can use bootstrap tab and showing what you want

Pass Variable to Div with AJAX

ORIGINAL POST: Not sure why I am having such a hard time grasping this but I am creating a page that executes a query to list a set of records per a user. I am wanting to create a div that shows the details of a select record from the list. I am attempting to load that record with the following:
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
$("#form").load("tm-reserves-form-test.php?ContactID"+$ContactID);
});
});
Initial form loads but I can not get my .click function to work using the URL parameters.
How can I pass the url parameter from my current query into a div that loads an external page and executes a second query based on that url paramenter (primary id)?
Thanks in advanced for helping me out!
EDIT POST: Found solution, but another issue has arisen.
So I took a crash course this weekend on ajax and I found a working solution here:
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
So with this example, when the page loads the div form is loaded with a default page. With a click function on the label #record the div #form is than loaded with a parameter of ContactID that is a string value inside of #ContactID. All that seems to work very well (even passes the parameter correctly).
The issue now is that it is only allowing me to pass the first record to my div. Any thoughts on what I need to implement next? I originally thought it was to clear the var but that didn't work either.
The original query parameters are not readily available to a running script. So $ContactID is not resolved to an actual value.
See this page on methods for extracting query parameters from the current page:
Get query string parameters with jQuery
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
This code solved my initial question, but led to an additional question.

Refresh only a div ("content") by universal button working on every page

To be clear - Ive already checked other Questions about refreshing div and the ideas I found were not exactly what I look for.
My site is made of plenty pages with the same header and footer (top, bottom, menu on both sides). I use smarty templates, and the Whole action of every page happens in one <div id="content">.
My users use to refresh most of those pages many times to do an action they've already done once again. With refreshing browser loads again header, footer, viewed page etc. I would like to bring them the button (instead of F5) which will refresh just a current content page (e.g. account.php) without refreshing whole site.
One of plenty structure:
<?php
$title = 'OneOfPlenty';
require_once("includes/head.php");
{
Whole action
}
require_once("includes/foot.php");
?>
header.tpl ends with <div id="content"> then comes
onofplenty.tpl and then in
footer.tpl I got </div> (close the content)
Here comes the question: Is it even possible? Am I able to create such a flexible button which will recognize which page is being displayed and will "know" to refresh just the content of this page?
Any ideas and help will be aprreciated.
Thank you
TTed
You could do an Ajax call with jQuery to get the output html of the tpl file of the page.
You could use an Ajax call, e.g. by using the jQuery get() function, e.g. like this
$.get("includes/account.php", function(data) {
$("#content").html(data);
alert("Load was performed.");
});
If you saved some kind of variable, either to session or to a data-content on your div. Just so you know which page you are on. Say if you are on account.php you set $('#content').attr("data-content", "account"). Then if you press the refresh button you could use an ajax get on $('#content').attr("data-content") + 'php' to re-import the data. Could be done with a SESSION variable as well.

PHP/Javascript Bypass user input to display div

I have a page where if you click on a link, it exposes a div that using ajax displays content from a dbase.
After a user edits this content on the server, I'd like to use PHP to return the user to that page. This is no problem using a redirect
header("location:page.php")
However, when the user comes back to the page, ideally, I'd like to have the content in the div open automatically so the user can immediately see edits without having to find the link to open the div and click on it.
Is this possible, either with something in the url to fire the javascript or alternaively, when you load the page with a certain parameter, triggering javascript to open the div.
The code to open the div is a simple javascript call:
View Content
showDiv just uses ajax to display something from the server using responsetext.
Thanks for any suggestions
header("location:page.php?show=1")
Then in page.php body tag:
<body <?php if($_GET['show']==1) { ?>onload="showDiv()"<?php } ?>>

Dynamically changing <div> content on link click with PHP?

I have an area on my webpage that is populated by different <div> containers of information. When a link in my navigation bar is pressed, one <div> will fade out and another will fade in. What I'd like to do is have one of these content <div>'s filled with dynamic information, and when a link is pressed on another one of the "pages" it would change which database to load the information from and then display, or fade in, that <div> with the new information.
Sudo:
View information
<div id = "dynamicDiv">
<?php include 'file.php' ?>
</div>
file.php
**Find which database to load information from and display content**
I thought about using $GLOBAL vars, but I'm not sure how to set those from a link, and also it wouldn't reload the div content.
I also considered using a form, but I'm not sure of the "correct" way of doing this would be, and also when the page is reloaded the <div> that is displayed by default would be loaded, not the <div id = "dynamicDiv>
Any suggestions/ideas are very much welcomed....
In this case you should use ajax.
AJAX is used for changing the page content from server without reloading the page.
You can use this JQUERY AJAX And JQUERY LOAD
$(document).ready(function(){
$("#changediv").load("load.php?id=1");
})
in load.php
$id=$_GET['id'];
// use that id for dynamic query in database
$query="SELECT *.....";
$result=mysql_query($query);
echo mysql_fetch_array($result);//somthing like that
All the word echoed in php become response in ajax.

Categories