Search jQuery

jQuery Forum

Passing php variable to AJAX tab with jQuery UI

in Using jQuery UI • 1 years ago

Any help you can provide would be very useful! I have a particular tab that I need to load 'onclick' because of issues with speed so I've implemented an ajax tab:

<li class="ui-state-default ui-corner-top"><a href="load.php">Activity</a></li>

This works great...except I have no clue how to pass a variable to load.php...just one variable is all i need...i tried to append it to the url as such: ?code=xxxxxxx and it does not work. I have a feeling my answer lies in javascript of which I am somewhat inept...The below is what I'm using for all of the tabs to submit on change, etc.

<script type="text/javascript">
$(document).ready(function(){
$('#tabs').tabs({
select: function(event, ui){
// we want to store the values from the form input box, then send via ajax below
var code = $('#code').attr('value');
var tam_name = encodeURIComponent($('#tam_name').attr('value'));
var title = $('#title').attr('value');
var first= $('#first').attr('value');
var middle= $('#middle').attr('value');
var last= $('#last').attr('value');
var suffix= $('#suffix').attr('value');
var designation= $('#designation').attr('value');
var gender= $('#gender').attr('value');
var birthday_month= $('#birthday_month').attr('value');
var birthday_day= $('#birthday_day').attr('value');
var birthday_year= $('#birthday_year').attr('value');
var social_security_number= $('#social_security_number').attr('value');
var home_phone= $('#home_phone').attr('value');
var office_phone= $('#office_phone').attr('value');
var fax= $('#fax').attr('value');
var email= $('#email').attr('value');
var specialty= $('#specialty').attr('value');
var specialty_percent= $('#specialty_percent').attr('value');
var subspecialty= $('#subspecialty').attr('value');
var subspecialty_percent= $('#subspecialty_percent').attr('value');
var rating_status= $('#rating_status').attr('value');
var rating_state= $('#rating_state').attr('value');
var rating_county= $('#rating_county').attr('value');
var rating_deliveries= $('#rating_deliveries').attr('value');
var home_address1= $('#home_address1').attr('value');
var home_address2= $('#home_address2').attr('value');
var home_city= $('#home_city').attr('value');
var home_state= $('#home_state').attr('value');
var home_zip= $('#home_zip').attr('value');
var mailing_address1= $('#mailing_address1').attr('value');
var mailing_address2= $('#mailing_address2').attr('value');
var mailing_city= $('#mailing_city').attr('value');
var mailing_state= $('#mailing_state').attr('value');
var mailing_zip= $('#mailing_zip').attr('value');
var billing_address1= $('#billing_address1').attr('value');
var billing_address2= $('#billing_address2').attr('value');
var billing_city= $('#billing_city').attr('value');
var billing_state= $('#billing_state').attr('value');
var billing_zip= $('#billing_zip').attr('value');
var carriers = $('#carriers').serialize();
var offices = $('#offices').serialize();
var contacts = $('#contacts').serialize();
var claims = $('#claims').serialize();
$.ajax({
type: "POST",
url: "process.php",
data:
"code="+ code +
"& tam_name="+ tam_name +
"& title="+ title +
"& first="+ first +
"& middle="+ middle +
"& last="+ last +
"& suffix="+ suffix +
"& designation="+ designation +
"& gender="+ gender +
"& birthday_date="+ birthday_year + "/" + birthday_month + "/" + birthday_day +
"& social_security_number="+ social_security_number +
"& home_phone="+ home_phone +
"& office_phone="+ office_phone +
"& fax="+ fax +
"& email="+ email +
"& specialty="+ specialty +
"& specialty_percent="+ specialty_percent +
"& subspecialty="+ subspecialty +
"& subspecialty_percent="+ subspecialty_percent +
"& rating_status="+ rating_status +
"& rating_state="+ rating_state +
"& rating_county="+ rating_county +
"& rating_deliveries="+ rating_deliveries +
"& home_address1="+ home_address1 +
"& home_address2="+ home_address2 +
"& home_city="+ home_city +
"& home_state="+ home_state +
"& home_zip="+ home_zip +
"& mailing_address1="+ mailing_address1 +
"& mailing_address2="+ mailing_address2 +
"& mailing_city="+ mailing_city +
"& mailing_state="+ mailing_state +
"& mailing_zip="+ mailing_zip +
"& billing_address1="+ billing_address1 +
"& billing_address2="+ billing_address2 +
"& billing_city="+ billing_city +
"& billing_state="+ billing_state +
"& billing_zip="+ billing_zip +
"& carriers="+ carriers +
"& offices="+ offices +
"& contacts="+ contacts +
"& claims="+ claims
});
}
});
});
</script>

Any help at all would be extremely appreciated. Thank you for your time!

The php variable I want to pass is $code

-Jeremy

Replies(8)

charlietfl

