I have this AJAX GET:
function edit(str){
ajax.onreadystatechange=function()
{
if (ajax.readyState==4 && ajax.status==200)
{
document.getElementById("editaircraftdialog").innerHTML=ajax.responseText;
$("#editaircraftdialog").dialog('open');
$("#loadingdialog").dialog('close');
}
}
ajax.open("GET","./edit_aircraft.php?icao="+str,true);
ajax.send();
$("#loadingdialog").dialog('open');
}
The JQuery code in edit_aircraft.php does not work. Here's an example:
<script>
$(function() {
$("#insertaircraft")
.button()
.click(function(event) {
});
});
</script>
I have had the same problem in the past and I cannot fix it.
You can not load JavaScript with innerHTML. It does not get evaluated.
Use jQuery to your advantage
function edit(str){
var loading = $("#loadingdialog").dialog('open');
var aircraft = $("#editaircraftdialog");
aircraft.load("./edit_aircraft.php?icao="+str, function(){
loading.dialog('close');
aircraft.dialog('open');
});
}
Related
How to send an HTTP GET request to a page and get a result back:
This is a piece of code using jquery pagination..I think there is a mistake in my code is to call $.get() on a jquery method.
if(isset($_GET['pages'])) {
$pages = $_GET['pages'];
$i = ($pages - 1) * $num_pages + 1;
.....
<?php echo ''.$i.'' ?>
this Jquery code:
//JQuery
(function($) {
$(document).ready(function(e) {
var main = "data_students.php";
$("#data-students").load(main);
// when the button page is pressed
$('.pages').live("click", function(event){
kd_page = this.id;
$.get(main, {pages: kd_page} ,function(data) {
$("#data-students").html(data).show();
});
});
});
}) (jQuery);
$.get("page.php?vars=values&othervar=othervalue",function(data) {
$("#data-students").html(data).show();
});
You can try this
//send as much paramerters as you wish in $.get(url,data,callback);
$.get("page.php",{vars:values,othervar:othervalue},function(data) {
$("#data-students").html(data).show();
});
I have a php page with jQuery, with range sliders.
When the sliders are changed the jQuery code sums the values.
I also want this code to be fired when the page is loaded. But it doesn't happen when I trigger the function inside $(window).load(function() {}); or directly in $(document).ready(function() {});.
Here's the jQuery code:
$(document).ready(function() {
$(window).load(function() {
countSilders();
});
function countSliders(){
var SliderValue = parseInt($("#slider0").val())+parseInt($("#slider1").val())+parseInt($("#slider2").val());
if (SliderValue==10)
$("#submit_next").button("enable");
else
$("#submit_next").button("disable");
$("#lblsum_scores").text(SliderValue+"/10");
}
$(document).on("change","#sliders", function(){
countSliders();
});
});
Try this:
// First define your function
function countSliders() {
var SliderValue = parseInt($("#slider0").val()) + parseInt($("#slider1").val()) + parseInt($("#slider2").val());
if (SliderValue == 10) $("#submit_next").button("enable");
else $("#submit_next").button("disable");
$("#lblsum_scores").text(SliderValue + "/10");
}
// Run on ready, don't use ready and then on load, that will never happen
// And i changed the on() to change()
$(document).ready(function(){
countSilders();
$("#sliders").change(function(){
countSliders();
});
});
You should be able to do:
function countSliders(){
...
}
$(document).ready(function() {
countSilders(); // fire it on load
// bind it to sliders
$(document).on("change","#sliders", function(){
countSliders();
});
});
i have an select option on my page & to load syslogout.php according to selected option i wrote this code :
echo '<script type="text/javascript">$("#divSys").mouseup(function() {
var open = $(this).data("isopen");
if(open) {
window.location="sysLogout.php?sysid="+document.getElementById("divSys").value;
}
$(this).data("isopen", !open); });
</script>';
it's work fine. but this code :
<script type="text/javascript">$("#divSys").mouseup(function() {
var open = $(this).data("isopen");
if(open) {
window.location="sysLogout.php?sysid="+document.getElementById("divSys").value;
}
$(this).data("isopen", !open); });
</script>
it isn't work and return value for sysid is fix (1 or 2 for instance) for all option.
why?
Wrap your code in $(document).ready(). This should resolve your issue:
<script type="text/javascript">
$(document).ready(function () {
$("#divSys").mouseup(function() {
var open = $(this).data("isopen");
if(open) {
window.location="sysLogout.php?sysid="+document.getElementById("divSys").value;
}
$(this).data("isopen", !open);
});
});
</script>
Try this:
<script type="text/javascript">
$(document).ready(function () {
$("#divSys").mouseup(function() {
var open = $(this).data("isopen");
if(open) {
window.location="sysLogout.php?sysid="+$(this).val();
}
$(this).data("isopen", !open);
});
});
</script>
I have a div:
<div id="test" style="width:auto; height:auto;">
</div>
And a function:
$(function() {
$("#test").attr("contentEditable", "true");
$("#test")
.attr("tabindex", "0")
.keydown(function(){ alert(1); return false; })
.mousemove(function(){ alert(2); return false; });
});
How can I implement this code in JavaScript without including the JQuery library?
You can do it like this in javascript without using jquery, Demo available here JsFiddle
You can put it in onload method of body then it will call onload of body or just put it in script section below all controls without putting it in function then it will call when document is ready like jquery method $().ready();
var test = document.getElementById('test');
test.setAttribute("contentEditable", "true");
test.setAttribute("tabindex", "0");
test.onkeydown = function(event) { alert("KeyDown");}
test.onmousemove = function(event) { alert("MouseMove");}
function runme() {
var elm = document.getElementById("test");
elm.contentEditable = "true";
elm.tabIndex = 0;
elm.onkeydown = function() { alert(1); return false; };
elm.onmousemove = function() { alert(2); return false; };
}
if(window.addEventListener)
window.addEventListener("load", runme, false);
else
window.attachEvent("onload", runme);
Adil has the right idea, but to improve upon it a bit, you could store the element in a variable so you do not have to make a call to get the element every time. So I would change it to look something like this:
var t = document.getElementById('test');
t.setAttribute("contentEditable", "true");
t.setAttribute("tabindex", "0");
t.onkeydown = function(event) { alert("KeyDown");}
t.onmousemove = function(event) { alert("MouseMove");}
Upvoted Adil for beating me to it and for providing the jsfiddle link :)
updated: nevermind, since you just updated your post
I just get the parameters from PHP GET method and use them using jQuery. There is no output when run the page.
<?php
if (isset($_GET['url'])){
$url = $_GET['url'];
$url = explode(" " , $url);
echo end($url);
exit;
}
?>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$('input[type=text]').change(function (){
if ($(this).val() !== ''){
var url = $(this).val():
$.post('grab.php?url='+url+'', function (data){
window.open(data, 'Download', 'width=10,height=10');
$(this).html('');
});
}
});
</script>
</head>
<body>
<input type="text" style="width:100%;height:20px;"/>
</body>
</html>
I'm new to designs and hope mistake is there.
First of all put your document in standards mode (by using a proper doctype at the beginning, which means HTML 4/XHTML 1 strict or HTML 5). Then you can use error console for debugging.
I found following error
Unexpected token: ':' on line 7,
The colon should be a semicolon.
var url = $(this).val():
And then, the actual reason why nothing is happening is because the input is non-existent when the script is invoked/cached. You need to execute it after the DOM has been constructed.
$(document).ready(function() {
// content
});
Final code.
$(document).ready(function() {
$('input[type=text]').change(function (){
if ($(this).val() !== ''){
var url = $(this).val();
$.post('grab.php?url='+url+'', function (data){
window.open(data, 'Download', 'width=10,height=10');
$(this).html('');
});
}
});
});
put it in $(document).ready() like this:
$(document).ready(function() {
$('input[type=text]').change(function (){
if ($(this).val() !== ''){
var url = $(this).val():
$.post('grab.php?url='+url+'', function (data){
window.open(data, 'Download', 'width=10,height=10');
$(this).html('');
});
}
});
});
I think using a .change event on a text input isn't advisable. Usually .blur and .focus are more appropriate.
$(document).ready(function() {
$('input[type=text]').blur(function(){
var currentInput = this;
if ($(currentInput ).val() != ''){
var url = $(currentInput ).val();
$.post('grab.php?url='+url, function(data){
window.open(data, 'Download', 'width=10,height=10');
$(currentInput).val('');
});
}
});
});