Ajax Refresh of Div on form submit oscommerce

Asked Oct 26 '15 at 07:25

Active Oct 26 '15 at 07:25

Viewed 148 times

In oscommerce I want to refresh the product div called 'left-div' with form field checked results on autosubmit- rather than whole page:- I use oscommerce 2.3.4:- Step wise I have below files- I have pulled a form on index.php in a div called 'right-div', which is called from a box module bm_form.php using below code-

    if (class_exists(bm_form)) {
$boxdata = new bm_form;
echo $boxdata->getData();
}

Now this form has below code for action on bm_form.php:-

<form name="form_srch" id="form_srch" action="'.tep_href_link(FILENAME_DEFAULT).'" method="get" >.....</form>

The form is processed at this folder

 ext/form/form.php
 ext/form/form.js
 ext/form/form.css

The above form process is called in my index.php using below code:- at very top

require('includes/application_top.php');
   require('ext/form/form.php');

The issue is I when I fill the form it triggers the entire page to refresh whereas I need to refresh only the div with form result.

My form.js uses below code for submit

 $("#form_srch").submit();  // submit form

I tried using the idea given here for ajax refresh of Div- Refreshing ajax div with form data

Editing this code in ext/form/form.js:-

 $("#form_srch").submit(
            function(e){
          e.preventDefault();
            $.get('ext/form/form.php', $(this).serialize(), function(data){
                $('#left-div').html(data);
            }
);            

           return false;
});  // submit form

And removed the action part from the form leaving action=""

But still it does not work at all the form stops working altogether, Please can someone help me get this working......

edited May 23 '17 at 12:14

Community

asked Oct 26 '15 at 07:25

Yuki

is your form getting refreshed after submit?? – Niranjan N Raju Oct 26 '15 at 07:52
Yes the whole page refreshes with the form and parsed content..... – Yuki Oct 26 '15 at 10:38
refreshing in the sense, is the page gettting loaded?? – Niranjan N Raju Oct 26 '15 at 10:40
Yes, It loads again with the filtered products :- I check a checkbox field of the form and it reloads the page automatically with the filtered products. – Yuki Oct 26 '15 at 10:43
but if you are using ajax, page shuld not reload. – Niranjan N Raju Oct 26 '15 at 10:46
That is it ... This was the case currently without ajax, But when I applied above ajax code and made the action on form as ="" , The form stops working completely.... Ajax does not seem to work – Yuki Oct 26 '15 at 10:48
check for errors in console once. – Niranjan N Raju Oct 26 '15 at 10:49
I checked using Firebug after adding above ajax, on selecting a field on the form it stops doing anything at all....Firebug Network and Console both blank.... – Yuki Oct 26 '15 at 10:50
tel me wen you want to call ajax?? in click of submit?? – Niranjan N Raju Oct 26 '15 at 10:51
No automatically without click.... As soon as a any parameter is selected – Yuki Oct 26 '15 at 10:52
click?? where?? on click of what you want ajax?? – Niranjan N Raju Oct 26 '15 at 10:52
As soon as I check a field on form the left div refreshes with content using ajax.... currently my index.php refreshes completely to display the parsed filtered content in div. – Yuki Oct 26 '15 at 10:53
first tel me on click of what you want to call ajax?? – Niranjan N Raju Oct 26 '15 at 10:57
Not click button On $("#form_srch").submit( ...... Here ajax follows – Yuki Oct 26 '15 at 10:59
on submit?? you want rite?? – Niranjan N Raju Oct 26 '15 at 11:01
Yes! I want it this way... – Yuki Oct 26 '15 at 11:02
So on click of submit button, ajax is not firing?? – Niranjan N Raju Oct 26 '15 at 11:04
The form auto submits via form.js ......as soon as a checkbox is clicked in index.php. It works perfectly without ajax the page reloads with parsed content. I want that only the div reloads when submit is fired by form.js – Yuki Oct 26 '15 at 11:06
ok ok.., `alert(data)` in ajax and see what is coming.. – Niranjan N Raju Oct 26 '15 at 11:08
`left-div` id is present how many times in your page?? – Niranjan N Raju Oct 26 '15 at 11:12
I am trying to achieve a complete working like I saw here .... http://www.entrale.com/index.php?cPath=7203_6101 When you click on any form part the div with products refresh automatically.....The ajax refresh part is getting me all messed up – Yuki Oct 26 '15 at 11:14
left-div is present once on index.php and once in form.js – Yuki Oct 26 '15 at 11:15
i think y have div twice in your page. – Niranjan N Raju Oct 26 '15 at 11:18
One is 'right-div' which has the form and 'left-div' which has the products – Yuki Oct 26 '15 at 11:23
what is alert showing?? – Niranjan N Raju Oct 26 '15 at 11:27
Again its not working even alert is not showing up.... :( – Yuki Oct 26 '15 at 11:35
do one thing, you have a submit button?? add id to that and use that in ajax instead on form submit, change to button click – Niranjan N Raju Oct 26 '15 at 11:39
No I do not have a submit button to it...... – Yuki Oct 26 '15 at 11:39
Did you see the link any idea how is it working there???? – Yuki Oct 26 '15 at 11:40
ha ha, then how will u submit the form?? that's y its not working, let everything be same. just add a submit button. – Niranjan N Raju Oct 26 '15 at 11:51
I said before..... the form auto submits via form.js ......as soon as a checkbox is clicked in index.php. It works perfectly without ajax the page reloads with parsed content. I want that only the div reloads when submit is fired by form.js – Yuki Oct 26 '15 at 11:52
show that form.js code?? is that a library or your file?? – Niranjan N Raju Oct 26 '15 at 11:54
I think I am able to figure out the problem, When ajax is used in form.js the action on form at index.php is left blank action="" ,....hence it stops working as none of the process is being called. As without ajax the form has action="index.php" – Yuki Oct 26 '15 at 11:58
The form.js sends data at end without ajax- using $("#form_srch").submit(); ...... at the end of the js file. – Yuki Oct 26 '15 at 12:00
But I am not able to figure out how to fix this issue.... – Yuki Oct 26 '15 at 12:03
take action i some global variable and pass to ajax. – Niranjan N Raju Oct 26 '15 at 12:06
It is not passing it.... Is it possible that we set the form action on index.php to some external php file... Which in turn passes the querystring from the form to form.js so as the query string could be appended to index.php hence then ajax can work and refresh the div? – Yuki Oct 26 '15 at 12:24
you can do that, but not a good practice... just try once... – Niranjan N Raju Oct 26 '15 at 12:31
The issue is I do not have an idea on how to implement it..... – Yuki Oct 26 '15 at 12:49
U know form action rite Just add that in Ajax n try once... – Niranjan N Raju Oct 26 '15 at 14:07
Hi, I tried again still does not work.... – Yuki Oct 27 '15 at 04:28
Is there a way we could connect the form action with a file that sends an xhr request to fetch the form.php... and then update the div? – Yuki Oct 31 '15 at 10:55

Ajax Refresh of Div on form submit oscommerce

0 Answers0

Linked