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>
Related
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>
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>
This my code :
<?php
if (isset($_GET["add"]))
{
?>
<script type="text/javascript" language="javascript">
var i=0;
function createDiv()
{
$('#newdiv').append('<div id="div"'+i+'" class="ex" style="text-align: left;">Life Really suck</div>');
i++;
$( ".ex" ).draggable({containment:'parent',cursor:'pointer',opacity:0.6});
$( ".ex" ).droppable();
}
createDiv(); // will execute when it loads this line
</script>
<?php
}
?>
<div id = "newdiv"> </div>
How can I make the function execute in the DIV outside of the condition statement?
I need the function execute normally is the GET["add"] is set
Now I it does not execute in the DIV even though the function does run
surround your createDiv() call by $(document).ready(function(){ and }), this will execute what's inside only after the page is fully loaded.
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);
});
}
I am using a menu collapsing javascript in my wesite in which when i click in the title called member the list of members must be shown down the member as accordion.In firefox and chrome it is working quite well but when i tested with IE8 all the members are showing before clicking the member title.Can some one help me is this a browser compatibility issue or something else.Hope i will get the answer soon.
This is the function which is in the js page.
//menu-collapsed.js
<script type="text/javascript">
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
</script>
and the html page is:
<html>
<head>
<script src="includes/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="includes/menu-collapsed.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var page={};
$(function() {
new FrontPage().init();
});
//]]>
</script>
</head>
<body>
<ul id="menu">
<li>
<?php
$mvo=new menuVO();
$mdao=new menuDAO();
$menus=$mdao->fetchAll('onlypublished');
foreach($menus as $menu)
{
if($menu->menu_type=='Member')
{
echo "$menu->name";
}
}
$mvo=new membersVO();
$mdao=new membersDAO();
$list=$mdao->fetchAll('onlypublished');
echo "<ul>";
foreach($list as $members)
{
echo "<li><span>$members->name</span></li>";
}
echo "</ul>";
?>
</li>
</ul>
</body>
</html>
Put up your code. You may also find your answer trying to learn how to make one.