This is a script when the script is executed I want to load the data into the div of id #trial. The script is an external array with three names the second I am trying to call is 'sarah'. Whats wrong?
<script>
$(document).ready(function(){
$("#trial").click(function(){
var attempt=$.ajax({
url: "names.js",
dataType: "script"
});
var msg=names[1];
attempt.done(function( msg ) {
$( "#trial" ).html( msg );
});
});
});
</script>
Change your code to this:
<script>
$(document).ready(function(){
$("#trial").click(function(){
$.ajax({
url: "names.js",
dataType: "script",
success: function(res){
//todo something with res
}
});
});
});
</script>
Related
What I want to do is pretty simple. I want to make an AJAX call to a specific html class, so that whenever the html page is loaded, jquery will make an AJAX call to that specific html div class.
For example:
<div class="targeted"></div>
In jquery:
$('.targeted')
I know that the syntax to make an AJAX call is:
$.ajax({
type: "GET",
url: "/api/something",
success: function(data) {
console.log(data);
}
});
But how do I implement this AJAX call to the $('.targeted') whenever the page is loaded?
Thanks
If you mean you want to display the result of the ajax call in the element, you update the element from within the success callback:
$.ajax({
type: "GET",
url: "/api/something",
success: function(data) {
$('.targeted').html(data);
}
});
That example assumes
You want to replace the content of the element (rather than adding to it); more options in the jQuery API.
data will be HTML. If it's plain text, use .text(data), not .html(data). If it's structured data, then of course you'll need to do more work to put the information in the desired form.
window.onload = function() {
yourFunction();
};
function yourFunction(){
$.ajax({
type: "GET",
url: "/api/something",
success: function(data) {
$('.targeted').html(data);
}
});
}
OR Drectly you can pass that method in document ready it will execute automatically
$(document).ready(function(){
//This will execute onload oof your web page what you required
yourFunction();
})
function yourFunction(){
$.ajax({
type: "GET",
url: "/api/something",
success: function(data) {
$('.targeted').html(data);
}
});
}
For when the page is loaded, you use:
$( document ).ready(function() {
console.log( "ready!" );
});
Inside the document ready, you put your AJAX call. If the result you get is in JSON format, you need to include the dataType as well like this:
$.ajax({
method: "GET",
url: "/api/something",
dataType: "json"
})
.done(function( data ) {
$('.targeted').append(JSON.stringify(data));
});
If the result is not JSON, then you can just append the data.
Also note:
The jqXHR.success(), jqXHR.error() and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail() and jqXHR.always() instead.
Please look at the jQuery documentation.
you can use jquery load like this:
$(".targeted").load('/api/something');
if you want to wait untill after the page is loaded, wrap it with window load like so:
$(window).load(function () {
$(".targeted").load('/api/something');
});
P.S. $(window).load(..) and $(".class").load(url) are two different functions
You can do:
$(function() {
$.ajax({
type: "GET",
url: "/api/something",
})
.done(function(data) {
$('.targeted').text(data);
});
});
alright, I have a popup which displays some notes added about a customer. The content (notes) are shown via ajax (getting data via ajax). I also have a add new button to add a new note. The note is added with ajax as well. Now, the question arises, after the note is added into the database.
How do I refresh the div which is displaying the notes?
I have read multiple questions but couldn't get an answer.
My Code to get data.
<script type="text/javascript">
var cid = $('#cid').val();
$(document).ready(function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "ajax.php?requestid=1&cid="+cid,
dataType: "html", //expect html to be returned
success: function(response){
$("#notes").html(response);
//alert(response);
}
});
});
</script>
DIV
<div id="notes">
</div>
My code to submit the form (adding new note).
<script type="text/javascript">
$("#submit").click(function() {
var note = $("#note").val();
var cid = $("#cid").val();
$.ajax({
type: "POST",
url: "ajax.php?requestid=2",
data: { note: note, cid: cid }
}).done(function( msg ) {
alert(msg);
$("#make_new_note").hide();
$("#add").show();
$("#cancel").hide();
//$("#notes").load();
});
});
</script>
I tried load, but it doesn't work.
Please guide me in the correct direction.
Create a function to call the ajax and get the data from ajax.php then just call the function whenever you need to update the div:
<script type="text/javascript">
$(document).ready(function() {
// create a function to call the ajax and get the response
function getResponse() {
var cid = $('#cid').val();
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "ajax.php?requestid=1&cid=" + cid,
dataType: "html", //expect html to be returned
success: function(response) {
$("#notes").html(response);
//alert(response);
}
});
}
getResponse(); // call the function on load
$("#submit").click(function() {
var note = $("#note").val();
var cid = $("#cid").val();
$.ajax({
type: "POST",
url: "ajax.php?requestid=2",
data: {
note: note,
cid: cid
}
}).done(function(msg) {
alert(msg);
$("#make_new_note").hide();
$("#add").show();
$("#cancel").hide();}
getResponse(); // call the function to reload the div
});
});
});
</script>
You need to provide a URL to jQuery load() function to tell where you get the content.
So to load the note you could try this:
$("#notes").load("ajax.php?requestid=1&cid="+cid);
What I'm tring to do is to load information from different pages, without having to refresh the whole main page...
Could you tell me how to adapt this code for loading files with different names (like about.html and project.html?
Note: this code is made just for loading 'page_.html' files.
var default_content="";
$(document).ready(function(){
checkURL();
$('ul li a').click(function (e){
checkURL(this.hash);
});
default_content = $('#pageContent').html();
setInterval("checkURL()",250);
});
var lasturl="";
function checkURL(hash)
{
if(!hash) hash=window.location.hash;
if(hash != lasturl)
{
lasturl=hash;
if(hash=="")
$('#pageContent').html(default_content);
else
loadPage(hash);
}
}
function loadPage(url)
{
url=url.replace('#page','');
$('#loading').css('visibility','visible');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page='+url,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#pageContent').html(msg);
$('#loading').css('visibility','hidden');
}
}
});
}
Here is the php file:
if(!$_POST['page']) die("0");
$page = (int)$_POST['page'];
if(file_exists('pages/page_'.$page.'.html'))
echo file_get_contents('pages/page_'.$page.'.html');
else echo 'There is no such page!';
You can make multiple ajax requests this is the jquery load method:
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
do that 2x and your well off!
Keep in mind for this to work you'll need the jquery library.
I was doing a similar thing on my site here is my code:
window.setInterval("check()",60000);
//request information notice is inside a function called check() (it's not required to put inside function I only do this if I will be making the same request multiple time throughout the program)
function check() {
var request = $.ajax({
url: "file.php",
type: "POST",
dataType: "html"
});
request.done(function(msg) {
//when request is done:
$(".wheretoputnewdata").html(msg);
});
request.fail(function(jqXHR, textStatus) {
//if request failed do this:
alert( "Request failed: " + textStatus );
});
}
Replace this line
if(file_exists('pages/page_'.$page.'.html'))
with this
if(file_exists('pages/'.$page.'.html'))
Please have a look at the following code
....The Javascript code in ctp file...
<script type="text/javascript">
$(document).ready(function(){
$( ".btn-danger" ).click(function(){
console.log("Red Button");
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
});
$( ".btn-success" ).click(function(){
console.log("Red Button");
idOfButton = $(this).attr('id');
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
increment(idOfButton);
alert(idOfButton);
console.log( "The act has been done");
toclose.toggle();
});
});
$( ".xy" ).click(function(){
$(this).find("#enside1").toggle();
$(this).find("#ptside1").toggle();
console.log(this);
});
function xxx(id)
{
alert(id);
}
function increment(uniqueWord)
{
$.ajax({
url: "http://localhost/cake2/flip2/correct",
data: {word: uniqueWord}
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
}
});
</script>
Please consider this function
function increment(uniqueWord)
{
$.ajax({
url: "http://localhost/cake2/flip2/correct",
data: {word: uniqueWord}
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
}
Here I am trying to call a method in a PHP file. That method contains a parameter.
public function correct($word)
{
$this->Flip2->correctAnswer(89,$word);
}
However there is an issue in passing the parameter values to the PHP method. It simply do not work. If I remove the parameters from "all" the places and just call the url: "http://localhost/cake2/flip2/correct", this works fine. What I have done wrong when passing the values to the PHP method via the Ajax call?
You can just pass the word in the URL:
function increment(uniqueWord)
{
$.ajax({
url: "http://localhost/cake2/flip2/correct/" + uniqueWord,
//...
As Another solution you can change ajax call to be post request and get data in your controller from $this->request->data
$.ajax({
url: "http://localhost/cake2/flip2/correct",
data: {word: uniqueWord},
type: 'post'
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
Controller will be
public function correct()
{
$this->Flip2->correctAnswer(89,$this->request->data['word']);
}
I'm using jQuery's ajax code to load new pages, but wanted him to get only the html of a div.
My codes:
HTML:
<body>
<div id="content"></div>
</body>
Script:
$.ajax({
url:href,
type:'GET',
success: function(data){
$('#content').html(data);
}
});
I wanted him to get only the html of $('div#content') on another page. How to do it?
Ok, You should "construct" the html and find the .content div.
like this:
$.ajax({
url:href,
type:'GET',
success: function(data){
$('#content').html($(data).find('#content').html());
}
});
Simple!
You can use JQuery .load() method:
http://api.jquery.com/load/
$( "#content" ).load( "ajax/test.html div#content" );
If you are looking for content from different domain this will do the trick:
$.ajax({
url:'http://www.corsproxy.com/' +
'en.wikipedia.org/wiki/Briarcliff_Manor,_New_York',
type:'GET',
success: function(data){
$('#content').html($(data).find('#firstHeading').html());
}
});
Unfortunately an ajax request gets the entire file, but you can filter the content once it's retrieved:
$.ajax({
url:href,
type:'GET',
success: function(data) {
var content = $('<div>').append(data).find('#content');
$('#content').html( content );
}
});
Note the use of a dummy element as find() only works with descendants, and won't find root elements.
or let jQuery filter it for you:
$('#content').load(href + ' #IDofDivToFind');
I'm assuming this isn't a cross domain request, as that won't work, only pages on the same domain.
$.ajax({
url:href,
type:'get',
success: function(data){
console.log($(data));
}
});
This console log gets an array like object: [meta, title, ,], very strange
You can use JavaScript：
var doc = document.documentElement.cloneNode()
doc.innerHTML = data
$content = $(doc.querySelector('#content'))