We help IT Professionals succeed at work.

AJAX

12K

Solutions

7K

Contributors

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.

Right now I have a test-functions.php page that contains a function that downloads a text file from an URL using PHP CURL. This curl call uses  CURLOPT_PROGRESSFUNCTION to call a function I made that writes progress to a text file. It does this by writing each number 1 to 100 with a new line for each entry (I have attached all the files below). What i now need help doing is modifying my javascript function on test.php to read the last line of the file, update at least every second (less time between updates would be great as well), and echo that line to the page. I then need it to stop when the value reaches 100 and display some new text.
test.php
test-functions.php
progress.txt
0
Hello,

I'm trying to find a way to obtain a subset array from the passed POST array in a php function.  Right now my html form has one input into which a number is typed.  Based on that value a number of checkboxes will appear after it.  What would be the best way to obtain the array of checkbox values from the POST?  I am submitting the form using AJAX and .serializeArray() for the form.  Would it be best just to copy the array, trimming out the first entry, which is the first input value?  So if the POST was: input=4 cb1=1 cb2=0 cb3=0 cb4=1, just create a separate array starting at index 1?  If anyone has any ideas or opinions please let me know.
Thanks,
0
Hi folks, I'm loading several values from a search and depending on the amount of results it should show a certain number of circles each with the value retrieved inside it.
Like if the person searched for the name "mark" it should show a circle with the name "mark" inside the circle and when the user clicked on the circle it should "call" into a server side script which will return certain values, like "mike", "edward" and "marcia". Each of these should be inside a circle linked to the first circle, but the most important when one clicked on one of these other names it would call a server side script passing the value inside as a variable.
I've got a link to show how it is at the moment:

LINK

Right now the server side is shown bellow:
<?php

$return = array(
	1,2,3,4,5,6);
die(json_encode($return));

?>

Open in new window


File worked with a lot of help from folks in here:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Test</title>
<style type="text/css">
#circle-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  border: 0px solid green;
}
.circle {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: grey;
  left: 230px;
  top: 230px;
  z-index: 1;
}
#circle {
  z-index: 2000;
}
.blue {
  background: black;
}
.green {
  background: black;
}
.yellow {
  background: black;
}

Open in new window

0
Hi Guys,

I have some jquery code in mvc application:

$('#po_type').change(function () {
if ($(this).val() == 3) {
var chx = $('#Vendor_to option:selected').val() == 14;
$('#Vendor_to').val() == chx;
}
 });              

Open in new window


what I would like to do is when I check "po_type" dropdown to 3 so the dropdownlist "vendor_to" change to vendor id to number 14 or to the vendor name. whatever work its k.


please help.
0
I am using the Skitter Slider: http://www.skitter-slider.net

However I can't seem to change the image fade in and out time.

http://www.skitter-slider.net/documentation

I thought it would be the "velocity" option, but nothing changes when changed.

I have also gone into the code and changed the below settings:

// Interval animation hover elements hideTools 
		interval_in_elements:	200, 

		// Interval animation out elements hideTools
		interval_out_elements:	300, 

Open in new window


but this doesn't seem to do anything either.

Any idea what I need to do?
0
Hi,

I got this jQuery/Ajax:

<script>

	$(document).ready(function() {
		$('#mount_tube_button').click(function(){
			$.ajax({
			
				url: 'conf_overview_handler.php',
				type: 'post',
				data: {'<?php echo $input_name; ?>':$('input[name=<?php echo $input_name; ?>]:checked').val()},
				success: function(msg){
					$('#mount_<?php echo $location; ?>_AJAX').html(msg);
				}
			
			}); // Ajax call
		}); //event handler
	}); //document.ready

</script>

Open in new window


How can I add this to it:
$( "#toggle_rod" ).slideUp( "slow" );

Open in new window


I have tried this, but it does not work:
<script>

	$(document).ready(function() {
		$('#mount_tube_button').click(function(){
			$.ajax({
			
				url: 'conf_overview_handler.php',
				type: 'post',
				data: {'<?php echo $input_name; ?>':$('input[name=<?php echo $input_name; ?>]:checked').val()},
				success: function(msg){
					$('#mount_<?php echo $location; ?>_AJAX').html(msg);
					$( "#toggle_rod" ).slideUp( "slow" );
				}
			
			}); // Ajax call
		}); //event handler
	}); //document.ready

</script>

Open in new window

0
I'm not sure why but the following code works great in Chrome, but the alerts don't show up at all in Firefox.  Any ideas?

