I have created two simple pages as a test.
The first, PIG_TEST.htm, outputs a simple page containing 3 <DIV> sections; Header, Menu and Main.
The Menu section contains a link which, when selected should load the second page, PIG_TEST_1-php, into the <DIV> with the id of 'mainx', on the main page via a jquery click function.
However, when selected it just replaces the original page.
Seems like it is not finding or seeing the "mainx" div.
<!DOCTYPE html>
<html lang='en'><head>
</head>
<body style='background-color:#eeeecc'>
<div style='background-color:#6495ed; height: 110px;'>
<div class='col-md-12 text-center'>Header TEST PAGE
</div>
</div>
<div style='background-color:#ffaaaa; height: 150px;'>
<div class='col-md-12 text-center'>Menu TEST PAGE
<ul>
<li><a href='PIG_TEST_1.php' id='but1'>Item 1</a></li>
</ul>
</div>
</div>
<div id='mainx' style='background-color:#cccccc; height: 300px;'>
Main TEST PAGE
</div>
<script type='text/javascript' charset='utf-8'>
(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>
<script src='js/jquery-1.8.0.min.js'></script>
</body></html>
The PIG_TEST_1.php is:
<?php
echo "<body>";
echo " THIS IS A DUMMY PAGE <br></p>";
echo "</body>";
?>
I've tried putting the call to "jquery-1.8.0.min.js" just after the <body> but it stll fails.
Sorry, I'm new to jquery, any help would be appreciated.
You should move the jquery <script> tag outside of the other one (you have it nested), and you also need a $ symbol before (document).ready:
<script src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>
There are lot of problems with your code!
<script> cannot be contained inside another <script> tag.
Load jQuery before calling the function.
Add $ before (document).
So your code should be:
<script src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>
Related
I have a simple request for you brainies today. What i am trying to do is to activate a pop-up inside PHP tags. I have tested to see if the pop-up works by itself, and it does. My problem is the button, i have used the same setup elsewhere, but this time no cigar. I have also tried echoing the button inside the PHP tags but nothing happens.
My code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<button type=" button" class="LeButton"> Clicky Clicky!</button>
<?php
if(isset($_POST['LeButton'])){
echo'<script> $(function() { $( "#dialog" ).dialog(); }); </script>';
echo'<div id="dialog" title="Basic dialog">';
echo'<p>Image:</p>'; </div>';}
?>
</body>
</html>
I tried specifying it as a function aswell and added onclick() to the button to call that function, nothing happend either. Mind that this is the first time i am ever using Javascript/jQuery.
I (kindly) lauched a bit about the echo <script> part.
Allow me to write you a piece of code, with explanation and documentation:
HTML button:
<button type="button" id="LeButton" class="LeButton"> Clicky Clicky! </button>
&
<div id="dialog" title="Basic dialog" style="visibility:hidden"><p>Image:</p> <img src="http://placehold.it/50x50" alt="Placeholder Image" /></div>
Explanation:
Your button needs an id value. Which is called 'LeButton' in this example.
Documentation:
https://www.w3schools.com/tags/att_id.asp
jQuery part:
<script>
jQuery(document).ready(function() {
/**
* #version 1.0.0.
*
* Do magic on button click 'LeButton'
*/
$("#LeButton").click(function() {
$("#dialog").css("visibility", 'visible'); // make the div visible.
$("#dialog").dialog(); // Post here your code on forexample poping up your modal.
});
});
</script>
Explanation:
Your tag can be placed on the bottom of your page. Your browser will 'read' the whole page. By saying '(document).ready', your script will be executed once the page has been red by your browser.
For the '.click' part it's a jQuery function you can use. So which
means: once id attribute 'LeButton' (#) is clicked, jQuery will
execute a function, which will alert text in this case.
Documentation:
https://api.jquery.com/click/
Note: Make sure you have jQuery included/enabled.
Link:
https://jquery.com/download/
Note from Simon Jensen:
You should elaborate that the Class-attribute is for styling and the
Id-attribute can be for whatever code or identifying purposes and are
unique. Therefore should people be careful with styling with the
Id-attribute as things might conflict at some point. The ID-attribute
is used to interact with the "#LeButton" attribute.
The PHP can't be run from the client. If you want the dialog to be shown onclick of the button, you must send the element before it's clicked, at the moment when it is sent to the client. You should have the dialog element hidden until the user clicks the button. It could be something like:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<button type=" button" class="LeButton" onclick="$('#dialog').dialog()"> Clicky Clicky!</button>
<div id="dialog" title="Basic dialog" style="display:none">
<p>Image:</p>
</div>
</body>
</html>
You could also change the onclick attribute to a script in the head like this:
<script>
$(function() {
$(".LeButton").click(function() {
$('#dialog').dialog();
});
});
</script>
I recommend you to change the class of the button for an id, and then using #LeButton instead of .LeButton
You can handle this on the client-side without the need to use PHP to do so you need to give your button a unique identifier so whenever the button is clicked you can open the dialog using a simple evenlisener like so:
var dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
close: function() {
// do stuff here whenever you close your dialog
}
});
document.getElementById('my-button').addEventListener('click', function () {
dialog.dialog('open');
});
#dialog-form {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button type=" button" id="my-button" class="LeButton"> Clicky Clicky!</button>
<div id="dialog-form">
Name: <input><br/>
Password: <input type="passowrd">
</div>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<form action="index.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="LeButton" value="an_arbitraty_value">
<input type="submit" class="LeButton">
</form>
<?php
if(isset($_POST['LeButton'])){
echo'<div id="dialog" title="Basic dialog">';
echo'<p>Image:</p></div>';
}
?>
</body>
</html>
When you load the html page $_POST['LeButton'] is not set. Therefore the intended dialog box wil not be generated in the page. In order to have $_POST['LeButton'] set, you should pass it to the html page first, hence the form I added.
Alternatively you could go for a full javascript solution like so:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.hidden { display: none }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button type=" button" class="LeButton" onclick="showDialog();">
Clicky Clicky!
</button>
<div id="dialog" title="Basic dialog" class="hidden">
<p>
This is the default dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.
</p>
</div>
<script>
function showDialog() {
$( "#dialog" ).dialog();
};
</script>
</body>
</html>
I have a text that I would like to change ("Happy Clients" in the code below). I tried to find the text on the WP dashboard and in the template editor but with no luck, how can i locate the class so I'll be able to change the text?
<div class="_slider_shadow"></div>
</div><!-- /.carousel -->
<div class="count"><div class="count-info"><strong id="targetElem">0</strong><span class="count-description"> Happy Clients</span></div></div>
<script type="text/javascript">
EDIT
I found a file that contains the following code that is related to text that i want to change:
<div class="count"><div class="count-info"><strong id="targetElem">0</strong><span class="count-description"><?php the_field('text_for_count'); ?></span></div></div>
<script type="text/javascript">
var endVal = <?php the_field('count'); ?>;
var numAnim = new CountUp("targetElem", 0, endVal - 300, 0 , );
numAnim.start(function() {
numAnim.update(endVal);
});
</script>
You can install Query Monitor plugin. It has a section called Template which shows all template files that have been used to load the page. That should help you to find what you need.
Example output
Using jQuery you can do this :)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".count-description").text("No Clients");
});
});
</script>
</head>
<body>
<button>Click me</button>
<div class="enigma_slider_shadow"></div>
</div><!-- /.carousel -->
<div class="count"><div class="count-info"><strong id="targetElem">0</strong><span class="count-description"> Happy Clients</span></div></div>
</body>
</html>
I tried to do a simple slider but that did not work, so i am copying one of code cademy, but it still qont work.
I have used 4 different browsers all have the same problem, i can type in the box but wont post, and show below.
PLEASE HELP?
Html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link type='text/css' href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
AMMENDED
script.js
$(document).ready() {
$('.btn').click(function() {
var post = $('.status-box').val()
$('<li>').text(post).prependTo('posts');
});
};
THANK YOU ALL, this has been corrected and it now works :)
val is a jQuery function ... you need () to invoke it so it returns the value of element. As your code stands now you are trying to set a function object as text.
You are also using incorrect selectors $('btn') and $('status-box') which are looking for non existent tags <btn> and <status-box>.
Add dot prefix for both to represent class:
$('.btn') and $('.status-box')
As well as what's been mentioned in the other answer, I don't believe your main method is ever called. If it isn't called then the event handler isn't going to be attached.
The main method would be easier set up via jquery, so instead of:
var main = function() {
$('btn').click(function() {
var post = $('status-box').val
$('<li>').text(post).prependTo('.posts');
});
}
Just do:
$(function() {
$('btn').click(function() {
var post = $('status-box').val
$('<li>').text(post).prependTo('.posts');
});
});
Alternatively you could adjust your body tag as follows:
<body onload="main()">
So I'm trying to change the background a following page depending on what icon is clicked and I'm not sure whats wrong with my code! This is just a test page (Please excuse the weird code, but i need it in the actual site itself!)
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
background: url('<?php echo $_GET['image']; ?>';
}
</style>
<script>
function showWeather(Weather) {
//alert(Weather);
myform.weather.value=Weather;
// alert(Weather);
// ._Weather
myform.submit();
}
</script>
<link href="teststyle.css" rel="stylesheet" type="text/css">
</head>
<body background="images/gradientsky.jpg">
<div id="weather">
<ul id="nav-reflection">
<form method="post" action="cloudy_name.php" id="myform">
<li class="button-color-1"><img src="images/cloudybubble.png" width="211" height="180" align="left"></li>
<input type="hidden" name="weather" value="whatever">
</form>
</ul>
</div>
</body>
</html>
You have a couple problems here, I'll try and address them:
<form method="post" action="cloudy_name.php" id="myform">
<li class="button-color-1"><img src="images/cloudybubble.png" width="211" height="180" align="left"></li>
</form>
You're missing the "ul" wrapper. List-items can not exist by themselves.
You're saying showWeather('cloudy'). 'cloudysky' is not a full filename, so maybe it's cloudysky.jpg?
The user is clicking a link and being sent to another page, so any changes you make here with javascript won't stick once the user returns.
document.getElementById(test) needs to reference a string, like so document.getElementById("test")
Give those a shot and report back.
Your changeBgImage function didn't pass through the string 'image'
Try this:
<script type="text/javascript">
function changeBgImage (image) { // added Image
var element = document.getElementById('test');
element.style.backgroundImage = "url('"+image+"')"; // added single qoutes around image
// Took out window.location - see comments below for explanation
return false;// Added to stop Link execution
}
</script>
</head>
<body>
<div id="test">
<form method="post" action="cloudy_name.php" id="myform">
<li class="button-color-1"><img src="images/cloudybubble.png" width="211" height="180" align="left"></li>
</form>
</div>
I added all javascript functions into the onclick, both showWeather and changeBgImage
See comments below.
IDEA: on the link create a link to a php file. something like chg_bg.php?image=cloudy
On the php file, create some code to set the background
<style>
background: url('<php echo $_GET['image']; ?>';
</style>
I have an Iframe.html file :
<body onload="alert('frame 1 loaded');">
<div> This is frame 1 content </div>
<a id="a1" href="Sample.html"> click</a>
</body>
Sample.html
<body>
<ul id="list1">
<li name="one">one</li>
<li name="two">two</li>
</ul>
And I calling the iframe form test.html file :
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var i=10;
$("#frame1").ready(function () {
$('#frame1').contents().find('#a1').click(function() {
alert("Hello");
$('#frame1').attr('src', $('#frame1').contents().find('#a1').attr("href"));
$('#frame1').load();
});
$('#frame1').contents().find('#a1').click();
</script>
</head>
<body onload="handleMainOnload();">
<!--iframe id="frame1" src="about:blank"/-->
<iframe id="frame1" src="iframe.html"/>
</body>
Now I tried using the content of URL loaded in iframe i.e. Sample.html in test.html as follows :
$('#frame1').contents().find('#list1 li[name=one]').click(function() {
alert(" Clicking list....");
});
$('#frame1').contents().find('#list1 li[name=one]').click();
But this doesn't work.. Can you please tell me From Test.html how to access Sample.html file content like(id,name,class etc.) which is loaded in iframe.html using JQuery.
Please help.
Thanks
Kamakshi
To access any document inside an iframe included inside an HTML take for example the following page:
<html>
....
<body>
<iframe id='myFrame' name='myFrame' src='someUrl'>
</body>
</html>
You can access using the following script
myFrame.document.getElementById('elementID');
Make sure you provide a name (here: myFrame) that is used to access the frame itself.
The elementID is the id of any element inside the html/url loaded inside the iframe
<html>
<head>
<title>Main Frame 2 Title </title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
------
------
alert("frame ready");
var $value1 = $frame.contents().find('#list1 li[name=one]').html() ;
alert("loaded + " + $value1);
$frame.contents().find('#list1 li[name=one]').click(function() {
alert("About + clicked");
});
$frame.contents().find('#list1 li[name=one]').click();
}); });
</script>
</head>
<body>
<iframe id="frame1" src="sample.html" />
This works fine, if i am giving iframe src=sample.html directly instead of redirecting using another file (i.e. src=iframe.html) and keeping Sample.html in same domain as parent file (test.html).