SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax (and jQuery) causing problems.

    First of all I haven't been playing around a lot with javascript earlier. I have read tutorials from google and jQuery site concerning ajax & javascript without success. I have a scenario where I should populate form data based on earlier choices in this same form and then be able to submit the whole thing in the end.

    So this is the scenario: I have one select field in form at the beginning (select1). In this select1 is listed some values from database. Then based on the option user chooses from select1 I should print another select (select2) under select1. Again information to select2 will be fetch from database based on the option on select1. Now after user chooses value from select2 I should again print more stuff under these two selects. This time some input fields and submit button. These input fields will get their names from database but user will have to fill them. So as a whole thing I will have in the end a form that will contain two selects, inputs and a submit button. The form should be able to be submitted in one piece.

    I manage to do this with only one select (without jQuery) in the form but when there is two everything breaks down and I am lost. Need some pointers or example code how to handle this kind of situations, please.

    If you can I would gladly see two different scenarios how to implement this:
    1. without jQuery
    2. and with jQuery.


    best regards,
    TeNDoLLA

  2. #2
    SitePoint Evangelist bradical1379's Avatar
    Join Date
    Feb 2007
    Posts
    443
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just shooting from the hip....
    Code:
    $("select").change(function () {
    var item = $("select option:selected");
    $.ajax({
    type: "POST",
    url: "index.php",
    data: item,
    success: oncomplete});
    });

  3. #3
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bradical1379 View Post
    Just shooting from the hip....
    Code:
    $("select").change(function () {
    var item = $("select option:selected");
    $.ajax({
    type: "POST",
    url: "index.php",
    data: item,
    success: oncomplete});
    });
    Okey. I am not really sure what or how this piece of code you wrote should get this thing done or not even sure what it actually does. Anyway I couldnt get anything to work with it not even the first select. Maybe you could explain line by line what it does?

    After all I get the first select to work with this function:
    Code:
    function get_stuff(option_value, target_div, get_variable_name)
    {
    	//option_value = parseInt(option_value); // For numbers
    	//phpscript gets the $_GET['get_variable_name']
    	$.get("temp_ajax.php", { get_variable_name : option_value },
    	function(data)
    	{
    		// here we set the div we want the data be placed by ajax request
    		$('#'+ target_div).html(data);
    	});
    }
    But now I have a problem when I want to use this function multiple times with different $_GET variables and different target_divs. Target divs are working fine but with this code I get everytime $_GET['get_variable_name'] -variable and what it should do is place the parameter get_variable_name's value to the $_GET variable. For example if I pass as a parameters get_stuff(this.value, 'mydiv', 'myGetVariable') then I want this function to pass $_GET['myGetVariable'] to the php script NOT $_GET['get_variable_name'].

  4. #4
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it working now. here is the working code for it:

    Code:
    function get_stuff(option_value, target_div, get_variable_name)
    {
    	var request_string = "&"+get_variable_name+"="+option_value;
    	$.ajax({
    		url: "temp_ajax.php",
    		type: "GET",
    		data: request_string,
    		success: function(data) {
    			// here we set the div we want the data be placed by ajax request
    			$('#'+ target_div).html(data);
    		}
    	});
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •