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
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>
I have divided my html-file into a header.php, content.php and footer.php
I would like to load the js files and the document.getready function either in the hader or in the footer file. But I got an error saying: Uncaught ReferenceError: $ is not defined.
In my header.php I load the following scripts in the head section:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" async></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.js" async></script>`
And in my Footer after the closing </body>-Tag I call:
<script>
$(document).ready(function() {
if( !window.isCMS) {
// Group images by gallery using data-fancybox-group attributes
var galleryId = 1;
$('.editable-gallery').each( function() {
$(this).find('a').attr('data-fancybox', 'gallery-' + galleryId++);
});
$('.editable-gallery').each( function() {
$(this).find('img').attr('width', '200');
});
// Initialize Fancybox
$("[data-fancybox]").fancybox({
// Use the alt attribute for captions per http://fancyapps.com/fancybox/#useful
//beforeShow: function() {
// var alt = this.element.find('img').attr('alt');
//this.inner.find('img').attr('alt', alt);
//this.title = alt;
//}
});
}
});
</script>
In my content.php file I include my header.php and footer.php like this:
<?php include ("header.php"); ?>
<?php include ("footer.php"); ?>
How and where do I have to implement the script files and the document.getready function?
This is my Gallery Code in my content.php:
<div id="my-gallery" class="editable-gallery">
<img src="fotos/2018/rl/02022018/3.jpg" alt="">
<img src="fotos/2018/rl/02022018/1.jpg" alt="">
<img src="fotos/2018/rl/02022018/3.jpg" alt="">
</div>
I have to add the attr "data-fancybox" and "width" to work with fancybox.
1st:- The error comes from src="http://code.jquery.com/jquery-latest.min.js" it should be https instead of http >> src="https://code.jquery.com/jquery-latest.min.js"
2nd:- you can include js files or js code in <head> OR BEFORE </body>
3rd:- you can use <script></script> anywhere from <head> to </body> even before the line you including your jquery BUT use $(document).ready(function(){ //code here })
Note: if you have any plugins you must include the plugins after including jquery
your js code works fine
$(document).ready(function() {
//if( !window.isCMS) {
// Group images by gallery using data-fancybox-group attributes
var galleryId = 1;
$('.editable-gallery').each( function() {
$(this).find('a')
.attr('data-fancybox', 'gallery-' + galleryId++).find('img').attr('width' , '200');
});
// Initialize Fancybox
$("[data-fancybox]").fancybox({
// Use the alt attribute for captions per http://fancyapps.com/fancybox/#useful
//beforeShow: function() {
// var alt = this.element.find('img').attr('alt');
//this.inner.find('img').attr('alt', alt);
//this.title = alt;
//}
});
//}
});
<!-- 1. Add latest jQuery and fancyBox files -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<!-- 2. Create links -->
<div id="my-gallery" class="editable-gallery">
<img src="http://via.placeholder.com/350x150" alt="">
<img src="http://via.placeholder.com/350x150" alt="">
<img src="http://via.placeholder.com/350x150" alt="">
</div>
<!-- 3. Have fun! -->
i have a text inside an element. This text will changed according to a jQuery. As it changes, I need to pull that text as a php variable. This variable will be used later in the same document.
<div id="divId">sometext<div>
now, I want to assign a php code to assign "sometext" as the variable
I need the below;
<div id="divId">
sometext
<?php
$variable = (get text from "divId");
?>
<div>
then I can use it somewhere else like
<div>
<?php
if($variable == "sometext")
{
echo ($variable);
}
?>
<div>
I need help on the (get text from "divId")part
You cant do with PHP. please use javascript or jquery
please find way of jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var getDivValue = $('#divId').html();
if(getDivValue == 'sometext'){
$('#divId').html('updateText');
}else if(getDivValue == 'other'){
$('#divId').html('updateTextTwo');
}
});
</script>
</head>
<body>
<div id="divId">sometext</div>
</body>
</html>
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>
I am experiencing this problem for few hours now and really not sure how to solve this. However its work fine in IE but it is not working in mozilla.
Here is my code:
<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/skin.css">
<!-- Utility Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script src="http://yui.yahooapis.com/2.7.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.7.0/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script src="http://yui.yahooapis.com/2.7.0/build/editor/editor-min.js"></script>
<script>
var myEditor = new YAHOO.widget.Editor('msgpost', {
height: '100px',
width: '522px',
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
myEditor.render();
//Inside an event handler after the Editor is rendered
YAHOO.util.Event.on('save', 'click', function() {
//Put the HTML back into the text area
myEditor.saveHTML();
//The var html will now have the contents of the textarea
var html = myEditor.get('msgpost').value;
});
YAHOO.util.Event.on('edit', 'click', function() {
//Put the HTML back into the text area
myEditor.saveHTML();
//The var html will now have the contents of the textarea
var html = myEditor.get('msgpost').value;
});
</script>
<form id="form2" name="form2" method="post" action="processgreeting.php">
<div class="span-22 gtype" >
<div class="span-5"><label>Message:</label></div>
<div class="span-17 last"><textarea name="msgpost" id="msgpost" cols="50" rows="40"> </textarea> <br>
</div>
<input type="submit" name="save" value="Post Greeting" id="postgreeting"/>
</form>
processgreeting.php
if(isset($_POST['save']))
{
$body = trim($_POST['msgpost']);
$valid = 1;
$publish_date = strtotime($publish);
if ($publish >= $today)
{
$valid = 0;
$insert_greeting = "INSERT INTO greeting (type,decs,name,message,date,user,publish) VALUES ('$type','$desc','$name','$body','$today',$user,'$publish')";
$register_greeting = mysql_query($insert_greeting)or die(mysql_error());
$lastnum = mysql_insert_id();
$_SESSION["greetingno"] = $lastnum;
if($valid == 0)
{
echo '<strong>Greeting Type: </strong>'.$type.'<br><strong>Description: </strong>'.$desc.'<br><strong>Name: </strong>'.$name.'<br><strong>Message: </strong>'.$body.'<strong><br>Publish Date: </strong>'.$publish;
}
//echo $valid;
}
else{ //echo "<span style='color:#FF0000'>Publish date is invalid</span>" ;
echo $valid;
} //}
}
Please can anyone help me what iam doing wrong..
Thanks in advance.
i've just tried on my mac with firefox and everything seems to work. What's exactly your problem ?