I am trying to load WalkScore Map into one of div's on the page. For some reason my code works only if I alert() something right after $.get() method. Have no idea why.
Can someone suggest something? Thanks.
<html>
<head>
<title>jQuery - Ajax dynamic content loading</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadWalkScore()
{
$.get("http://www.walkscore.com/tile/show-tile.php?wsid=567f19156a706dddb8a799630d85467e",null,null,"script");
alert("hello");
}
</script>
<div id="contentArea" style="margin: 20px 0px 10px 10px; border: 1px solid #CCC;">
<script type="text/javascript">
var ws_lat = "40.710318";
var ws_lon = "-74.016553";
var ws_width = "630";
loadWalkScore();
</script>
</div>
Try using something like this, to make the call when the DOM is ready.
<script type="text/javascript">
$(function()
{
$.get("http://www.walkscore.com/tile/show-tile.php?wsid=567f19156a706dddb8a799630d85467e",null,null,"script");
});
</script>
Put this block after your first <script> element.
For me is working. I had to change the wsid for my domain. I've checked the get request using Firebug and I get a javascript as a response. At the begining I was getting an error because I was using you wsid and it seems that for each calling sides they generate a new one. Try to see if your wsid is the correct one.
Related
i am working in DOM i want to run marquee on header through given below library. this is my error below. Please help me out. theres an error of $ which is not defined according code but I have already defined. The marquee is actually not working on Mac Safari browser.
Error:$ is not defined
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://rawgithub.com/aamirafridi/jQuery.Marquee/master/jquery.marquee.min.js"></script>
<div onclick="myfunction()" class="marquee" style="width: 300px; overflow: hidden;">
<script>
function myfunction(){
$('#marquee').marquee();
}
</script>
the library is already included of jquery.
You are calling the <div class='marquee'> element by using a id selector $("#marquee").
Try using $(".marquee") instead.
More info about jQuery selectors
This worked for me with some corrections as said above.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://rawgithub.com/aamirafridi/jQuery.Marquee/master/jquery.marquee.min.js"></script>
<div onclick="myfunction()" class="marquee" style="width: 300px; overflow: hidden;"> hello </div>
<script>
function myfunction() {
alert("marquee");
$('.marquee').marquee();
}
</script>
Check fiddle
When I generate PHP within a file that is asynchronously loaded by jQuery, the text seems to jitter or flicker a little while the animation runs. This does not happen to the regular HTML in the requested file, only the content generated with PHP.
Just want some hints as to what can end the jitter.
Here is the jQuery in the main.php:
$(document).ready(function(){
var demo = $('#demo');
demo.hide();
$("button").click(function(){
demo.load('demo.php', function() {
demo.show('medium');
});
});
});
Here is the HTML and PHP in demo.php:
<p><?php echo "Hello World with PHP trough AJAX"; ?></p>
I’m really unsure where to begin. Should I just avoid using PHP in demo.php alltogether? Even so I'd really like to have to possibility to use PHP in scripts called trough AJAX.
As per request, here is the whole darn thing:
main.php:
<!DOCTYPE html>
<html>
<head>
<title>Testing Ajax</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script>
$(document).ready(function(){
var demo = $('#demo');
demo.hide();
$("button").click(function(){
demo.load('demo.php', function() {
demo.show('medium');
});
});
});
</script>
<style type="text/css">
#demo {background-color: MidnightBlue;color: white;padding: 0.1em 1em 1.5em 1.5em;}
#demo h1 {color: white;}
</style>
</head>
<body>
<section>
<article>
<h1>Ajax</h1>
<hr />
<button>Load External Content</button>
<div id="demo"></div>
</article>
</section>
</body>
</html>
(I like MidnightBlue better than CornflowerBlue...)
demo.php:
<h1>Ajax criex Hello World!</h1>
<p><?php echo "PHP also cries Hello World trough Ajax!"; ?></p>
Technically speaking, there is absolutely no difference between text generated with PHP versus text generated in ASP.net versus text contained in a .txt file versus text caused by typing on your keyboard -- it is all letters and numbers. Indeed, I would go as far to say that, examining text absent other clues, it is completely and 100% impossible to tell how it was created. No, you should not avoid PHP with AJAX.
Any "jittering" that you see is a product of some other issue, most likely related to browser performance - processor availability, free memory, current process memory consumption, extension activity/interference with page content, etc.
I don't know if this will help you. Probably not if the code shown above is really all your code.
But: Some time back I also had a jittering problem in animations when I loaded content via Ajax. The reason was: The loaded content contained Javascript code with other animation commands and then both animations interfered. Maybe this is also the case here.
In my test whilst trying to reproduce the "jitter" your code is producing an infinite ajax loop (View it in Web Console, your see) thats most likely your jitter effect:
Heres a basic PHP and AJAX example:
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest' && $_SERVER['REQUEST_METHOD']=='POST' && isset($_POST['action'])){
$action = $_POST['action'];
switch($action){
case "hello":
echo "Hello World with PHP through AJAX";
break;
case "foobar":
echo "Hello Foobar";
break;
}
die;
}
?>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var action = this.value;
ajaxload('demo',action);
});
});
function ajaxload(placement,action){
$.post("./demo.php", { 'action': action },
function(data) {
$("#"+placement).hide().html(data).fadeIn('slow');
});
}
</script>
<button type="button" value="hello">Hello World</button>
<button type="button" value="foobar">Foobar</button>
<p id="demo"></p>
I am a newby in ajax and php and I would very much appreciate it if you could help me out. Seeing that I only know a little bit javascript and php I really don't know how to remedy this problem could you help me please! I've been hunting down a fix but couldn't find any, hopefully my search will stop here. I'll try my best to be clear in my explanation.
I would like this:
load html page called ducks
to load into the myDiv area an html page called ducks.html.
I would also like that when I click on on this:
load a list of html links
I would like it to load an html page with a list of links that when clicked will load into the myDiv area without reloading the whole page.
And lastly I would like to set up the myphpscript php file. To load a page with a list of links that will appear in the myDiv area and when I click on one of those links it will load likewise into the myDiv area.
This is my code
<!-- This is your PHP script... myphpscript.php -->
<?php
$contentVar = $_POST['contentVar'];
if ($contentVar == "con1") {
include 'con2.html';
} else if ($contentVar == "con2") {
echo "<a href='con2'>View</a>";
} else if ($contentVar == "con3") {
echo "Content for third click is now loaded. Any <strong>HTML</strong> or text you wish.";
}
?>
<!-- This is the rest of my code -->
<html>
<head>
<script type="text/javascript" src="jQuery-1.5.1.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
function swapContent(cv) {
$("#myDiv").html('<img src="loader.gif"/>').show();
var url = "myphpscript.php";
$.post(url, {contentVar: cv} ,function(data) {
$("#myDiv").html(data).show();
});
}
//-->
</script>
<style type="text/css">
#myDiv {
width:200px; height:150px; padding:12px;
border:#666 1px solid; background-color:#FAEEC5;
font-size:18px;
}
</style>
</head>
<body>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con1');">Content1</a>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con2');">Content2</a>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con3');">Content3</a>
<div id="myDiv">My default content for this page element when the page initially loads</div>
</body>
</html>
It sounds to me that if you want an external page to load when something is clicked, you need to perform an ajax GET or POST request, then print the results to the div:
http://api.jquery.com/jQuery.post/
If you just want to change the contents of the div to some other text, you can use something like jQuery.html: http://api.jquery.com/html/
<script>
$("#idForLink").click(function () {
var htmlStr = "The new text to show";
$('#myDiv').text(htmlStr);
});
</script>
Without using jQuery, your example above is sending self posts to echo contentVar which will always refresh the page.
See this fiddle for a jquery+css solution to your problem [NO PHP REQUIRED]: http://jsfiddle.net/bYNeg/
If you are simply grabbing HTML from another file I would use the load method, as its quick and easy:
$(document).ready(function(){
$('#myDiv').load("someFile.html");
});
For more extensive requests you can use Post and Get. They allow you to pass data with the URL request in order to affect the results that are returned. Obviously your requested URL would need to be PHP/ASP and handle the request in this case.
JAVASCRIPT:
<script type="text/javascript">
$(document).ready(function(){
// this is your mouse event (click) listener
$('.destination_div').on('click','a',function() {
var url = $(this).attr("href");
$('.destination_div').load(url);
return false;
});
});
</script>
Make your HTML anchors simple, do not include inline javascript, because the on("click") handles it already.
HTML:
Your HTML with links
I'm tring to use DHTMLX combobox, I guess I included in my code all that I need, find code snippet below:
<script>
window.dhx_globalImgPath = "/resources/javascript/codebase/imgs/";
</script>
<link rel="STYLESHEET" type="text/css"
href="/resources/javascript/codebase/dhtmlxcombo.css">
<script src="/resources/javascript/codebase/dhtmlxcommon.js"></script>
<script src="/resources/javascript/codebase/dhtmlxcombo.js"></script>
<script>
function doOnLoad() {
var z = new dhtmlXCombo("combo_zone", "alfa", 200);
z.enableFilteringMode(true, "php/loadCombo.php", true, true);
}
</script>
<div id="combo_zone" style="width: 200px; height: 30px;"></div>
Anyone can tell me if there is something wrong in my code?
Thnaks in advance
Code wrapped in onLoad which seems never triggered, just change code as
<div id="combo_zone" style="width: 200px; height: 30px;"></div>
<script>
var z = new dhtmlXCombo("combo_zone", "alfa", 200);
z.enableFilteringMode(true, "php/loadCombo.php", true, true);
</script>
I have a page (page1.php) where I am using a select box to load in another page (page2.php) into a DIV. Inside page2.php there is a UL that loads data from a database (via PHP) into LIs and the are sortable.
My problem is, when I load page2.php by itself, it serializes fine. However, when page2.php is loaded via .load() into page1.php, it doesn't serialize at all and I get undefined.
Here is the important code, again this works fine by itself, but not when this page is loaded in via the .load() function
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<style>
#thelist { list-style-type: none; margin: 0; padding: 0; width:700px; }
#thelist li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 200px; height: 150px; }
</style>
<ul id="thelist">
<li style="margin-bottom:5px;" name='listItem_1' id='listItem_1'>
test1
</li>
<li style="margin-bottom:5px;" name='listItem_2' id='listItem_2'>
test2
</li>
<script type="text/javascript">
$(function() {
$("#thelist").sortable({
update : function () {
var order = $('#thelist').sortable('serialize');
alert(order); // This alerts "undefined" when page2.php is loaded into page1.php via .load();
$("#info").load("reorder_slides.php?"+order);
}});
});
</script>
This is the new code I am running, still to no avail.
<script>
$('#edit_service_date').change(function() {
// $(this).val()
$('#editService').slideUp("slow",function(){
$('#thelist').load('page2.php', {id: $('#edit_service_date').val()}, function(){
$("#thelist").sortable({
update : function () {
var order = $('#thelist').sortable('serialize');
alert(order); // This alerts "undefined" when page2.php is loaded into page1.php via .load();
$("#info").load("reorder_slides.php?"+order);
}});
if($('#edit_service_date').val()!="none"){
$('#editService').slideDown("slow");
}
});
});
});
</script>
If everything you posted above is being brought into another page via .load(), then I see (at least) two problems:
You're loading jQuery and jQuery UI twice: once in the outer page, and once in the inner page loaded via ajax. There's no need.
You're expecting $(function(){}) to fire after being loaded into the "inner" page within the div. $(function(){}) is a synonym for $(document).ready( function(){} ), and in fact the ready event has already fired (when the outer page DOM became ready). It won't do anything here.
You should try triggering the .sortable() stuff inside the callback of the .load() you're using to bring the inner document into the div:
/* on page1.php */
$('#yourdiv').load( 'page2.php', function(){
$('#thelist').sortable( /* arguments */ );
});