QT WebKit - Browser Interaction Problem

[s7]

Hello everyone, I'm developing a Qt program that contains an OpenStreetMap application as a HTML page and this page is able to access a database -via submitting an ajax form that contains the start and end dates of queries- in order to retrieve and visualize queries on the map. I would like to move this querying process to Qt from the HTML/Javascript part. So far I managed to interact with the browser via Qt but I still have a problem that is below: (by the way, the database is a MySQL database on XAMPP and trying to fetch queries from the HTML window's fetch button works -although it also sometimes shows the POST failed message and then clicking again fetches and shows the queries, I haven't been able to figure that out either-)

1) The fetch queries button of Qt is clicked and an alert box is supposed to pop up saying that Ajax POST is failed -the database is not on my current laptop and I should be getting the error when I click either the HTML Browser window's fetch queries button or the Qt's fetch button-

2) But also, whenever I click the Fetch queries button of the HTML Browser, it displays the POST warning but also displays extra POST warning alert boxes depending on how many times I have clicked the Qt's Fetch queries button. -for example if I have clicked the Qt's fetch queries button 5 times in a row and then clicked the HTML window's fetch button once, I get 6 POST failed messages in a row-

The HTML code is like the following:

<form id="ajaxForm" action="index.php" method="post">
Start <input type="text" name = "date1" id = "datepicker" value = "2011-07-13" style = "width:70px">
<input type="text" name = "time1" id = "timepicker1" value = "00:00" style = "width:40px"> 
 
End <input type="text" name = "date2" id = "datepicker2" value = "2011-07-13" style = "width:70px">
<input type="text" name = "time2" id = "timepicker2" value = "00:01" style = "width:40px">

<form id="ajaxForm" action="index.php" method="post">
Start <input type="text" name = "date1" id = "datepicker" value = "2011-07-13" style = "width:70px">
<input type="text" name = "time1" id = "timepicker1" value = "00:00" style = "width:40px"> 

End <input type="text" name = "date2" id = "datepicker2" value = "2011-07-13" style = "width:70px">
<input type="text" name = "time2" id = "timepicker2" value = "00:01" style = "width:40px">

To copy to clipboard, switch view to plain text mode 

The post method of AJAX form is this:

<script type="text/javascript">
 
$(document).ready(function(){
 
 // ajaxForm submit
 $('#ajaxForm').submit(function() {
  $.ajax({
   type: 'POST',
   url: 'heatQuery.php',
   data: $(this).serialize(),
   dataType: 'json',
   success: function(response)
   {   
       // update the points for heatmap layer          
       updateHeatMap(response);
 
   },
   error: function(errorMsg)
   {
       alert('Error in Ajax POST');
       }
  });
 
  return false;
 });
});
 
</script>

<script type="text/javascript">

$(document).ready(function(){

 // ajaxForm submit
 $('#ajaxForm').submit(function() {
  $.ajax({
   type: 'POST',
   url: 'heatQuery.php',
   data: $(this).serialize(),
   dataType: 'json',
   success: function(response)
   {   
       // update the points for heatmap layer          
       updateHeatMap(response);

   },
   error: function(errorMsg)
   {
       alert('Error in Ajax POST');
       }
  });

  return false;
 });
});

</script>

To copy to clipboard, switch view to plain text mode 

And finally, the Qt code that calls the function is this:

void MainWindow::onButtonClicked() // clicking the button in order to POST 
{
    //the QString a is the same ajax post function as declared above
 
    QString a = "$(document).ready(function(){$('#ajaxForm').submit(function() {$.ajax({type: 'POST',url: 'heatQuery.php',data: $(this).serialize(),dataType: 'json',success: function(response){updateHeatMap(response);},error: function(errorMsg){alert('Error in Ajax POST');}});return false;});});"; 
 
    this->view->page()->mainFrame()->evaluateJavaScript(a);
 
}

void MainWindow::onButtonClicked() // clicking the button in order to POST 
{
    //the QString a is the same ajax post function as declared above

    QString a = "$(document).ready(function(){$('#ajaxForm').submit(function() {$.ajax({type: 'POST',url: 'heatQuery.php',data: $(this).serialize(),dataType: 'json',success: function(response){updateHeatMap(response);},error: function(errorMsg){alert('Error in Ajax POST');}});return false;});});"; 

    this->view->page()->mainFrame()->evaluateJavaScript(a);

}

To copy to clipboard, switch view to plain text mode 

Any ideas on what is wrong here? Thanks.

[tferreira]

If you don't want to have multiple error messages when clicking several times, make sure you disable the submit button when posting the Ajax request the first time.
Either disable to submit button or use a var flag to control that.

I believe something like this would work:

<script type="text/javascript">
 
var _ajaxRequestOngoing = false;
 
$(document).ready(function(){
 
 // ajaxForm submit
 $('#ajaxForm').submit(function() {
  if (_ajaxRequestOngoing) return false;
 
  _ajaxRequestOngoing = true;
  $.ajax({
   type: 'POST',
   url: 'heatQuery.php',
   data: $(this).serialize(),
   dataType: 'json',
   success: function(response)
   {   
       _ajaxRequestOngoing = false;
       // update the points for heatmap layer          
       updateHeatMap(response);
 
   },
   error: function(errorMsg)
   {
       _ajaxRequestOngoing = false;
       alert('Error in Ajax POST');
       }
  });
 
  return false;
 });
});
 