<form id="add-team-member" role="form" method="post" action="#" enctype="multipart/form-data" onsubmit="checkUser()">
                        <div class="form-group">
                            <input type="text" class="form-control" id="email" name="email" placeholder="Email" required>
                        </div>
                        <input type="hidden" value="11" name="submittype"/>
                        <input type="hidden" value="<?php echo $user_id;?>" name="userid"/>
                        <input type="hidden" value="<?php echo $org_id;?>" name="org_id"/>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" id="submit" class="btn btn-primary">Save changes</button>
                        </div>
                    </form>

Open in new window


<script>
            function checkUser() {

                var data = "username="+$("#email").val();
                console.log(data);
                $.ajax({
                    type: 'POST',
                    url: 'check_username.php',
                    data: data,
                    dataType: 'json',
                    success: function(r)
                    {
                        if(r=="0")
                        {
                            //Exists
                            alert('This user is already a memeber of the account.');
                        }else{
                            //Doesn't exist
                            alert('Invite Sent!');
                        }
                    }
                });
            };
    </script>

Open in new window

0
I have coded AJAX a number of times, and usually find the coding of the AJAX endpoint to be the most work intensive. That being said, it is also the easiest for me, since I am mainly a back-end developer.

When it comes to integrating that AJAX endpoint into the page, I can also pretty easily configure the URL, and include the param which the AJAX endpoint expects. But there are other params which get tricky on the Javascript end.

I see how to write call-backs for things like "success", "failure", etc. What list contains all the possible AJAX call-backs?

But aren't there other params which must get set? Please explain those to me a bit. And what does jQuery's AJAX call bring to the table?

Thank.
0
I do most of my work in PHP and do most of my debugging by doing "screen dumps" to see what is being passed, etc.

But when I move into the world of jQuery and "client side" operations (like aJax calls) I'm a little lost as to how to do debugging.

Maybe I'm not doing the PHP debugging correctly, but no matter what I needed a better way to find errors in my jQuery ajax calls.

I am using a PC running windows 8.1 and my scripts are on a LAMP server.

I use Chrome, Internet Explorer or Firefox as my browsers.
0
I have a very simply web page that is extremely long.  It has a little under 4 million characters.  It's nothing but very simply html with about 300 images interspersed throughout.

The problem is that it takes forever to load -- maybe 10 minutes or more -- and it overtaxes the browser while loading.

Is there a way -- I'm thinking some flavor of JavaScript -- to resolve this?  I've found a couple of "lazy load" scripts, but they either apply only to the images, or else they require the page content to be dived up into sections that will load as each section appears in the browser's view port.  I'm looking for a solution that won't require much or anything in the way of modifying the html, of which there are nearly 85,000 lines of code.

Thanks!

Regards,
Jon
0
Question 1: I put ../RestService/QuoteService/GetModelList(066,315217) and it return data.
And I want to know how to write jquery code instead of just call on URL. Can you show me?

Question 2: the output return below: How can i bind e.g. ModelNo in html <select></select> and <asp:dropdown></asp> In code behind c#.net?

Thanks

