I have 2 pages and the main page. the total 3 pages.
I want to access the first and second pages after changing the dropdown list.
I try this code by Jquery in my HTML called main.html.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-git1.min.js"></script>
<script>
$(document).on('change','.fx',function(){
document.getElementById('content').src = "firstpage.html";
document.getElementById('content').style.display = "block";
});
</script>
<style>
iframe{
height:700px;
width:700px;
display:none;
}
</style>
</head>
<body>
<select name="fx" class="fx">
<option value="empty"></option>
<option value="firstPage">1</option>
<option value="secondPage">2</option>
</select>
<iframe src="firstpage.html" id="content" >
</iframe>
</body>
</html>
I want to use the if statement.
If select 1 load firstPage.html
If select 2 load secondtPage.html
Any Edition of this code.
Please note that values and file names are case sensitive, so 'firstpage' and 'firstPage' are not the same!
Try this jQuery code:
$(document).on ("change", "select.fx[name='fx']", function () {
var $select = $(this);
if ($select.val () == "firstPage") {
$("#content").attr ("src", "firstpage.html");
$("#content").show ();
}
else if ($select.val () == "secondPage") {
$("#content").attr ("src", "secondpage.html");
$("#content").show ();
}
else {
$("#content").hide ();
alert ("Page not found!");
}
});
Don't do things like this as it may be unsafe:
$("#content").attr ("src", $(this).val() + ".html");
Whenever the change handler is called, it gets passed an event with relevant information about the event itself. It includes a event.target.value property which you can use to get the option that was clicked. You can just add '.html' to the value and set the src of your iframe accordingly.
<script>
$(document).on("change", ".fx", function (event) {
document.getElementById("content").src = event.target.value + ".html";
document.getElementById("content").style.display = "block";
});
</script>
Related
I want to select a user name and print something once the name is selected. However, why is "load_new_content()" not defined?
<html>
<head>
<title>Profile Editor</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
$(document).ready(function() {
$("#selectedUserId").change(load_new_content());
});
function load_new_content() {
alert("hello");
}
</script>
</head>
<body>
<?php
error_reporting(-1);
require('Db.php');
$db = new Db();
// var_dump($db);
$userIds = $db -> getUserIds();
echo '<select name="selectedUserId" id="selectedUserId" onchange="load_new_content()">';
echo '<option value="">Choose your CEC User Id</option>';
foreach($userIds as $ID) {
echo "<option>".$ID["user_id"]."</option>";
// echo $userId["user_id"];
// echo $ID['user_id'];
}
echo '</select>';
?>
Wrong <script> tag declaration.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- Need this close tag -->
<script> <!-- Need a Open tag -->
$(document).ready(function() {
$("#selectedUserId").change(load_new_content());
});
function load_new_content() {
alert("hello");
}
</script>
Two problems. First one noted by others, you need a separate script tag for your inline JavaScript.
Second, you can't just do
$("#selectedUserId").change(load_new_content());
This will just execute the function once when the page loads.
You need to do it like this:
$("#selectedUserId").change(function() { load_new_content() });
(note the function call within another function)
or this:
$("#selectedUserId").change(load_new_content);
(note the lack of parenthesis)
This can be solved by wrapping the call to load_new_content in a function:
$("#selectedUserId").change(function(){ load_new_content(); });
Also, you are not closing the <script> tag that calls jQuery, or opening a new <script> tag for the subsequent code. Try:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#selectedUserId").change(load_new_content());
});
function load_new_content() {
alert("hello");
}
</script>
I have a foreach loop in php that searches through a directory, finds any other directories, and then using hide/show in javascript, the subdirectories names are made into links that drop down to reveal the files inside of that specific subdirectory. I hope that makes sense. The problem I have is that because I am using a loop to find any present subdirectories, I can’t give each of the subdirectories a different id. As a result, all of the links have the id of the first link and when any of them are clicked, the first link always drops down. Do I need to use JQuery for this?
<!--Code for the javascript part:-->
<?php
<script language="javascript">
function showOrHide(){
var div = document.getElementById("showOrHideDiv");
if (div.style.display == "block"){
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
</script>
?>
<!-- A subdirectory has been found and is called $subDir -->
<!-- Below is the show/hide part of my html/php code -->
<?php echo $subDir;?>
<div id="showOrHideDiv" style="display: none">
<!-- The rest of the code that prints the files from the subdirectory -->
</div>
One approach would be to use a counter and use that to vary the IDs:
<?php echo $subDir;?>
<div id="showOrHideDiv_<?php echo $counter;?>" style="display: none">
Then your javascript changes:
<script language="javascript">
function showOrHide(num){
var div = document.getElementById("showOrHideDiv_" + num);
if (div.style.display == "block"){
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
</script>
index.html
<html>
<head>
<script type="text/javascript" src = "jquery-1.10.1.js"></script>
<script type="text/javascript" language = "javascript">
function swapContent(cv)
{
$_("#myDiv").html("Put animated .gif here").show();
var url= "myphpscript.php";
$_post(url,{contentVar:cv},function(data){
$_("#myDiv").html(data).show();
});
}
</script>
</head>
<body>
Content1 •
Content2 •
Content3 •
<div id = "myDiv"> My Default Content 1</div>
</body>
</html>
myphpscript.php
<html>
<body>
<?php
$_contentVar = $_POST['contentVar'];
if($_contentVar == 'Con1')
{
echo ' My Defaut Content';
}
else if($contentVar == 'Con2')
{
echo ' My Defaut Content 2';
}
else if($contentVar == 'Con3')
{
echo ' My Defaut Content 3';
}
?>
</body>
</html>
I am trying to display some dynamic content when the onmousedown event is done. I haven't done the animation yet, but just I wanted to get the required divs to be changed on choosing the different links but some how it doesn't seem to work.The jQuery file has been correctly loaded.
COndition wrong
$_contentVar = $_POST['contentVar'];
if( $_contentVar == 'Con1') //here you are using $contentVa not $_contentVar
I'm not sure why you have used _ in $_("#myDiv").. I think your javascript code should be
function swapContent(cv)
{
$("#myDiv").html("Put animated .gif here").show();
var url= "myphpscript.php";
$.post(url,{contentVar:cv},function(data){
$("#myDiv").html(data).show();
});
}
and also another problem I see is with how you call the function it should be javascript:swapContent('Con1') not javascript.swapContent('Con1'). You have put '.' instead of ':'
so the links should be
Content1 •
Content2 •
Content3 •
You should also change the variable name in PHP script, which I hope you already knew
Well, I've created a code to include a PHP page in a box and not only the normal include ('');
This is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script>
$(function() {
var count = 1;
$('#append').click(function() {
if (count < 2) {
$('#parent').append('<div id="first' + count + '">text</div>');
$('#first1').load('../image/index.php');
count++;
}
});
});
</script>
<a id="append">Add DIV 1</a>
<div id="parent">
</div>
</body>
</html>
Now, I've noticed I could "load" a page in html, but all the php and javascript code is "out".
How do I do to have the "real" page inside another.
The PHP code is not returned since it is executed on the server before you get the HTML back from it.
In order to just retrieve it as plain text you will need to change the file you are trying to retrieve.
As far as how to load a page inside another page, you can use iframes for that.
Try this:
<script>
$(function(){
var count = 1;
$('#append').click(function(){
if (count <2){
$('#parent').append('<div id="first'+count+'">text</div>');
$.get('http://test.com/image/index.php',function(data){
$('#first1').html(data);
});
count++;
}
});
});
</script>
How do I need to change loadPopupManual() in order to fill DIV #popup_manual with what I have in content.php? In particular, I need to insert the table specified in content.php into #popup_manual. This table must have all the functionality (some buttons) defined by scripts in content.php.
test.php
$(document).ready(function() {
loadPopupManual();
});
function loadPopupManual() { // to load the PopupManual DIV
$('#popup_manual').fadeIn("slow");
}
<div id="popup_manual">
// I need to fill this DIV with what I have in 'content.php'
</div>
content.php
<?php
include_once 'include/connect_db.php';
$query="SELECT * FROM aircrafts;";
$result=execute_query($query);
?>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
//...
}
</script>
<table>
<tr>
//... some content is inserted here from DB ($result)
</tr>
</table>
You just need to use $.get
$.get('content.php', function(data) {
$('#popup_manual').html(data);
});
so it will become:
$(document).ready(function() {
loadPopupManual();
});
function loadPopupManual() { // to load the PopupManual DIV
$('#popup_manual').fadeIn("slow");
$.get('content.php', function(data) {
$('#popup_manual').html(data);
});
}