Solved

redirect the page from javascript Ajax

Posted on 2015-02-22
9
88 Views
Last Modified: 2015-03-09
Hi,

In cakephp, I have need to redirect a page to itself when  changing the value of a drop down box.
The reason is the Url contains an ID. When changing a field the ID in the URL needs to change as well. You can only do this by redirecting to the same page with new ID.

The JS gets called  like this
           echo $this -> Form -> input('tutor_id', array('label' => false,'type' => 'select','options'=>$tutors,'selected' => $tutorId,'onchange'=>'selecttutoravalibality(this.value)'));
                        
once the tutor changes I need to redirect the page with new tutorID .This way I can send this webaoge onto another page with the correct  paramamters.


   function selecttutoravalibality(tutorId){
	    
		 $("#ajaxformatediv").fadeIn(1000);
		 var studentid= document.getElementById('LessonStudentId').value;
			//alert(studentid);
			$.ajax({
				type: 'POST',
				url: siteurl+'lessons/select_tutor_avalability',
				//dataType: 'json',
				data: {'tutorId': tutorId},
				success: function(msg) {
				 $('#tutoravaliablityresposnse').html(msg);
				}
			  });  
	  
		  
		   $.ajax({
			type: 'POST',
			url: siteurl+'lessons/select_tutor_book_schedule',
			//dataType: 'json',
			data: {'tutorId': tutorId,'studentid': studentid},
			success: function(bookschedulresposne) {
			 //alert(bookschedulresposne);
			 $('#ajaxtutorbookschedule').html(bookschedulresposne);
			}
		  });
			  
		  
		  $.ajax({
			type: 'POST',
			url: siteurl+'lessons/select_tutor_oneoff_classes',
			//dataType: 'json',
			data: {'tutorId': tutorId,'studentid': studentid},
			success: function(oneoffclassresponse) {
			 //alert(bookschedulresposne);
			 $('#ajaxtutoroneoffclasses').html(oneoffclassresponse);
			}
		  });
		  
		   $("#ajaxformatediv").fadeOut(1000);
		



		  
	}

Open in new window

0
Comment
Question by:jagguy
  • 4
  • 4
9 Comments
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 40625305
To redirect a page in Javascript, you'd use windows.location():

window.location = "somepage.php?id=xxx";

Open in new window


Your design pattern does seem a little strange though. You're making an AJAX call to update the DOM, and then immediately refreshing the page, which would undo all the DOM changes that the AJAX call made. Seems kind of pointless.
0
 

Author Comment

by:jagguy
ID: 40625589
no refreshing the page with the new change is what is needed. This gets URL with new ID fields and I can pass the query string on to another page with correct details.

I dont need the DOM changed, the redirect will do this for me
0
 

Author Comment

by:jagguy
ID: 40625596
Where do I place redirect  window.location = "somepage.php?id=xxx"; with student and new tutorID?
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 40625646
Sorry jagguy. I'm a little confused. You say you don't need the DOM changed, but that's exactly what your AJAX requests do. All those html() calls in the success of your AJAX are changing the DOM.

As for where to place the window.location line - that depends on when you want to call it. As I said before, currently it doesn't make a lot of sense.

Your page seems to be set up so that when you change the dropdown, you make 3 AJAX requests back to your server and update the DOM with the results. If you then immediately reload the page with a different querystring in the URL, you'll lose all those changes.

Probably easier if you can explain what you're trying to achieve in simpler terms.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:jagguy
ID: 40627181
I think your thinking too hard about it.

I want a change a value in a drop down box  (list of names ) and then just reload the page with the new id from the drop down box.

That will solve the query string problems I have
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 40627238
OK. Here you go:

function selecttutoravalibality(tutorId) {
   window.location = window.location.pathname + "?tutorId=" + tutorId;
}

Open in new window


If that's all you need, I can't see the relevance of ANY of your AJAX code, or the reference to AJAX in the question. If you're just redirecting the page, your AJAX is completely meaningless and ineffective.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 40628632
greetings jagguy, , I can NOT understand what you need to do in your AJAX code work? ? ? You change three HTML page sections with code like -
        $('#tutoravaliablityresposnse').html(msg);

and you are are asking about - "once the tutor changes I need to redirect the page with new tutorID", , and later you say -
     "I want a change a value in a drop down box  (list of names ) and then just reload the page with the new id from the drop down box."

I imagine that with your code like -
     $('#tutoravaliablityresposnse').html(msg);

you are filling a select box options, and you now need the onchange of this select to change the page that the user is viewing to a page that has the tutorID in the address? ?

Am I any where close to what you need to do, if NOT, then can you tell us WHAT event (select change, button click, icon touch) that will change the page to a page that has the tutorID in the address?
0
 

Author Comment

by:jagguy
ID: 40630463
i dont want the ajax code at all
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 40630484
Thanks jagguy,

Finally - some clarity ;)

Replace your selecttutoravalibality() function with the one I've posted, and the page will redirect when you change the dropdown. It will append ?tutorId=xx to the current URL.

Give that a go and come back if you have any issues
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now