We Keep Coding

php 5.5 to 5.6 Breaks jQuery

I'm trying to update an old program someone else wrote that runs on php 5.5.38. I prefer to upgrade the old program because it's a highly customized eCommerce program with features/functions not normally found in eCommerce software. My goal is to get to php 7 then php 8.
When changing to php 5.6.40, some jQuery code no longer works. Not all broke but some did.
I see no server errors.
Here is one issue. When you click the tag, a popup window with a form should appear.
php 5.6 won't show the popup window.
The "alert" shows up, but the popup window doesn't.
<script type = "text/javascript">
//<![CDATA[
jQuery(document).ready(function () {
jQuery('#emailsomeone').click(function () {
alert("I am here");
return ajaxPopUpURL({
'divtitle': 'Email a Friend',
'divid': 'emailsomeone',
'app': 'ecom',
'ns': 'emailsomeone',
'ref': 'thispage'
});
});
...
and the html ...
<a id="emailsomeone" href="https://example.com/thepage.html">Email someone</a>
It uses
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
I tried upgrading jQuery to this and it doesn't help. (There were some console errors for other code, but none appeared to be from this code.).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
Here's the ajaxPopUpURL
function ajaxPopUpURL(params) {
// Check to see if the required params are defined. If not, exit.
if (!params.app || !params.ns || !params.divid || !params.divtitle || jQuery('#' + params.divid).length == 0) {
return false;
}
// Reset window timeout.
if (window.mytimeout) {window.clearTimeout(window.mytimeout);}
// Hide any popup we might have launched already.
if (jQuery('#' + params.divid).data('qtip')) {
jQuery('#' + params.divid).qtip('hide');
} // end if
// Get our params into a form object and issue the request.
var formobj = new Object();
formobj.object = {};
jQuery.each(params, function(key,value) {
formobj.object[key] = value;
});
params.ajax_request = {'ajaxPopUpURL': formobj.object};
postAJAX({'callback': 'ajaxPopUpURLResult', 'callbackparams': params, 'async': true});
return false;
} // end ajaxPopUpURL
Here is postAJAX
function postAJAX(params) {
// Submit AJAX to the system.
if (!params.callback || !params.callbackparams) {return false;}
// Post the info and return the result to the callback function.
jQuery.ajax({'type': 'POST',
'url': thisURL,
'data': {'app': 'core', 'ns': 'ajaxrequest', 'sid': thisSID, 'ajax': 1, 'ajax_request': jQuery.toJSON(params.callbackparams.ajax_request)},
'success': function(data) {params.callbackparams.ajax_response = data; window[params.callback](params.callbackparams);},
'error': function(data) {params.callbackparams.ajax_response = 'ERROR: Failed jQuery ajax request.'; window[params.callback](params.callbackparams);},
'dataType': 'text',
'async': params.async,
'cache': false});
} // End postAJAX
Thank you. Any help would be great.

ANSWER: Replaced outdated PEAR with json_decode or json_encode.
Thank you Barmar:)

Know the exact path of error

I am working on a site built with Code Igniter. It is showing a script error in the console but not the path.
I am having more than 100 files which consists of small or big scripts. Now how I am able to know from which file the error is coming from?
Anyone aware from any tool or any easy method I can try with my site?
Here is my site for reference.

There is error in your ajax , function name as login , In your success response there is missing closing bracket.
Replace code as following :
function login(){
//alert("hhh");
var name = $('#name').val();
// alert(name);
var password = $('#logpassword').val();
//alert(password);
if(name.trim() == '' ){
$('#errorname').html('<span style="color:red;">Please Enter Your Name.</p>');
$('#inputName').focus();
return false;
}else if(password.trim() == '' ){
$('#errorpassword').html('<span style="color:red;">Please Enter Your Password.</p>');
$('#password').focus();
return false;
}else{
$.ajax({
type:'POST',
url:'http://www.edushikshaguide.com/frontend/system_login',
data:{name:name,password:password},
beforeSend: function () {
$('.submitBtn').attr("disabled","disabled");
$('.modal-body').css('opacity', '.5');
},
success:function(data){
console.log('success');
}
});
}
}
}