{"PackageKey":null,"PackageNo":1,"TotalPackages":1,"Status":"Ok","Data":
"[
{\"ModelNo\":\"A20dsfasdM-SD\",\"ModelName\":\"20X FUJINON LENS 2/3\",\"NetPrice\":0.0,\"ListPrice\":2965.0,\"AMD\":2315.0},{\"ModelNo\":\"AA-FP790G\",\"ModelName\":\"12VDC POWER SUPPLY\",\"NetPrice\":0.0,\"ListPrice\":103.4,\"AMD\":107.0},

{\"ModelNo\":\"AAasdfasd0U\",\"ModelName\":\"AC ADAPTOR/BAT CHGR\",\"NetPrice\":0.0,\"ListPrice\":262.53,\"AMD\":391.0}
]"}
0
I have the following code that is executing on page load.  I thought my function says that it should on execute when the slider is moved/changed?

<script>
                                $(".slider").on("slidechange", function() {
                                    $('#insights-span').load('includes/rtr-insights.php?id=<?php echo $_SESSION['type'];?>&loggedin=<?php echo $loggedin;?>&budgetid=<?php echo $_SESSION["budget"];?>&time='+$(".slider").slider("value"));
                                    $('#rtr-return').load('includes/rtr-return.php?id=1&time='+$(".slider").slider("value"));
                                })
                            </script>

Open in new window

0
I need to pass the user id to my pop window to use in my sql statement.  The page lists users' information with three icons on the page.  Once the icon is clicked, they open up a pop up window using jquery.  Each window executes a SQL statement to produce the data.  I need to pass the userid to these sql statements when they are clicked.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>:: Home ::</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/style.css" rel="stylesheet" type="text/css">

</head>

<body>
<?php
   $_SESSION['groupId'] = $_GET["group"];
#database connection via DSN
	include('dbconn.php');
  
   
   $sqlStudentName = "Select wshortname, wlastname, wfirstname, wusername, wgroup_id, wuser_id from Table where wgroup_id = {$_SESSION['groupId']} ";


			$rsStudentName  = odbc_exec($conn, $sqlStudentName);

			if (!$rsStudentName) {
			    echo $sqlStudentName;
          echo odbc_errormsg();
			    exit();
			}
      
    
/*      
     
      
     
      
      
      */
  
?>
<form id="cfpPanel" method="get" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="admin-panel">
	<h2>ADMIN PANEL</h2>
	<div class="search-panel"> <div class="seacrh-main"> <button class="search-btn"> <img src="images/magnifying_glass.png" alt="button"> 

Open in new window

0
Hi Experts,

I am playing with HTML5 and javascript. I can find a very complete list of events in HTML5 elements (http://www.w3schools.com/tags/ref_eventattributes.asp). However, when I try to find out what these events can do, I found that it should be helpful if I have reference documents for the event handler arguments.

For example, if doMouseDown(event) function is the event handler of the mouse-down event of an element, then the event parameter should have pageX and pageY properties accessible in the handler.

Is there such a reference document? Where can I get it?
Thank you!
0
Hi Experts,

See the following code.  Basically on mouse over and out events the div name is passed to this function. I just for an example made variables but actually they are passed in parameter to the javascript function.
The below code works fine, the id of element is replaced with new one and this new id has different style (image) so it works fine. Now I moved this login into Ajax and at run time it is called. So some time mouse over is in process then mouse out is called and at some point when code tries to get the id of element, it gets null, i think one ajax call is in process where second has called.
My thinking is .. if I change this code to change the css class  instead of replacing to id, it will work. In this case there is always be id. but only issue is may be one ajax call is updating it while other will try to find it.

So my issue is:
1. how to change this code so that instead of id, it should change the class of fixed id.
2. is there any way that I can restict that unless on ajax function call is not complete do not call the other.
All mouse events call same function of a javascirpt for ajax call with different parameters.
Please note that I had just submitted partial code, in actually these divs elements (with image backgrounds ) are in large quantity.

#page-sidediv{ vertical-align: middle;display: inline-block;background:url(../images/side.jpg) 0 -984px; width: 20px; height: 20px; }
#page-topdiv{ vertical-align: middle;display: …
0
Hi,

I'm setting the value of a <DIV> using Javascript. Once the value is set, I would like to retrieve it. But when I try using this code all I get is "undefined" in my alert. Could someone help me out here?
Thanks!
Mike
 

var value=500
document.getElementById('aoy_cost').innerHTML = value;
var actor_cost = document.getElementById('aoy_cost').value;
alert(actor_cost);
0
Hi Experts,

I have one string S that can be say, 200 characters long.   I have 10000 other strings that I want to see if they are in S.

My solution needs to work on IE9, IE10, IE11, Firefox and chrome.  I would preferably not like to use one method on one browser and another method for special case browsers that don't support functions.

What can I use to optimize this?

Thanks a lot!
Mike
0
How does a person dynamically load jQuery UI (like a tab control for example) controls with data and vice versa upload data from them? Is this a good way to use these kinds of controls? Examples and links to examples and or literature about the ideology or methodology behind this would all be helpful.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>

Open in new window

0
Hi Experts,

I have a gridview with two dropdownlists - DDLotStartEdit & DDLotEndEdit. These are populated programmatically - with a bit of a fiddle to get the selected time showing as the selected value in each:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            if ((e.Row.RowState & DataControlRowState.Edit) > 0)
            {
                Label durationLBL = (Label)e.Row.FindControl("lblDuration") as Label;
                Label lblstart = (Label)e.Row.FindControl("lblStart");
                Label lblend = (Label)e.Row.FindControl("lblEnd");
                DropDownList ddList = (DropDownList)e.Row.FindControl("DDLotStartEdit");
                DropDownList ddList2 = (DropDownList)e.Row.FindControl("DDLotEndEdit");
                ddList.Items.Add("--select a time--");
                ddList2.Items.Add("--select a time--");
                List<string> times = new List<string>();
                for (int hour = 0; hour < 24; hour++)
                    for (int minute = 0; minute < 60; minute++)
                        if (minute % 15 == 0)
                            times.Add(string.Format("{0:00}:{1:00}", hour, minute));

                foreach (string child in times)
                {

                    ddList.Items.Add(child);
                    ddList2.Items.Add(child);

                }

                ddList.SelectedValue = 

Open in new window

0
Experts,

I am trying to POST form data (several text fields and a file) via AJAX using the following code:
//POST FORM DATA AND SHOW SUCCESS MESSAGE
$.post("save.php?submit",
	$("#new_request_form").serialize()).done(
		//ALERT USER THAT PROJECT HAS BEEN SAVED
		function(){
			alert('Your request has been submitted for consideration.\n\nPlease check your Lotus Notes inbox for a copy of your submission.\n\nPress "OK" to continue.');
		},//END FUNCTION
		//REDIRECT
		function(){
			document.location.href = "demo.php";
		}//END FUCTION
);

Open in new window

All of my form data posts correctly except the File field. I've read that this may have to do with the serialization of the data as it is being passed.

Can someone help me update my code so that it posts the File field that I have in my form?

Cheers!
0
I have the following Function in my datacontext of an Angular app. It is being called from the Controller but returns before the array 'alarms' is populated. I need to find a way to return the array on completion but if I move my return into the success function I get an error.

This code in my controller:
function activate() {
            var promises = [getMessageCount(),getAlarms()];
            common.activateController(promises, controllerId)
                .then(function () { log('Activated Dashboard View'); });
        }

        function getMessageCount() {
            return datacontext.getMessageCount().then(function (data) {
                return vm.messageCount = data;
            });
        }

        function getAlarms() {
            return datacontext.getAlarms().then(function (data) {
                log("Return Array count: "+data.length);
                return vm.alarms = data;
            });
        }

Open in new window


Is calling this function in my datacontext but the log output in the controller code above return a length of 0 before the log in the datacontext return a length of 9 as it is happening async.

function getAlarms(){
            
            log("Getting Alarms");
            $.ajax("/enteliweb/wsalarm/active", {
                    data: {
                        dbQuery: "{}",
                        filterIds: "[]",
                        filterQuery: JSON.stringify(alarmQuery),
                        query: "",
           

Open in new window

0
How would I select the data-value in jQuery from:

<span class="ui-slider-label" data-value="0">-1week</span>

Open in new window


http://jsfiddle.net/zs5dud2t/
0
I found this great javascript which almost does exactly what I want, it fades text in and out. The only issue is that it is random, I would like it to be ordered. I can't figure how how to modify it.

http://codepen.io/dpskvn/pen/KEcwv/

var quotes = [
  "This is a quote.",
  "So is this.",
  "And another one.",
  "My god, it's full of stars!"
]

function fadeInAndOut(divID, quotes, interval) {
  setInterval(function () {
    $(divID).fadeOut('slow', function() {
      $(this).text(quotes[Math.floor(Math.random() * quotes.length)]);
      $(this).fadeIn('slow');
    });
  }, interval);
}

fadeInAndOut('#quotes', quotes, 3000);

<div id="quotes">A quote.</div>

Open in new window

0
How can I select the data-value with a jquery selector?  I want to set that value in the &time= .  I've set it a 0 statically now for testing.

My jQuery:
$(".slider").on("slidechange", function() {
                                            $('#mix-detail-insights').load('mixdetail_insights.php?id=<?php echo $_SESSION['type'];?>&budgetid=<?php echo $_SESSION["budget"];?>&time=0');
                                        })

Open in new window


HTML:
<div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all ui-slider-pips" style="margin-bottom:55px;margin-top:15px;margin-left:10px;width:90%;"><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span><span class="ui-slider-pip ui-slider-pip-first ui-slider-pip-label ui-slider-pip-0 ui-slider-pip-selected" style="left: 0%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="0">-1week</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-1" style="left: 33.3333%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="1">-1day</span></span><span class="ui-slider-pip ui-slider-pip-label ui-slider-pip-2" style="left: 66.6667%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="2">-6hrs</span></span><span class="ui-slider-pip ui-slider-pip-last ui-slider-pip-label ui-slider-pip-3" style="left: 100%"><span class="ui-slider-line"></span><span class="ui-slider-label" data-value="3">Now</span></span></div>

Open in new window

0
Hello all,

I have a form that has a Generic list within it.   It seems to always pass to the post as null.  Any idea why or is there a property I need to set for the Ajax post?   The single string type values all pass fine.
0

AJAX

12K

Solutions

7K

Contributors

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.

Top Experts In
AJAX
<
Monthly
>