I have a PHP page in which am hiding a div using a javascript method. This method is called on a hyperlink click. The issue is its giving Uncaught Reference error. Not sure what is the cause. I tried even to have a external JS file and define the method in that, but still not working.
I'll give you a hint:
make sure you have defined your DIV tag before the action script
like:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="hideDiv">Hide on click</div>
<input type="button" value="hide" onClick="javascript:HideIt()"/>
<script type="text/javascript" language="javascript">
function HideIt(){
//what ever it is:Hide codes goes here
$('#hideDiv').hide() // we used it after the defined it :)
}
</script>
</body>
</html>
Uncaught Reference error in javascript usually means that the object or accessor isn't defined at the time of calling the method.
I've seen it when using jQuery when jQuery is included at the bottom of the html and the javascript is being triggered before it.
So
$('divid').text = "blah";
before the
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Hence the $ method doesn't exist.
The solution would be to put the method call on body load.
Here is the general code to hide any div onClick.
<html>
<head>
//Here to add script tag, which i have writen below
</head>
<body>
<div id="testDiv">This is to be hide on click</div>
<br/>
<br/>
Click to hide!
<br/>
<br/>
Click to show!
</body>
</html>
NOTE: You should write apostrophes carefully. Bcox ' and " have different impact
Here is the script tag which u have to place in head tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Related
I want to reload just an specific div. I searched and read some similar questions too. What I made is below. What is wrong with my code that does not refresh the div ?
<html>
<body>
<div id="reloadable">
<?php include 'rand.php'; ?>
</div>
<button class="ref" onclick="refreshDiv();"> refresh </button>
<script type="text/javacript">
function refreshDiv()
{
$('#reloadable').load(location.href + ' #reloadable');
}
</script>
</body>
</html>
<?php
$a= rand(0,10);
echo $a;
?>
The problem is that you're returning an entire HTML document when you use location.href as the URL. The documentation warns:
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
Since you're returning the <html> element, this is being filtered out, so there's nothing to insert into #reloadable.
Instead, you could load directly from rand.php:
function refreshDiv()
{
$('#reloadable').load('rand.php');
}
With the pure respect to all friends that helped me specially Barmar and Ken lee, I can not accept Barmar's answer as correct answer. Because Barmar said $('#reloadable').load(location.href + ' #reloadable'); can not run properly and mentioned some reasons. But I added
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
from Ken lee's answer and also added onclick="javascript:refreshDiv() to my original code attached to main question and it worked. So the following code is working
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<html>
<body>
<div id="reloadable"><?php include "rand.php"; ?></div>
<button class="ref" onclick="javascript:refreshDiv();"> refresh </button>
<script>
function refreshDiv() {
$('#reloadable').load(location.href + ' #reloadable');
}
</script>
</body>
</html>
<HTML>
<script language="JavaScript">
<script language="php">
</script>
</script>
</HTML>
<HTML>
<script language="php">
</script>
<script language="JavaScript">
</script>
</HTML>
I want to insert PHP and javascript code in HTML code like above.
Can I do this work??
It doesn't work like that, you can have them in the same file per se, just not like you have.
PHP is executed on the server and the result is sent to the client, whereas the JS code is executed by the client's browser.
<?php
//php code in here is evaluated and the result sent to the client
$somevar = 1234;
?>
<HTML>
<script language="JavaScript">
//javascript in here is evaluated by the client
//you could insert PHP values here to be used in JS if you want
//make sure you escape them though...
var some_js_var = <?php echo $somevar; ?>
//the JS var above would contain the value of php variable $somevar
</script>
</HTML>
<HTML>
<script language="JavaScript">
<?php
// Your PHP code here that outputs javascript
?>
</script>
</HTML>
<HTML>
<?php
// Your PHP code here that outputs text/html code
?>
<script language="JavaScript">
</script>
</HTML>
But of course, as others pointed out, browser will not see your PHP code. It will be processed by the server and browser will see only the javascript/html.
sure, you can even make php generate javascript. php file is processed to html before sending it to client, and client will see nothing except html with javascript.
You can also insert your code like this, don't give error
<HTML>
<script language="JavaScript">
<script language="php">
echo "alert('javascript alert')";
</script>
</script>
</HTML>
<HTML>
<script language="php">
echo "php code runned";
</script>
<script language="JavaScript">
</script>
</HTML>
If you want php to be executed inside javascript, then you have to use AJAX.
AJAX is a javascript code that allows you to call the server, thus executing php code and returning the result to you, at any time you wish (not only at the creation time of the page, but at the time the javascript code is called).
https://www.w3schools.com/xml/ajax_intro.asp
with jquery is even easier:
https://api.jquery.com/jquery.ajax/
You can put PHP code in the middle of a fichero.js???
Many do not know, but not in principle. If the server to interpret a php file needs to see the php extension, note that you can not set or if the file is php html extension, therefore you're not a js file extension. What you can do is something like the php type="javaScript"> '; echo 'write ("'. $ name. '");'; echo ''; } ?> For example.
I am using the framework codeigniter and trying to use jquery for the purpose of displaying and allowing the user to chose a time period in which he would like to preform his search. I have the date and the text field displayed but when I click on the text field I don't get any calendar to chose a date from.
This is my view:
<html>
<head>
<script type="text/javascript" src="<?php echo $jquery?>"></script>
<script type="text/javascript">
$(function() {
$( "#datepicker" ).ui-datepicker();
});
</script>
</head>
<body>
<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div><!-- End demo -->
<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->
www.msn.ca
<?php echo form_open('search/submit'); ?>
</body>
</html>
It's been taken from the sample code: http://jqueryui.com/demos/datepicker/
FYI I am using jQuery UI 1.8.16
Not sure what's wrong here.
If anyone thinks the controller is relevant then here it is:
<?php
class calendarController extends CI_Controller{
public function index()
{
$this->load->helper('url');
$data['jquery'] = base_url("jquery.js");
$this->load->view("jqueryView", $data);
}
}
?>
I do not see links to jQuery JS and CSS files on you page. Try something like this:
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
You can place them anywhere on your page. Better at the end so that your pages shows faster. Use datepicker() inside jQuery load function, like in your code to make sure that nothing is broken
You're building your url wrong.
Should be:
$data['jquery'] = base_url().'jquery.js';
which gives in your view: http://www.yoursite.com/jquery.js.
I have some doubt on the actual true position of that script. Change it accordingly to your folder structure, just keep in mind that base_url() returns your url like this, with the trailing slash:
http://www.yoursite.com/
Also, you you're not loading jQuery UI, so add that too (same way as above)
Another thing, your input lacks the name attribute, you need it in case you want it to be fetched by php. AND, it's outside the form, so it won't work. This is just a note, maybe you don't want to use it that way, but just in case...
Shouldn't you place your datepicker initialization inside the jquery ready event handler ?
Like so:
$(document).ready(function(){
$( "#datepicker" ).datepicker();
});
I want to do some autosuggest for my text field, using this plugin AutoSuggest jQuery Plugin
I have an array, already json_encoded, and the files on the server, js, css, but Im not getting yet how the example works, here my code,
<html>
<head>
<title>test-data</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="inc/css/admin_style.css" rel="stylesheet" type="text/css">
<link href="inc/css/autoSuggest.css" rel="stylesheet" type="text/css">
<script language="javascript" src="inc/js/functions.js"></script>
<script language="javascript" src="inc/js/jquery-1.5.1.js"></script>
<script language="javascript" src="inc/js/jquery.autoSuggest.js"></script>
<script language="javascript" type="text/javascript">
</script>
</head>
<body>
<center><br><font class="title">test</font></center>
<form action="dataAll.php" method="post">
Name: <input type="text" name="fname" />
<input type="submit" />
</form>
<p> </p>
<p>JSON</p>
<p> </p>
<?php
$encoded = json_encode ($familyNames);
echo $encoded;
?>
</body>
</html>
so Im supposed to put this code,
$(function(){
$("input[type=text]").autoSuggest(data);
});
but the question is where??( as if I put it inside the php tags, it gives me an error
where should I put the name of my json formatted array? "$encoded" for the function to recognize that is the source of data?
thanks a lot!
You've got all the pieces, but your order/methodology is a bit off. Try creating a second file, named something like ajax.php, and place all of your php code in there. To ensure you are outputting good JSON, add the line header('Content-Type: text/json; charset=ISO-8859-1'); at the very beginning of the ajax.php file (you must set the header before any output is sent or you'll get an error). Now you've got to request your suggestion data:
$(document).ready(function() { // Runs when your page is loaded in the user's browser
$.getJSON('ajax.php', function(data) { // Runs ajax.php, then executes an anonymous function to handle the response
$('input[name="fname"]').autoSuggest(data); // Set your input field to use automatic suggestions with the returned data
}); // end getJSON
}); // end ready
This code simply executes an asynchronous HTTP request for ajax.php, and hands off the returned JSON data to the auto-suggest jQuery plugin. Place it inside a <script type="text/javascript"></script> tag. It will run once when the page loads due to the use of $(document).ready(...). I added the small optimization (input[name="fname"]) so jQuery doesn't attempt to attach the auto suggestion functionality to every text input you have on your page. If thats what you wanted to do (unlikely), just change it back to input[type=text].
You really do not need a separate php file to get this to work. There is nothing stopping you from doing it all in one file, but you'll soon realize how cluttered and unmanageable that can get. For me, its easiest to think of my "ajaxy" php code as a single, modular piece of my web application.
Be sure to reference these pages for detailed information:
http://api.jquery.com/
http://api.jquery.com/ready/
http://api.jquery.com/jQuery.getJSON/
You put it inside a tag in the html.
<script type="text/javascript">
$(function(){
$("input[type=text]").autoSuggest(data);
});
</script>
Stupid question, but does anyone know how to load google's jquery from an external script so it doesnt clunk up my header? In other words, I want to take the code below (probably starting at the google.load stuff and save it inside another file to include in my header. I want to keep my view source pretty :)
<script src="http://www.google.com/jsapi?key=MySeCretKeyHere" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.4.0");google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(function(){ $(document).ready(function(){
//onload stuff goes here
});});
</script>
Just as you say:
load.js:
google.load("jquery", "1.4.0");google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(function(){ $(document).ready(function(){
//onload stuff goes here
});});
html:
<script src="http://www.google.com/jsapi?key=MySeCretKeyHere" type="text/javascript"></script>
<script src="load.js" type="text/javascript"></script>