In any decent browser you just need to click:
Error here is in line 346, column 9, highlighted for your convenience:
In any case, browser-based JavaScript is a client-side language. Neither PHP nor CodeIgniter have anything to do with it unless you use either to generate JavaScript code dynamically.

js file cant use jquery

I have a weird bug where I include this files in my section
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/barScriptOOP.js"></script>
in the barScriptOOP.js I have this
function position_bar(){
//global variable
this.sizes = Array();
}
//class methods => getData (from xml file), draw(draws the bar )
position_bar.prototype ={
getData: function(is_load){
var xmlData = Array();
$.ajax({
type: "GET",
url: "Bar.xml",
dataType: "xml",
context: this,
success: function(xml) {
//extracting new data - some code here
xmldata = "blabla";
this.draw(is_load, xmlData);
}
})//end ajax
},
//other functions
when I use this script, I get a '$.ajax is not a function' error.
1. I tried editing out this.draw(is_load, xmlData); and it didn't errored me.
my programs rpeatly calls the getData function.
note: I also get a '$.browser is undefined' error which is in the other function(this is the first error I get).
meaning ==> the going to another function unables jquery.
any idead what is going on here?

Instead of using $ as your jquery reference, try putting this line at the start of your script
var $j = jQuery.noConflict();
$j(function() {
alert('doc ready');
});
(also, it's strange that your script tag doesn't have a type attribute set, though I doubt that's the issue)

Loading JSON into JavaScript variable locally without server-side script?

I have 41 JSON objects, each with the same scheme.
These objects are fairly large, and so I would like to load the object conditionally into a JavaScript script, when selecting an <option> from a <select> menu with an id of myPicker.
So far, I have set up jQuery to handle changes on the <select>:
$('#myPicker').change(function() {
alert('Value change to ' + $(this).attr('value'));
$('#container').empty();
init();
});
The function init() draws stuff in div called container.
When I change myPicker, I want init() to behave like init(value), which in turn tells init to load one of 41 JSON objects from a file (based on value).
Is loading a chunk of JSON from a file (located on the server-side) doable in this case, or do I need to use a server-side script handling Ajax form submissions and responses, etc.?
EDIT
I wrote the following code:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('#cellTypePicker').change(function() {
alert('Value change to ' + $(this).attr('value'));
$('#container').empty();
initFromPicker($(this).attr('value'));
});
});
function initFromPicker(name) {
// pick default cell type from picker, if name is undefined
if (typeof name === "undefined")
name = 'AG10803-DS12374';
var jsonUrl = "file://foo/bar/results/json/" + name + ".json";
alert(jsonUrl);
$.ajax({
url: jsonUrl,
dataType: 'json',
success: function(response){
alert("Success!");
},
error: function(xhr, textStatus, errorThrown){
alert("Error: " + textStatus + " | " + errorThrown + " | " + xhr);
}
});
init(); // refills container...
}
</script>
<body onload="initFromPicker();">
...
The line alert("Success!"); never gets called.
Instead, I get the following error:
Error: error | Error: NETWORK_ERR: XMLHttpRequest Exception 101 | [object Object]
I am checking the value jsonUrl and it appears to be a proper URL. The file that it points to is present and I have permissions to access it (it is sitting in my home folder). Is there something I am still missing?