</script>

<script type="text/javascript">

var _ajaxRequestOngoing = false;

$(document).ready(function(){

 // ajaxForm submit
 $('#ajaxForm').submit(function() {
  if (_ajaxRequestOngoing) return false;

  _ajaxRequestOngoing = true;
  $.ajax({
   type: 'POST',
   url: 'heatQuery.php',
   data: $(this).serialize(),
   dataType: 'json',
   success: function(response)
   {   
       _ajaxRequestOngoing = false;
       // update the points for heatmap layer          
       updateHeatMap(response);

   },
   error: function(errorMsg)
   {
       _ajaxRequestOngoing = false;
       alert('Error in Ajax POST');
       }
  });

  return false;
 });
});

</script>

To copy to clipboard, switch view to plain text mode 

[s7]

Thanks, that took care of extra POST error messages from HTML but how do I make sure that fetch button of Qt does the same job as HTML's fetch button does? Technically evaluateJavascript should work but I still can't figure out how to invoke that POST from the Qt.

[tferreira]

JavaScript:

<script type="text/javascript">
 
var _ajaxRequestOngoing = false;
 
$(document).ready(function(){
 
 // ajaxForm submit
 $('#ajaxForm').submit(function() {
  formSubmit();
  return false;
 });
});
 
function formSubmit() {
   if (_ajaxRequestOngoing) return false;
 
  _ajaxRequestOngoing = true;
  $.ajax({
   type: 'POST',
   url: 'heatQuery.php',
   data: $(this).serialize(),
   dataType: 'json',
   success: function(response)
   {   
       _ajaxRequestOngoing = false;
       // update the points for heatmap layer          
       updateHeatMap(response);
 
   },
   error: function(errorMsg)
   {
       _ajaxRequestOngoing = false;
       alert('Error in Ajax POST');
       }
  });
}
</script>

<script type="text/javascript">

var _ajaxRequestOngoing = false;

$(document).ready(function(){

 // ajaxForm submit
 $('#ajaxForm').submit(function() {
  formSubmit();
  return false;
 });
});

function formSubmit() {
   if (_ajaxRequestOngoing) return false;

  _ajaxRequestOngoing = true;
  $.ajax({
   type: 'POST',
   url: 'heatQuery.php',
   data: $(this).serialize(),
   dataType: 'json',
   success: function(response)
   {   
       _ajaxRequestOngoing = false;
       // update the points for heatmap layer          
       updateHeatMap(response);

   },
   error: function(errorMsg)
   {
       _ajaxRequestOngoing = false;
       alert('Error in Ajax POST');
       }
  });
}
</script>

To copy to clipboard, switch view to plain text mode 

Qt:

void MainWindow::onButtonClicked() // clicking the button in order to POST 
{
    QString a = "formSubmit();"; 
 
    this->view->page()->mainFrame()->evaluateJavaScript(a);
 
}

void MainWindow::onButtonClicked() // clicking the button in order to POST 
{
    QString a = "formSubmit();"; 

    this->view->page()->mainFrame()->evaluateJavaScript(a);

}

To copy to clipboard, switch view to plain text mode 

I hope this helps.

[s7]

Thanks, now I get the POST error immediately upon clicking the button. But how can I solve the POST error? Queries don't show as they should.. (Also, HTML's fetch button also started to give that error btw)

[tferreira]

Is the heatQuery.php file accessible?

By displaying the error message, maybe it could help you understand what's wrong.

error: function(errorMsg)
   {
       _ajaxRequestOngoing = false;
       alert('Error in Ajax POST\n' + errorMsg);
    }

error: function(errorMsg)
   {
       _ajaxRequestOngoing = false;
       alert('Error in Ajax POST\n' + errorMsg);
    }

To copy to clipboard, switch view to plain text mode 

[s7]

Yes, it's in the D:/xampp/htdocs. When I ran the code it gave the [object XMLHttpRequest] as error.

[tferreira]

error: function(jqXHR, textStatus, errorThrown)
   {
       _ajaxRequestOngoing = false;
       alert('Error in Ajax POST\ntextStatus: ' + textStatus + '\nerrorThrown: ' + errorThrown);
    }

error: function(jqXHR, textStatus, errorThrown)
   {
       _ajaxRequestOngoing = false;
       alert('Error in Ajax POST\ntextStatus: ' + textStatus + '\nerrorThrown: ' + errorThrown);
    }

To copy to clipboard, switch view to plain text mode 

More about jQuery.ajax() here: http://api.jquery.com/jQuery.ajax/

[s7]

OK I just tried that one and got the following (upon entering the date-time values from the HTML part and clicking the Qt's Fetch queries button):

Error in Ajax POST
textStatus: parseerror
errorThrown: SyntaxError: Unable to parse JSON string

[tferreira]

You are not returning a valid JSON string.
Remember that you have set: dataType: 'json'

http://stackoverflow.com/questions/7...-object-object

I don't want to sound rude, but you could try and search google before asking some questions
You'd be amazed to find that others have had the same problems

[s7]

Thanks a lot, I have been working on this error for the past two days or so and it drove me crazy. That is definitely a starting point for me, will take over from here