SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Need help in using jQuery.ajax

    Hi, can i ask some help to all experts, I have a form and i want to submit the form via jQuery ajax and i want to open this "to_my_other_page.php" it will open a new window,is this possible?

    Thank you in advance.


    here is my code

    Code:
     $(function(){
    	$('#imgbttn').click(function(){
    		$.ajax({
    			 type: 'post',
    			  data: $('#myform').serialize(),
    			  url:'to_my_other_page.php',
    			  success: function(){		
    			 }
    		 });		 
    	 });
    });

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi jemz,

    I have one solution for your problem.

    Add a hidden anchor tag like <a id="nextPage" target="_blank" href="to_my_other_page.php">text</a>

    and in

    success: function(){

    //Add below line, which will call a click event which will open to_my_other_page.php in a new tab
    $("#nextPage").click();

    }
    PHP Programming Its more than just writing code

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Alternatively you could return the redirect url as part of the response and do this:

    Code JavaScript:
    $.ajax({
        type: "POST",
        url: reqUrl,
        data: reqBody,
        success: function(data) {
          window.location.href = data.redirect;
        }
    });

    or even just hard code it into the success function. It all depends what you want to do.

    There is a very good discussion of this topic here:
    http://stackoverflow.com/questions/1...uery-ajax-call

  4. #4
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi, pullo, this url:'to_my_other_page.php', is a php file that will generate a pdf and i want that the pdf will be show in new window,

    doing this will get 'undefined'
    window.location.href = data.redirect;
    Thank you in advance

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    After generation, the PDF will be available at a certain URL, e.g. www.myapp.com/pdf/1/

    I would have your PHP script return this url upon successful PDF generation as part of the AJAX response, e.g.

    Code:
    {
      "data": [
        {"response":"www.myapp.com/pdf/1/"}
      ]
    }
    Then you can write:

    Code JavaScript:
    success: function(data) {
      window.location.href = data.redirect;
    }

    Please be aware though, that some people don't have a PDF viewer installed/activated in their browser, so you might cause the file to get downloaded instead of viewed.

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, can you show me please the upper part of this example code

    {
    "data": [
    {"response":"www.myapp.com/pdf/1/"}
    ]
    }
    i am confuse. Thank you.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    It was just an example of what you might return to your script, so that you are redirected on success.
    Let's put it another way: why do need to use AJAX for this.
    Why can't you set a normal link to (for example) generate-pdf.php and have this script generate a PDF and display the result?

  8. #8
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I just want to try using jquery ajax,,,

    Okay, i changed it to this way,and my problem is i could not get the text of the option example the "Manager".
    how can i get the text by using the submit() ?

    Thank you in advance.

    Code:
      $('#myimgbttn').click(function(){
        
          $('myform').submit();
    });

    HTML Code:
    <form id="myform" method="post" action="to_other_page.php" target="_blank">
       <select> 
             <option value="001">Manager</option>
            <option value="0002">Supervisor</option>
             <option value="0003">Cashier</option>
    
       </select>
    
    
    </form>
    

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    Quote Originally Posted by jemz View Post
    Okay, i changed it to this way,and my problem is i could not get the text of the option example the "Manager".
    how can i get the text by using the submit() ?
    You can't.
    .submit() is a shortcut for .trigger('submit') and is used to programmatically submit a form, not to get text.

    What you can do, is set the selected attribute of the required option and have it submit with the form.
    Something like this:

    Code JavaScript:
    $('select option:eq(2)').prop('selected', true)

    This will then submit the value of the option to your PHP script.

  10. #10
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, so this what you mean?

    Code:
      $('#myimgbttn').click(function(){
      $('select option:eq(2)').prop('selected', true);
          $('myform').submit();
    });

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi pullo, so this what you mean?

    Code:
      $('#myimgbttn').click(function(){
      $('select option:eq(2)').prop('selected', true);
          $('myform').submit();
    });
    Yeah, that's what I mean, but I'm struggling to imagine why you would want to do this.
    Can you describe what you are trying to do?
    Maybe there's a better way.

  12. #12
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Yeah, that's what I mean, but I'm struggling to imagine why you would want to do this.
    Can you describe what you are trying to do?
    Maybe there's a better way.
    Hi pullo, sorry for the late reply...

    Okay i will describe i have a form and then inside my form i have <select> textbox and etc..now what i want to do is how am i going to submit the form to get the text of select via post and it will open to the new tab.

    the value and text of the select option is requested via ajax,now if i am going to select the Lawyer i want the Lawyer to be post and submitted,..How can i achieve this ?


    HTML Code:
    <form>
       <div> 
         <label>Name</label>
         <input type="text">
       </div>
      <div>  
        <label>Course</label>
         <select name="course" id="course">
              <option value="0001">Mechanical Eng</option>
              <option value="0002">Nurse</option>
             <option value="0003">Teacher</option>
              <option value="0004">Policeman</option>
              <option value="0005">Lawyer</option>         
          </select>
      </div>
    
    
    </form>
    
    Thank you in advance.

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by jemz View Post
    now what i want to do is how am i going to submit the form to get the text of select via post and it will open to the new tab.
    Well, usually a user will select which ever option is appropriate and submit the form themselves.
    If you have a form which a user shouldn't interact with, then maybe a form is the wrong way to go in this case.

    You don't have to use jQuery's ajax() function with a form.
    You can also use it in conjunction with a click event and submit the data to your PHP script that way.

    Could you explain why you need to use a form here.
    What is it that you are actually trying to do?

  14. #14
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, this form is for the user,the user will select the appropriate option..now the user will submit the form

    Code:
      $('#submitIMg').click(function(){
         $('#myformID').submit();
    }
    but in this code,only value of my select option will be posted but what i want is the text (teacher) on it not the value.

    Code:
    <select >
      <option value="001">Teacher</option>
    </select>
    I already know how to get the selected option because you teach me how on how to get the the selected,something like this

    Code:
      var text=$('#myselectId option:selected').text();

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    OK, now I understand

    It might be a silly question, but is there a reason why you don't just set the option element's value attribute to "Teacher", "Policeman", "Lawyer" etc?
    Do you need the values "0001", "0002", "0003" etc. in your PHP script, too?

  16. #16
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yes, that's what i plan to put the teacher in the value,but i think i am going also need the value in my php script later...is there other way ?...if not so, i will just use what you suggested to put the teacher in the value.

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    You could set a hidden field in the form, then set the value of the hidden field to that of whatever the user has selected in the drop-down.

    E.g.

    HTML Code:
    <input type="hidden" id="myHiddenInput" name="jobTitle" value="">
    Then:

    Code JavaScript:
    $("#myForm").on("submit", funtion(){
      $("#myHiddenInput").attr("value") = $('#myselectId option:selected').text();
    });

    I'm not at the PC right now, so I couldn't test this, but the principle should still work.

  18. #18
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, can i ask what is the difference in this code

    Code:
    $("#myForm").on("submit", funtion(){//here you use .on
      
    });
    Code:
     $("#myForm").submit(funtion(){
    
    });
    is there difference ?

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi pullo, can i ask what is the difference in this code

    Code:
    $("#myForm").on("submit", funtion(){//here you use .on
      
    });
    Code:
     $("#myForm").submit(funtion(){
    
    });
    is there difference ?
    In this context .on() is synonymous with .click(), as we haven't specified a selector.
    So, it doesn't matter which one you use.

    However, if you have a dynamically generated element (for example coming from an AJAX call), you can use on to "delegate" the click event using a selector argument.
    This replaces .live() in the latest jQuery.

    E.g. this:

    Code JavaScript:
    $(selector).live("click", function() {
      ...
    });

    has been replaced with this:

    Code JavaScript:
    $("parent element").on("click", "selector", function() {
      ...
    });

    Here is an example:
    http://www.sitepoint.com/forums/show...move-table-row

  20. #20
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you pullo,


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
  •