I thought I should ask this before moving forward with my scripting project and later on realizing that I might be doing something wrong. Might as well save my own time in the first place by checking if what I'm doing is indeed correct.
I'm pretty new to PHP and JQuery and still getting the hang of them both. I recently came across a problem in which I wanted to run some PHP code after executing a certain function using JQuery, so after doing some reading online I got the idea to create a PHP file which does just what I want to do and POST to it from my JQuery function with the needed variables. That way I achieve my server-side and client-side goals on the same time. However!
It doesn't look right to me. At all. I find myself having at least ten include files for one simple page. Those files get included in my HTML code when the form loads, and after refreshing a certain DIV with my JQuery function, they get reloaded. That way I can keep my script dynamic, I doubt there's something else I could do in order to keep it that way.
However I often need to update stuff after executing a certain JQuery function, hence I call a similar file to the loading one, but this time it's a file which I transfer some parameters to (using the POST method, through JQuery), and execute the desired action in the file itself.
Now, after briefly explaining my current situation and method of work, I'd like to know if what I'm doing is correct. In case you're still wondering what the hell I am talking about, I'd like to explain in detail what I mean:
Let's say I have my index.php file which prints data from my database and some additional lines as well. Once I click one of the page buttons, I want to update my database according to the form I've got implanted in my page as well, and then reload the DIV which contains that data ONLY. I do not want to reload the entire page.
Now if I wanted to do that without JQuery that would have been easy. I would POST the data to the same form and update it if the POST parameters are indeed valid. However, there's no way to refresh that DIV without JQuery, so I came up with something similar to this:
$.post("/files/dosomething.php", { taskID: _taskID }, function(){
$("#div_tasks").fadeOut(800, function(){
$('#div_tasks').load('/files//load_div_A.php', function(){
$("#div_tasks").fadeIn(1500);
});
});
});
That's what I've been doing in my last week of learning PHP and JQuery. Now before I proceed any further than this, I'd like to know if it is indeed the right way to achieve my goal.
// EXAMPLE B:
I've got a DIV in my HTML code which prints a table of tasks, for instance. How do I print it? I include a file which echo's the table at the exact point where I want the table to be displayed. Then, in each row, there's a button called 'delete' which removes the selected row from the database. What I do is, using JQuery (due to the fact I want ONLY that DIV to be refreshed), I call another external file calling remove.php and send the index of the task I'd like to remove using POST. The file performs the server-side code and once it's done, I load the updated table into that DIV by calling the file I used to call in the first place from my main page. This time the table will be updated due to the fact it will read the updated data from the database.
Is that how I get this done? Is this the right way? It just doesn't seem right to me. I've never been codding that way and it seems a little bit messy.
Thanks in advance and sorry for the long ass question.
The problems you describe are exactly what the separation of concerns patterns (like MVC) where designed to tackle.
In your case from display instance to display instance the only thing that changes is how the response must be formatted and provided back to the user.
I would highly recommend looking at some of the more popular and well documented MVC Frameworks for your project (or if for nothing else just to play with and draw inspiration from, most of them and some pretty easy to follow starter tutorials you can run through in an hour or so).
It seems to me you are viewing the problem in a mindset compatible with these approaches and it probably feels clunky to you mainly because you are missing a lot of the structure and tooling that these frameworks provide.
If I am understanding the question correctly. I would think that it would be easier to post(using jQuery) to another script that performs the action you want to perform and only returns the result(html/json data) that you want. Right now you are making two requests to the server for something that seems to be tied together.
My suggestion would be to call one PHP script that performs the specific action that you want to perform(say an update to a news item for an example). Then return that data only in your response and then format that data how you want to in your div using jQuery.
$.post("/files/writetodatabase.php", { taskID: _taskID }, function(data){
$('#div_tasks').html(data) // this is assuming you return html, other wise you // could return JSON data and use it here
});
I tried to make that as clear as possible, difficult to explain when typing.