Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post

    JQUERY click event within click event code

    Hi,

    I am trying to create code that once a page is called the visitor can click on a choice of buttons to call a choice of forms, choose one, complete it, and then have a choice of buttons allowing for different things to be done with the completed form. All with jquery (or it doesn't have to all be with jquery but I can't get my form to submit if I try using ajax or php separately, so I figured it had to all be done using JQUERY.)

    This is a stripped down version of my code as I want to get the process working before I start adding everything.

    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function (){
    	$('#submitmessage').click(function(){
    		$('#messageboard').load('getloadMessageBoard.php', function (){
    			$.ajax(url:'getloadMessageBoard.php', success:function (result){
    			$("txtHint").html(result)
    				$('#submitFirst, #submitSecond').click(function(){
    
    					var btn = $(this).attr('id');
    					if(btn == 'submitFirst'){
    						file = 'insertFirst.php';
    						Msg = 'Your comment has been registered';
    					} else if(btn == 'submitSecond'){
    						file = 'insertSecond.php';
    						Msg = 'Your report has been registered';
    					} 
    
    					var data = $('#messageboard').serialize();
    						$.post (file,data, function(){
    						alert(Msg);
    							$('#messageboard').each (function(){
    							this.reset();
    							});
    						});	
    						return false;
    					});
    				});
    			});
    		});
    	});
    });
    </script>
    <body>
    <input type="button" name="submitmessage" id="sumitmessage" value="Add Message">
    <div id="txtHint"></div>
    And this is the contents of getloadCompose.php
    Code:
    <form action="" name="messageboard" id="messageboard" method="post">
    <input type="text" name="subject" id="subject" value="Subject" />
    <br />
    <br />
    <textarea rows="5" cols="40" name="message" id="message"></textarea>
    <br />
    <br />
    <input type="button" name="submitFirst" id="submitFirst" value="Send">
    <input type="button" name="subitSecond" id="submitSecond" value="Report">
    <br />
    Please let me know if I need to clarify further what I am trying to do. The submitmessage button will be one of a group of buttons each one will call a separate form.
    Last edited by Jenny Dithe; 12-02-2010 at 04:37 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I'm not quite sure what it is you're asking. Is something not working?

  • Users who have thanked SB65 for this post:

    Jenny Dithe (12-02-2010)

  • #3
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    Sorry.

    It's working up to here:
    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function (){
    	$('#submitmessage').click(function(){
    		$('#messageboard').load('getloadMessageBoard.php', function (){
    			$.ajax(url:'getloadMessageBoard.php', success:function (result){
    			$("txtHint").html(result)
    But clicking on either submitFirst or submitSecond produces no results, including no error messages.

    If I remove the above code and take the messageboard out of its separate file and place it within the page it works. I presume this has something to do with the document ready function and the getloadMessageBoard not originally being loaded when the main page is loaded but I can't work out a way around this. Searching this subject I saw mention of using unbind, but I don't think that applies here (?).

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    $("#txtHint").html(result);

  • Users who have thanked Spudhead for this post:

    Jenny Dithe (12-02-2010)

  • #5
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Whoa. Hold on, you're calling the php page twice

    Which page do you want to load where, and when?

  • Users who have thanked Spudhead for this post:

    Jenny Dithe (12-02-2010)

  • #6
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    Yup, sorry I just realised that mistake. I tried originally to call the document with load, then realised the ajax request was better as it allowed me to place it in the div I wanted, and then got confused and forgot to delete the original.

    Sorry (I am still finding my feet with JQUERY)

    So the improved code now stands at:

    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function (){
    	$('#submitmessage').click(function(){
    			$.ajax({url:'getloadMessageBoard.php', success:function (result){
    			$("#txtHint").html(result);
    				$('#submitFirst, #submitSecond').click(function(){
    
    					var btn = $(this).attr('id');
    					if(btn == 'submitFirst'){
    						file = 'insertFirst.php';
    						Msg = 'Your comment has been registered';
    					} else if(btn == 'submitSecond'){
    						file = 'insertSecond.php';
    						Msg = 'Your report has been registered';
    					} 
    
    					var data = $('#messageboard').serialize();
    						$.post (file,data, function(){
    						alert(Msg);
    							$('#messageboard').each (function(){
    							this.reset();
    							});
    						});	
    						return false;
    					});
    				});
    			}});
    		});
    	});
    </script>
    <body>
    <input type="button" name="submitmessage" id="sumitmessage" value="Add Message">
    <div id="txtHint"></div>
    Thank you for the div # as well, I was aware that wasn't working, but left it for future me to deal with. Nice to have that problem corrected.
    Last edited by Jenny Dithe; 12-02-2010 at 05:33 PM.

  • #7
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    OK wow. That seems to be working now. I am going to try and apply it to my full page tomorrow.

    But currently that looks great. Thank you for all your help.

  • #8
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Ok - but you could use load() to drop the form directly into the container. And you might be interested in live(), which will attach the event handlers to elements as and when they're added, so you don't have to nest your code as much. So a slightly different version might go:

    Code:
    $(document).ready(function (){
    	
    /*
    tell jquery to look out for anything with these ID's getting added to the DOM, and attach the event handling code to them as and when they are.
    */
    	$('#submitFirst, #submitSecond').live('click', function(){
    		var btn = $(this).attr('id');
    		var file, Msg;
    		if(btn == 'submitFirst'){
    			file = 'insertFirst.php';
    			Msg = 'Your comment has been registered';
    		} else if(btn == 'submitSecond'){
    			file = 'insertSecond.php';
    			Msg = 'Your report has been registered';
    		}
    		var data = $('#messageboard').serialize();
    		$.post(file,data, function(){
    			alert(Msg);
    			$('#messageboard').reset();
    		});	
    		return false;
    	});
    
    /*
    load the form on button click
    */
    	$('#submitmessage').click(function(){
    		$("#txtHint").empty().load('getloadMessageBoard.php');
    	});
    
    });

  • Users who have thanked Spudhead for this post:

    Jenny Dithe (12-03-2010)

  • #9
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    Thank you that works really well and is significantly easier to read.

    I hadn't picked up on the importance of live having been slightly overwhelmed by the documents' explanation and that is exactly what I needed.

    I am just working my way through applying everything I need to it, so no doubt will be back with more questions.

  • #10
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    Ok that worked fantastically for everything I needed up to that point.

    However I now want to add two more functions/events.
    My first a refresh event works, I was just wanted to check I had coded it correctly.
    Code:
    	$('#submitmessage').click(function(){
    		$("#txtHint").empty().load('getloadMessageBoard.php');
    		setInterval(function(){
    			$("#txtHint").empty().load('getloadMessageBoard.php');
    		},450000);
    	});
    The reason I have phrased it like this, is that I have such a large interval it didn't originally load for seven minutes unless I had the $("#txtHint").empty().load('getloadMessageBoard.php'); command first. I just wanted to check I haven't made any huge mistakes by doing this that will come back to haunt me later?

    My second which I haven't got working at all.
    If you click on #submitFirst the page it calls has a list of buttons
    e.g. Product1, Product2, etc.
    Now I can use .live() to make the buttons work when clicked on, but what I don't know is each button will have its own value e.g. 10101, 12039 (relating to which product it is) and if a product button is clicked on I want a new page loaded (I'm fine to code this) and I want the value sent to that new page.

    So my question is how would I pass the value.

    Now I saw .val() mentioned in some documents, but I think I should be able to do it through $.ajax(?). This would be the code without it (yes, I realise identical to above).
    Code:
    	$('#submitProduct1, #submitProduct2').live('click', function(){
    		var btn = $(this).attr('id');
    		var file, Msg;
    		if(btn == 'submitProduct1'){
    			file = 'insertproduct1.php';
    			Msg = 'Thank you Product1 has been registered';
    
    		} else if(btn == 'submitProduct2'){
    			file = 'insertproduct2.php';
    			Msg = 'Thank you Product2 has been registered;
    		}
    		var data = $('#products').serialize();
    		$.post(file,data, function(){
    			alert(Msg);
    			$('#messageboard').reset();
    		});	
    		return false;
    So am I best adding between file and Msg, something like data=(this) (clearly that isn't correct, but as a base) or is using the below addClass the place to start,
    Code:
    $.ajax({ url: "test.html", context: document.body, success: function(){
            $(this).addClass("done");
          }});
    or should I be using .param() or .val(this), maybe an .addval(this), or something entirely different?

    I did look at the documentation, but not knowing where to start I feel a little overwhelmed.
    Last edited by Jenny Dithe; 12-03-2010 at 01:20 PM.


  •  

    Posting Permissions

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