CodeIgniter 3.0
Form uses button as the submit event:
<button type="button" name="submit">SEARCH</button>
Here is the very simple javascript I have so far, and I don't see why it should be outputting the form page in an alert box:
$( document ).ready(function() {
$("button[name='submit']").click(function(){
//
});
});
Produces an alert box with readystate, statustext, and responsetext:
200 , OK, <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
(...and the entire html output of the form page goes here...)
</body>
</html>
I don't understand why my js should output anything if I haven't told it to.
As it turns out, I was calling another javascript in my head, which had an identical $(document).ready(function script section. Even the <button name='submit'] was the same, so my javascript much have got confused and just threw up the status codes and responsetext.
Related
The question How do I get the entire page's HTML with jQuery? might look similar, which helps in obtaining data from <html> and <!DOCTYPE>. But in addition, I also require to obtain any comments that persist before the <html> tag.
I am displaying the page with the help of srcdoc attribute using jQuery. My current code to obtain the data is
$("#myiframe").contents().find('html')[0].outerHTML;
and a snippet in this answer to obtain <!DOCTYPE html>
Sample use case:
<!--
This comment will be used for further processing
-->
<!DOCTYPE html>
<html lang='en'>
<head>
...
</head>
<body>
...
</body>
</html>
<!--
This comment will be used for further processing
-->
The current output is only from <!DOCTYPE html> to </html>. Expected to have the comments outside.
Have a look at jQuery's $.get function. This basically returns everything you would retrieve with a normal GET request.
https://api.jquery.com/jquery.get/
Try this:
$('iframe#myiframe').load(function() {
getFrameContent(this.contentWindow.location);
});
function getFrameContent(windowURL) {
$.get( windowURL, function( data ) {
//where 'data' is the page contents
$( "#whateverElementYouWant" ).html( data );
});
}
i am trying to get a value in input box automatically by clicking button "get name", from database. how can i implement it...?
my so far work is below...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var n = $("#div2").load("getTotal.html #p1").val();
$("#div2").val(n);
});
});
</script>
</head>
<body>
<input type="text" id="div2" value=""/>
<button>Get Name</button>
</body>
</html>
and getTotal.html page contents...
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">John D. Feller</p>
in doing so.... i am getting an error "[object, Object]".
Help me out....with this error and advice me how can i take values from database.
Issues in the code:
1) $("#div2").load(...) doesn't make much sense because it's telling jQuery to pull the content of the URL as HTML content of #div2. Here #div2 is an input which is not supposed to have HTML content. http://api.jquery.com/load/
2) You may want to load only the content of #p1 by using getTotal.html #p1, but this syntax won't work as you expected. jQuery can only pull the full content of getTotal.html, then you need to extract content of #p1 from it.
Assuming getTotal.html page is in same directory as your main page, the JS code can be modified to:
$(document).ready(function(){
$("button").click(function(){
$.get("getTotal.html", null, function(text) {
$("#div2").val($(text).filter("#p1").html());
});
});
});
I have something simple. I have an html file and JavaScript file. In the JavaScript file the simple alert() function is called but, it does not work!
I wrote a second line in the JavaScript file to make sure I was not giving the incorrect path console.log() and it works as expected.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div id="container">
</div>
<script src="functionality.js"></script>
</body>
</html>
In external JavaScript file:
alert('hello'); // does not get executed
console.log( 'hello' ); // gets executed
Why this does not work?
You have probably pressed "prevent this page from creating additional dialog" in your Chrome browser. Try restarting it.
I am using jQuery autocomplete plugin to get values from database using this plugin. As per demo I made my code like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="js/jquery.autocomplete.js"></script>
<link rel="stylesheet" href="styles.css">
<script>
jQuery(document).ready(function() {
jQuery('#autocomplete').autocomplete({
serviceUrl: 'ajax.php',
});
});
</script>
</head>
<body>
<input type="text" id="autocomplete">
</body>
</html>
Now when I am doing any search. Then in console tab I can see the ajax request like this
XHR finished loading: GET "http://localhost/ajax.php?query=united
additionally it is showing one error in console tab like
Uncaught SyntaxError: Unexpected token < in jquery-2.1.0-min.js:4
Now to get the value of query string in ajax.php I did like this
$value = $_POST['query];
echo $value;
But it is not showing any value. So can someone tell me how to get the input entered values in the ajax.php file? Any help and suggestions will be really appreciable. Thanks
You are using Google Chrome, aren't you?
It would be helpful to see what data is actually transfered...
Try to hit F12, open the "Network" tab, click on the item that shows up when the AJAX request is made, and check the output in the "Response" sub tab.
My assumption: You're facing some syntax error in your PHP file that outputs HTML tags as part of an error message.
BTW: Your PHP code contains a syntax error, the ' after index "query" on line 1 is missing...
I think this is a very simple question, but I can't seem to get it to work. I need to use JavaScript (specifically jQuery, apparently) to grab some content from a page, and pull it into another page. I've researched this quite a bit, but can't seem to get even a very simple example to work.
Here is the page I'm trying to get content from:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
</head>
<body>
<p>This is the test html page.</p>
</body>
</html>
Here is the page I'm trying to use to pull the content:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>PullData</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</head>
<body>
<ol id="result"></ol>
<script type="text/javascript">
$('#result').load('test.html');
</script>
</body>
</html>
When I open the page it doesn't seem to do anything. I'm basically trying to follow the examples from jquery.com: http://api.jquery.com/load/
Both html pages are in the same folder somewhere on my C drive.
What am I missing?
Thanks in advance for your help!
What browser are you using?
Because of same-origin policy, some browsers won't permit AJAX requests to file:/// URLs, even if the original file was loaded that way. I know this is true of Chrome, but haven't tested others.
What does your .load() error handler say? Oh...
It seems to make logical sense.
Checking the API on load you may want to see if it actually loads, or if it encoutners an error
$("#result").load("/not-here.php", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#result").html(msg + xhr.status + " " + xhr.statusText);
}
});
API LINK: http://api.jquery.com/load/
sometimes the debugging information is a good first step to any solution.
You have your script tags at the end of your page, which means the enclosed JS will be invoked as soon as the browser reaches it, which may not be before the DOM is ready (which means the <ol> might not be set up to get the content of test.html). Try enclosing your load in a $(document).ready() callback as follows:
<script type="text/javascript">
$(document).ready(function() {
$('#result').load('test.html');
});
</script>
Also why are you inserting a full HTML page into an ordered list? You should try an HTML snippet (no head & body tags) into a content holder such as <div> or <span> where it will be semantically correct.
If none of these things work, attach a callback as follows:
$('#result').load('test.html', null, function(responseText, textStatus, xhr) {
alert(textStatus); // see what the response status is
});
Where is the closing script tag?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</head>
Your code needs to be
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
You must first check if your HTML is ready.
$(document).ready(function() {
$('#result').load('test.html');
});
To ensure #result1 is loaded, you need a document.ready event handler:
<script type="text/javascript">
$(document).ready(function(){
$('#result').load('test.html');
});
</script>
Hope this helps. Cheers