Re: Passing php variable to AJAX tab with jQuery UI

1 years ago

changing the href of the tab with the url method you mentioned should work but would depend on how and when you are changing it.

You can also pass the param as an ajax data object using the tabs ajaxOptions option. They are just like the $.ajax options you are already using for your form . See tabs docs

Seeing some code that you are trying with the url concept would help.

A much simpler method to get your form values passed to data of ajax without hard coding each and every field twice is to use:

var formData= $('#myForm').serialize()
$.ajax ( {// other options like url, dataType etc
data: formData

})

jdgower

Re: Passing php variable to AJAX tab with jQuery UI

1 years ago

Would it be possible to get an example of how to send the variable via ajaxOptions?

I know that ajax/jquery calls on ids/names to do things with so say I setup my tab link to look like:

<li class="ui-state-default ui-corner-top"><a id="load" href="load.php">Activity</a></li>

I'm not sure why I'm having such a hard time grasping all of this, but my guess is that it's going to be something to do with the below code?

$( "#load" ).tabs({ ajaxOptions: { SOMETHING HERE? } });

Sorry to bother you with this and thanks very much for responding.

mike_laird

Re: Passing php variable to AJAX tab with jQuery UI

1 years ago

Here's how to do it in the beginning of some working Autocomplete code. My hunch is it should work if you change the autocomplete to tabs. This is pretty simple to do, but unfortunately it is not documented - anywhere. Good luck.

        $("#yourSelector").autocomplete
        ({
            source: function( request, response )
            {
                //Pass the selected country to the php query manager to limit the stateProvince selection to just that country
                $.ajax(
                {
                    url: "getStateProvince.php",
                    data: {
                            term: request.term,
                            country: $('input[name=country]:checked').val()    //Pass the selected countryAbbreviation
                          },
                    type: "POST", // a jQuery ajax POST transmits in querystring format (key=value&key1=value1) in utf-8
                    dataType: "json",   //return data in json format
                    success: function( data )

charlietfl

Re: Passing php variable to AJAX tab with jQuery UI

1 years ago

not sure what mike is implying, tabs has a documented ajaxOptions option in API and it isn't anything like the autocomplete code posted

@jdgower - yes you are on right track

$( "#load" ).tabs({ ajaxOptions: { data: { code: XXX } });

not sure where your value for "code" is coming from so I put it as XXX

EDIT: I've never used the ajaxOptions, be good idea to set type: 'GET" or "POST" as well. I know load() method changes type automatically depending on whether data is an object or string

jdgower

Re: Passing php variable to AJAX tab with jQuery UI

1 years ago

Gah, I'm such an idiot...I've been messing with this forever wondering what the heck I'm doing wrong - for all I know I could have done it right 50 different ways and still not gotten it.

You're right, all I had to do was pass it in the URL...

Remember kids, it's $_GET, not $GET_...........LOL *smack head*.

obin

Re: Passing php variable to AJAX tab with jQuery UI

6 months ago

Hi jdgower,

Could you tell me which jquery ui version u are running to perform the post of your data ?

I used to be able to pass it in the url in 1.8.23 but now that I try on 1.9.1 my application behaves really strange. For instance, tabs generated with php url with parameters in the url will not be droppable...

If I delete the "?my_param=my_value" from the url then the tab is droppable...

Thanks

bolerao

Re: Passing php variable to AJAX tab with jQuery UI

6 months ago

This problem looks very much different from the problem discussed in this thread. You should start your own thread. I've also seen sudden changes with 1.9.x in this area, in my case I get an initialization error for sortable. Compare my recent post.

obin

Re: Passing php variable to AJAX tab with jQuery UI

6 months ago

Ok I found a way out !

In fact my code:

is ok... and I get my get variable "my_param" back into content1.php.

Problem was in my drop function, I had to change it:

Before:

var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );

After:

var $list = $( $item.find( "a" ).attr( "newAttribute" ) )
.find( ".connectedSortable" );

with newAttribute being of course reported in my code:

<li><a href="content1.php?my_param=my_value" newAttribute="value">My Tab N</a></li>

Absolutely no idea if this problem comes from my personal code or because of some migration reason (1.8.23 > 1.9.1)

Hope this will help.

Top Reply

Response title

Attachments

jQuery Forum

Passing php variable to AJAX tab with jQuery UI

Replies(8)

Re: Passing php variable to AJAX tab with jQuery UI

Re: Passing php variable to AJAX tab with jQuery UI

Re: Passing php variable to AJAX tab with jQuery UI

Re: Passing php variable to AJAX tab with jQuery UI

Re: Passing php variable to AJAX tab with jQuery UI

Re: Passing php variable to AJAX tab with jQuery UI

Re: Passing php variable to AJAX tab with jQuery UI

Re: Passing php variable to AJAX tab with jQuery UI

Statistics

Tags

Actions

Related Posts