Let me make sure I understand your question. I think you want to:
have a handful of files out there that contain JSON objects
depending on which option is selected a particular file is loaded
the contents of the file is JSON and
you want to be able to use the JSON object later on in other javascript
If this is the case then you would just need to do something like:
$('#myPicker').change(function() {
$('#container').empty();
init($(this).val());
});
function init(jsonUrl){
$.ajax({
url: jsonUrl
dataType: 'json'
success: function(response){
// response should be automagically parsed into a JSON object
// now you can just access the properties using dot notation:
$('#container').html('<h1>' + response.property + '</h1>');
}
});
}
EDIT: Exception 101 means the requester has asked the server to switch protocols and the server is acknowledging that it will do so[1]. I think since you're using file://foo/bar/... you might need to toggle the isLocal flag for the $.ajax function [2], but honestly, I'm not sure.
[1] http://en.wikipedia.org/wiki/Http_status_codes#1xx_Informational
[2] http://api.jquery.com/jQuery.ajax/
Below is a complete working example that pulls a JSON object from Twitter, so you should be able to copy/paste the entire thing into a file and run it in a browser and have it work. If your server is configured correctly and your .json files are in the document_root and have the appropriate permissions, you should be able to swap them out for the Twitter URL and have it work the same way...
<!doctype html>
<html>
<head>
<title>My Super Rad Answer</title>
</head>
<body>
<form id="my-form">
<select id="cellTypePicker">
<option value=''>No Value</option>
<option value="AG10803-DS12374">AG10803-DS12374</option>
</select>
</form>
</body>
<!-- Grab the latest verson of jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// Wait until the page is fully loaded
$(document).ready(function(){
$('#cellTypePicker').change(function() {
// Grab the value of the select field
var name = $(this).val();
if (!name) {
// Make sure it's not null...
// This is preferred over using === because if name is
// anything but null, it will return fale
name = 'AG10803-DS12374';
}
// Right now I'm overwriting this to a resource that I KNOW
// will always work, unless Twitter is down.
//
// Make sure your files are in the right places with the
// right permissions...
var jsonUrl = "http://api.twitter.com/help/test";
$.ajax({
url: jsonUrl,
dataType: 'json',
success: function(response){
// JSON.stringify takes a JSON object and
// turns it into a string
//
// This is super helpful for debugging
alert(JSON.stringify( response ));
},
error: function(xhr, textStatus, errorThrown){
alert("Error: " + textStatus + " | " + errorThrown + " | " + xhr);
}
});
});
});
</script>
</html>

You can use $.ajax() for this - or one of the shortcuts, e.g. $.getJSON():
$.getJSON('somefile', function(data) {
// here, data is javascript object represented by the json in somefile
});

How to use jQuery Validation plugin with form-level server-side validation?

What's the best way to trigger errors on elements for server-side validation errors that come back after the form passes the initial client-side validation?
$("#contact_form").validate({
submitHandler: function(form) {
$.ajax({
type: 'POST',
dataType: 'json',
url: '/contact/send',
data: $(form).serialize(),
success: function(response) {
if(response.error) { //server came back with validation issues
var fields = response.fields;
for(var i=0, var len = fields.length; i < len; i++) {
var field_name = fields[i].name;
var field_error = fields[i].error;
// TRIGGER ERROR ON AFFECTED ELEMENT
}
return false;
}
//everything went ok, so let's show a thanks message
showThanks();
}
}
});
I'm thinking something like:
$(form).find("[name='" + field_name + "']").triggerError(field_error);
But I didn't see any api methods for manually triggering errors in that manner.

I think I figured it out from the documentation of Validator/showErrors
var validator = $("#contact_form").validate();
validator.showErrors({"state": "Bad state."});

Make it. Write a plugin that will do whatever you want.
Or if you get to complicated, simply write a javascript function to do it and call that.
I would write a plugin that would create a div, fill it with the error text and animate it nicely.

On submit of the form, I would make the target of the form an invisible iframe on the page which would then call a function in the topWindow with it's result.
<iframe id="subject_frame" name="submit_frame" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
then in the page in the iframe call a javascript method in the top window that either redirects on success or displays the errors.
In the iframe
<script language="javascript" type="text/javascript">
window.top.window.submitComplete("<?php echo $response; ?>");
</script>
In the top window (as an example)
function uploadComplete( result ){
$.unblockUI();
if(result == "OK"){
$.blockUI({ message: "<span style='color:green;'>File upload successful, request submitted.</span><br/><br/>Redirecting..." });
setTimeout(function() {
$.unblockUI({
onUnblock: function(){ window.location='thankyou.php'; }
});
}, 2000);
} else {
$.blockUI({ message: "<span style='color:red;'>Failed.</span><br/><br/>"+result });
$('.blockOverlay').attr('title','Click to remove').click($.unblockUI);
}
}