JQUERY click event within click event code

Jenny Dithe

12-02-2010, 01:28 PM

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.

<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

<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.

SB65

12-02-2010, 03:57 PM

I'm not quite sure what it is you're asking. Is something not working?

Jenny Dithe

12-02-2010, 04:36 PM

Sorry.

It's working up to here:

<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 (?).

Spudhead

12-02-2010, 05:03 PM

$("#txtHint").html(result);

Spudhead

12-02-2010, 05:06 PM

Whoa. Hold on, you're calling the php page twice :confused:

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

Jenny Dithe

12-02-2010, 05:20 PM

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:

<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.

Jenny Dithe

12-02-2010, 05:39 PM

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.

Spudhead

12-02-2010, 05:41 PM

Ok - but you could use load() to drop the form directly into the container. And you might be interested in live() (http://api.jquery.com/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:

$(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');
});

});

Jenny Dithe

12-03-2010, 06:52 AM

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.

Jenny Dithe

12-03-2010, 01:18 PM

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.

$('#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).

$('#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,

$.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.