I have a webpage with tabs inside it, and when I click on a tab it should load a text editor then get the text from a file and put it inside the text editor.
However, the text doesn't load synchronously, it behaves asynchronously. Even though I made something that should be synchronous.
here's the code :
function init(){
$( "#accordion" ).accordion({heightStyle: "content",collapsible: true});
$( "#tabs" ).tabs(
{
activate: function(click,ui) {
ui.oldPanel.children("#editor").remove();
ui.newPanel.load("be.htm",function(response, status, xhr){
$("#editor").css("width","100%");
$("#editor").css("height","500px");
$.ajax(
{
url: "./load_content.php",
async: false,
data: "name="+ui.newTab.text(),
success: loadContent
});
});
}
}
);
}
function loadContent(contenu){
alert(contenu);
$("#textBox").html(contenu);
}
as requested, i tried to make a MCVE
here is be.htm , the "editor" (i took out all that wasn't necessary)
<!doctype html>
<html>
<head>
<title>Rich Text Editor</title>
</head>
<body>
<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
</body>
</html>
here is bv.html, the webpage where the code must appear (the jquery script are lcoally stored on my computer so you'll have to input your own paths, sorry
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projet</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- <link rel="stylesheet" href="YOURPATHHERE/Projet/jquery-ui.css">- -->
<script src="YOURPATHHERE/Projet/jquery-2.1.3.js"></script>
<script src="YOURPATHHERE/Projet/jquery-ui.js"></script>
<script src="YOURPATHHERE/Projet/bv.js"></script>
<script src="YOURPATHHERE/Projet/jstree.js"></script>
<link rel="stylesheet" href="./bv.css">
<script>
$(function() {
init();
});
</script>
</head>
<body id="body">
<div id="tabs">
<ul>
<li>Onglet1</li>
<li>Onglet2</li>
<li>Onglet3</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>
i gave you the full javascript code i have so far.
and finally here's the php called by ajax :
<?php
$filename=$_GET['name'];
$data = file_get_contents("./".$filename);
echo $data;
return $data;
?>
and btw, i'm sorry if you find this code ugly, but i'm a starter as i already told.
Related
i need a little info on google recaptcha. I want to grab the value of "g-recaptcha-response" that compares in the captcha.php file i inserted below in my jquery file and then send it to the captcha.php file using jquery $.post() method. I apologize if this is duplicate but i really cannot find someone with my same problem ;)
THE HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="AlterVista - Editor HTML"/>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="handle_spam.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<div class="g-recaptcha" data-sitekey="6Lf8LxIUAAAAALg93pw24l53KTeqrIwl7kUY-opk"></div>
<button id="go">Register</button>
</body>
</html>
THE PHP
<?php
$captcha=$_POST['g-recaptcha-response'];
echo $captcha;
if(!$captcha){
echo 'You must verify yourself';
exit;
}
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=6Lf8LxIUAAAAACB9iqeOermR-rPOW0zcWRfoetBO&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
if($response.success==false)
{
echo 'abort_all';
}else
{
echo 'success';
}
?>
THE JS
$(document).ready(function(){
$('#go').click(function(){
send=$('')
$.post('captcha.php',function(data){
alert(data);
});
});
});
Use this
<div class="g-recaptcha" data-callback="captchaCallback" data-sitekey="...">
and provide the function:
function captchaCallback(response) {
alert(response);
}
I have a div that serves of container for a css animation that appears over the entire website's home page... a text and background that opens like curtains, revealing the website under it. It's like an intro landing page. The thing is I need it to appear only on first page load. I don't want it to appear on page refresh or if someone navigates thru the site and comes back to home page.
Can someone please show me how I would have to code this because I've search a lot on the web and didn't find any clear explanations for my particular case.
Here is the code for the div:
<div id="landContainer">
<div class="left-half" id="leftP"><article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article></div>
<div class="right-half" id="RightP"><article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article></div>
</div>
So the div I must display only on first page load would be the one with the ID landContainer, that contains a couple of other divs.
Since I'm new to this type of coding, I would need a complete example of the code I need to use with my div.
For Ian... here is the content of my index.html file...
<!DOCTYPE html>
<html>
<head>
<title>Landing page v2</title>
<link rel="stylesheet" type="text/css" href="landing.css" media="screen" />
</head>
<body>
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
<script type="text/javascript" src="scripts/snap.svg-min.js"></script>
<script scr="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var isExists = localStorage.getItem("pageloadcount");
if (isExists != 'undefined') { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Landing page v2</title>
<link rel="stylesheet" type="text/css" href="landing.css" media="screen" />
<script type="text/javascript" src="scripts/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
if (localStorage.getItem("pageloadcount")) { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
</script>
</head>
<body>
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
</body>
</html>
The best way is to use session through which you can determine if its a new request or old.
Server side session will be best here
$( document ).ready(function() {
var isExists = localStorage.getItem("pageloadcount");
if (isExists != 'undefined') { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
I have read through the available links on this topic and they haven't helped.
I'm trying to get the following code to run. The "menu.html" loads the "world.html" in a div on another page, and the HTML comes up, but not the JavaScript.
At first I had the JS in a separate file, but when it wasn't running I moved it into "world.html", but it didn't fix the problem. I have also tried referencing jQuery.
This is menu.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="contact.js"></script>
<script src="preparePage.js"></script>
</head>
<body>
<a id="infoButton" class="infoButton" href="info.html"></a>
<a id="bodyButton" class="bodyButton" href="body.html"></a>
<a id="enterButton" class="enterButton" onclick="preparePage(); return false;"></a>
<a id="leaveButton" class="leaveButton" href="leave.html"></a>
<a id="contactButton" class="contactButton" onclick="contact(); return false;"></a>
</body>
<footer>
</footer>
</html>
And preparePage.js, which gets rid of the menu and loads world.html:
function preparePage() {
document.getElementById("box").style.backgroundImage = "none";
$("#infoButton").fadeOut("slow");
$("#bodyButton").fadeOut("slow");
$("#leaveButton").fadeOut("slow");
$("#contactButton").fadeOut("slow");
$("#box").load("world.html", function enter() {
$("#enterButton").fadeOut("slow");
});
}
And last but not least, world.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function wut() {
window.alert("owo");
}
</script>
</head>
<body onload="wut(); return false;">
mhfkhgfhtfjhfjj<br><br>
<canvas id="gameBox" width="1000" height="500" style="background-color:#ffffff;"></canvas>
</body>
<footer>
</footer>
</html>
EDIT: Also including launchpad.html, which is the page containing the div in which menu.html and world.html load:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body onload="openGame(); return false;">
<div id="cloud"></div>
<div id="box" class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="openGame.js"></script>
</body>
<footer>
</footer>
</html>
And openGame.js, which changes the shape of #box and loads menu.html:
function openGame() {
$("#cloud").fadeOut("fast");
$("#box").animate({
height: '750px',
width: '1700px',
top: '100px',
left: '100px',
padding: '0px'
});
$("#box").load("menu.html");
document.getElementById("box").style.backgroundImage = "url('Images/menuBackground.png')";
}
I would use JQuery for the on-click events, and also make sure that all of the element id's that you reference in your script are present in the page. Another thing to check is that your scripts are loading properly, the letter casing of the file name is important on Linux servers.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="contact.js"></script>
<script src="preparePage.js"></script>
</head>
<body>
<ul id="menu">
<li><a id="infoButton" class="infoButton" href="info.html">test1</a></li>
<li><a id="bodyButton" class="bodyButton" href="body.html">test2</a></li>
<li><a id="enterButton" class="enterButton">test3</a></li>
<li><a id="leaveButton" class="leaveButton" href="">test4</a></li>
<li><a id="contactButton" class="contactButton">test5</a></li>
</ul>
<div id="box" style="width:500px; height:500px; background-color:#FFF; background-image:url(http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded&a);">
test box
</div>
<footer>
</footer>
</body></html>
Javascript:
$( document ).ready(function() {
$( "#enterButton" ).click(function() {
document.getElementById("box").style.backgroundImage = "none";
$("#infoButton").fadeOut("slow");
$("#bodyButton").fadeOut("slow");
$("#leaveButton").fadeOut("slow");
$("#contactButton").fadeOut("slow");
$("#box").load("/zalun/VkCyH/app.html", function enter() {
$("#enterButton").fadeOut("slow");
})
})
});
Live example: https://jsfiddle.net/ucjs77L8/
Apart from the obvious fact that you don't have an element with the id box, please realise that the jQuery load method will not trigger the onload callback that you have defined in world.html. So you'd need to call that yourself.
So fix two things:
define box, e.g.
<div id="box"></div>
call wut(), from menu.html:
$("#box").load("world.html", function enter() {
wut();
$("#enterButton").fadeOut("slow");
});
The onload= in world.html has no effect when loaded like this, because to the browser there is only one document, which already has loaded. So, there is no second load event triggering.
Alternatively you could just add a script in world.html, near the end just before the closing </body> tag, which will run:
<script>
wut();
</script>
I want to create simple custom popup using jquery. My html code is as follows.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Thiws should be custom popup");
});
});
</script>
</head>
<body>
<button id="btn1">Show Text</button>
</body>
</html>
On clicking button it should open a form in popup asking username, email address and also it should have submit button
For reference what i want to ask
http://www.c-sharpcorner.com/UploadFile/736ca4/custom-popup-window-using-jquery/
You can use the function and css I wrote here:
https://jsfiddle.net/mm7b7t5t/
Opening a hello world popup:
var hello = new popup([{text:"Close"}], "Hello!", "<p>Hello World</p>");
hello.open();
You can make popups draggable, add multiple buttons etc etc
jQuery dialog is a mess in my opinion, I prefer my own popup code ^^
Just create a html file and copy/paste that code.
<html>
<head>
<title></title>
</head>
<body>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#OpenDialog").click(function () {
$("#dialog").dialog({modal: true, height: 400, width: 400 });
});
});
</script>
<a id="OpenDialog" href="#">Click here to open dialog</a>
<div id="dialog" title="Dialog Title">
<p>test</p>
</div>
</body>
</html>
I have a Tinybox 2 popup opening when clicking 'register'. The user has then to choose if he/she wants to register as a user or a performer. I'd like to show a different registration page for each, but first asking it, so handling with ajax would be the best. It can be done, as shown here, in the 5th example. Here is my current code:
<!doctype html>
<html>
<head>
<title>Regisztrációs típus kiválasztása</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="../css/soon.css"/>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="teljes">
<h1>Miként szeretnél regisztrálni?</h1>
<div id="felhasznalo">
Felhasználóként
</div>
<div id="eloado">
Előadóként
</div>
</div>
<script type="text/javascript">
$('#felireg').click(function() {
$.get("../php/register.php");
});
</script>
</body>
</html>
Thanks!
If i understand correctly, you want to make an ajax call to your registration file named "register.php" and show this in a Tinybox
$('#felireg').click(function() {
TINY.box.show({
url:'../php/register.php',width:300,height:150
})
});
This should work.
//EDIT :
Assuming your file returns only html:
$('#felireg').click(function() {
$.get("../php/register.php", function(data)
{
TINY.box.fill(data);
});
});
This should update the current Tinybox