Adding javascript function inside a php function - javascript

I got a html table filled with data from db. When i click on the table i need to call the below script that will get the data from the clicked table row and pass it on a form which is present on csv_info.php
Error : ReferenceError: callAJAX is not defined at
HTMLTableCellElement.onclick
My thoughts : scoping issue, but cant seem to find a fix for this
$c_onclik="onclick=\"
window.scrollTo(1, 1);document.getElementById('a_rlt_1').className = 'Active';
document.getElementById('i_box_930').style.display='block';
callAJAX('csv_info.php?csv_id=".$result['uploadlisteid']."', 'infowin2', '', '');
\"";
```

Related

How Do I Implement a Seach Filter on a Database Query and Refresh the Page with Javascript/PHP

I'll try to simplify this as best as possible. I have a site written in PHP/JavaScript. When I go to a certain page it by default displays a set of filter buttons at the top of the page and an unfiltered data result below that. I can successfully capture the filter results entered and create the appropriate query. My problem is that I don't know how to pass the query back to the database to requery/refresh the data below the filter boxes. The pages are setup as follows:
The page I navigate to is Search.php. In the document.ready script it calls a loadsearchtable function.
$(document).ready(function() {
/* Load Search Table */
LoadSearchTable(SearchString, FilterString);
Initially the searchstring and filterstring are empty. The LoadSearchTable function calls another page to load the results of the original query:
$('div#PostingTable').load('ajax/SearchTable.ajax.php',{SearchString:SearchString,FilterString:FilterString},function(response,status,xhr){
The SearchTable.ajax.php page runs the database query and populates an unordered list with the results.
The body of the Search.php is the following code which opens the page which displays the filters and the unorderedlist populated above:
<body>
<?php BodyShell($FileArray,$User,'pages/Search.pages.php'); ?>
</body>
The javascript on the search page captures the button click on the Search.pages.php. From this I can get what has been entered in the filters but I don't know how to re-call the loadsearchtable function to go through this process again to change what is displayed in the SearchTable.ajax.php unordered list.
I hope this is clear. If not, please let me know what you need from me to explain it better.
As requested below:
After I build my filter I have the following code:
$("div#AJAXDiv").load('ajax/SessionVariable.ajax.php',{VarName:'SearchString',VarValue:$(query)},function(response,status,xhr){
if (status!="success")
{
/* error with ajax call */
}
else
{
if(response)
{
/* Ajax call ok, php script has issues */
alert(response);
}
else
{
/* ajax and php script complete succesfully */
window.location = "Search.php";
}
}
});
This sets a session variable and then calls another instance of itself "Search.php". This time the session variable is populated which should then pass into the LoadSearchTable(SearchString, FilterString) function. However I'm not getting:
1. Any errors
2. Any change in the data that would indicate that the filter has been applied. I've checked the $query prior to populating the session variable and it is correct. I've put alerts within the session variable function (there not all shown above) but am not getting anything and I'm not getting any errors. Just nothing.

How to retrieve OpenWeatherMap data using JSON?

I've been trying to write a program in JavaScript that can retrieve weather data from OpenWeatherMap using JSON. I'm pretty new to JSON, but I think that I understand the logic behind it. However, when I click the "Get JSON" button, nothing happens. It's possible that "data.temp" in the getJSON function is incorrect, but if I'm understanding correctly, it seems like it should at least print the word "Temperature:" HTML and JavaScript are enclosed below, any help is appreciated.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<div id = "owmData" style = "background-color:#cc0;">
Weather data should go here.
</div>
Get JSON
JavaScript:
$(document).ready(function() {
/* Operate when "getIt" button is clicked.*/
$("#getIt").click(function(event){
/* Variable storing weather information.*/
var weatherNow="http://api.openweathermap.org/data/2.5/weather?q=London,uk&callback=test&appid=******************";
$.getJSON(weatherNow,function(data){
$('#owmdata').append('<p>Temperature : ' + data.temp+ '</p>');
});
});
});
In your request parameters you are specifying "test" as the callback function. You can strucuture your request url like this without the ref to the callback and access the data directly:
http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=*************
"temp" is nested inside of the property "main" so you would reference it as data.main.temp

Uncaught TypeError: Cannot read property 'value' of null using joomla

this error comes up when using the following :
field otherinfo has id=idOtherInfo and is declared in a .xml file under Models, Forms in joomla.
The field has a default value in the declaration to prevent the null (shows the default value in the browser) and using the
onchange="dosomething()"
I am running a javascript file, which runs ok as it shows an alert and then it halts on the command
var first1 = document.getElementById("idOtherInfo").value;
The javascript file is loaded by
JHtml::script(JURI::root() . 'media/com_hr/js/validateFields.js', true);
also can be loaded by
$document = JFactory::getDocument();
$document->addScript(JURI::root().'media/com_hr/js/validateFields.js');
Can you please help?
Thanks
It means that element with ID idOtherInfo dosen't exist. Check your source code of web page to be sure that it shows your input correctly.
SOLUTION
If Joomla! generates forms from XML file, it adds jform_ to start of input and label ID and -lbl to end of label.
So for getting input value
var first1 = document.getElementById("jform_idOtherInfo").value;
and for label
var first1 = document.getElementById("jform_idOtherInfo-lbl").innerHTML;
This could be a long shot but I think you've had a little mix up with the name of the ID. Try changing this:
document.getElementById("idOtherInfo").value;
to this:
document.getElementById("OtherInfo").value;

jQuery Datatables fnReloadAjax works but generates an alert

I am using the following code to reload the data in a jQuery datatable.
$(".unread-rows").click( function(e) {
e.preventDefault();
message_table.fnReloadAjax("/letters/ajax/inbox/1");
message_table.fnDraw();
$(this).addClass("active").siblings().removeClass("active");
});
It reloads the data fine but it also causes an alert to appear saying:
DataTables warning (table id = 'DataTables_Table_0'): DataTables warning: JSON data from server could not be parsed. This is caused by a JSON formatting error.
Any ideas what might be causing this?
Barring any bugs in the fnRelaodAjax function :
Have you checked if your server returns valid json data ?
Have you checked if it returns an object with the following structure : {aaData: [...]}, or a structure that matches your sAjaxDataProp property ? (look for "sAjaxSource" and "sAjaxDataProp" in the doc page)

jQuery jqGrid Show message when an edit row is complete

I am following this tutorial here http://www.trirand.com/blog/jqgrid/jqgrid.html in
LiveDataManipulation->EditRow
My grid receive data from script a.php. After the user can modify this data by the jqGrid.
jqGrid after the modification data will send data to script B.php that update my database and return a message of response like "all goes well".
I want that this response is alerted or showed to user somewhere on the page.
Reading the tutorial and here http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing I think that I've to use afterSubmit option, but I haven't understood how print on the edit panel the result.
I have written:
$("#editImpresa").click(function(){
var gr = jQuery("#tabImprese").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#tabImprese").jqGrid('editGridRow',gr,{
height:690,
width:500,
closeAfterEdit : true,
reloadAfterSubmit:false,
afterSubmit: function(response,postdata){
if(response.responseText=="ok")
success=true;
else success = false;
return [success,response.responseText]
}
});
How can I do it?
Thanks.
First of all the option closeAfterEdit:true follows to closing of the edit form after the successful server response. You should change the setting to the default value closeAfterEdit:false to be able to show anything.
Next I would recommend you to use navigator toolbar instead of creating a button after outside of the grid. In the case you can use
var grid = jQuery("#tabImprese");
grid.jqGrid('navGrid','#pager', {add:false,del:false,search:false}, prmEdit);
One more good option is to use ondblClickRow event handler
ondblClickRow: function(rowid) {
$(this).jqGrid('editGridRow',rowid,prmEdit);
}
(see here) or both ways at the same time.
In any way you have to define the options of editGridRow method (the prmEdit). It's important to know that afterSubmit will be called only if the server response not contains error HTTP status code. So you should use errorTextFormat to decode the error server response. The afterSubmit event handler you can use to display status message.
In the demo I used only errorTextFormat to demonstrate both displaying of the status and error message:
The status message goes away in 3 seconds:
The corresponding demo you will find here.
In real example you will of cause place the code writing status message inside of afterSubmit event handler and the code which returns the error message inside of errorTextFormat.

Categories