update div value - JQuery Toastmessage-plugin

Question

i have a php page that redirects (if successful) to another php page like this:

header('Location: completed.php?message=Successful operation. Data inserted for user: ' . $login->get_username() . ' . See home page for infos.');

Now in completed.php i have a div that echoes the received message:

<div id="msg">
<?php echo $_GET['message']; ?>
</div>

I'm using the 'Toastmessage-plugin' : here.. , but i'm unable to display the $_GET in to the text of Toastmessage .. I'm using this code :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="js/jquery.toastmessage.js" type="text/javascript"></script>
<link href="styles/jquery.toastmessage.css" rel="stylesheet" type="text/css" />

...

<script type="text/javascript">
function showStickyNoticeToast() {
        $().toastmessage('showToast', {
            text: $('#msg').val(),
            sticky: true,
            position: 'bottom-left',
            type: 'notice',
            closeText: '',
            close: function () { console.log("toast is closed ..."); }
        });
    }
</script>

I've searched a lot , also for DOM Events and other events but i don't know what step take... maybe when the JQ function is loaded the div 'msg' has not yet received GET data ...? so how i update his value ?

The page i've read : this and this. I also tried with ajax but i'm less experienced in that language..

please help... :) Thanks

EDIT @charlietfl

Ajax : i've made a lot of tries... i can't find the code anymore! Basically i call a php file with this code (take this as pseudocode):

<script type="text/javascript>
<!--
$('#choose').change(function(event) {
    $.get('messages.php', { selected: $('#msg').val() },
        function(data) {
            $('#update').html(data);   // other div wher store data
        }
    );            
}); 
</script>

....

<?php

$alfa = isset($_GET['message']) ? $_GET['message'] : 'nothing';
echo $alfa;
?>

If you simply output the GET[message], the message MUST be there, unless you tamper with $_GET in your php code... — Cranio, Jun 24 '12 at 16:43

score 1 · Answer 1 · answered Jun 24 '12 at 16:20

1

Try to pass the message with urlencode() like:

$msg = "Successful operation etc. etc.";
header("Location: completed.php?message="+urlencode($msg));

answered Jun 24 '12 at 16:20

Cranio

9,647
4
35
55

@lollo ok, bear in mind that any complex string as GET parameter should be passed this way (expecially if it contains special characters like ampersand &) – Cranio Jun 24 '12 at 16:39
@lollo Got the error maybe, check my other answer. To all, I don't know if its in-policy to give another answer (I felt it was right to do because it was totally unrelated). – Cranio Jun 24 '12 at 16:50
@lollo You're welcome :) If you feel my answer is correct and the most satisfactory, plase upvote and accept the other answer, thank you :) – Cranio Jun 24 '12 at 16:52

score 0 · Accepted Answer · answered Jun 24 '12 at 16:44

0

Got it: you use $("#msg").val() but DIV tags have not a "value".

Use $("#msg").text() (for plain-text)

or $("#msg").html()

to include also some HTML you may have in your code (pretty sure you need the first option).

Use .val() only with "valued" tags like <input> (works also with <textarea>).

See also: http://api.jquery.com/val/

answered Jun 24 '12 at 16:44

Cranio

9,647
4
35
55

Yes.. that was the right solution... using $("#msg").val() didn't work. I've changed it with $("#msg").text().. now got it working...Thanks to all.. bye! – lollo Jun 24 '12 at 16:56

score -1 · Answer 3 · answered Jun 24 '12 at 16:49

-1

Your issue is likely that you are trying to call the message plugin before the ajax completes since the first 'A' in ajax stands for asynchronous.

In order to allow for the time required for the ajax to complete you would need to call your message plugin within the success callback of ajax.

Add message argument to function

function showStickyNoticeToast( message ) {
        $().toastmessage('showToast', {
            text: message,
            sticky: true,
            position: 'bottom-left',
            type: 'notice',
            closeText: '',
            close: function () { console.log("toast is closed ..."); }
        });
    }



$.post( url , dataToserver, function(data){         
      showStickyNoticeToast( $(data).text())
      $('#update').html(data); 

})

answered Jun 24 '12 at 16:49

charlietfl

170,828
13
121
150

That's not the issue, the error is in "val()" and by the way ajax was mentioned only as an alternative, not as the actual implementation. – Cranio Jun 24 '12 at 16:51
I realize val is incorrect, but where is the flaw in this scenario? – charlietfl Jun 24 '12 at 16:53
The original post didn't mention Ajax (only once, but as an alternative to another different implementation). And the main error was that the OP didn't retrieve correctly the value, not his use or misuse of Ajax (which wasn't shown at all). So I felt this answer, though syntactically and procedurally correct (I've read other posts by you and know you're very clever and expert) was inappropriate. Now after a bunch of edits we have also an AJAX part in the OP... – Cranio Jun 24 '12 at 16:55

update div value - JQuery Toastmessage-plugin

3 Answers3