Ajax Event

[SimonIoa]

Hello,
i want my users to be able to create events and the event to be shown on their wall.

I have this that shows a photo that they upload.

<div id="imageupload" class="border">
        <form id="imageform" method="post" enctype="multipart/form-data" action='message_image_ajax.php'> 
            <div id='preview'>
            </div>
            <div id='imageloadstatus'>
                <img src='<?php echo $base_url;?>wall_icons/ajaxloader.gif'/> Uploading please wait ....
            </div>
            <div id='imageloadbutton'>
                <span id='addphoto'>Add Photo:</span> <input type="file" name="photoimg" id="photoimg" />
            </div>
            <input type='hidden' id='uploadvalues' />
        </form>
    </div>

i have done this

<div id="event_container" class='border'>
        <form action="announce_event.php" id="eventform" method="post" enctype="multipart/form-data">
        <div id='preview_event'>
            </div>
            <div id='eventloadstatus'>
                <img src='<?php echo $base_url;?>wall_icons/ajaxloader.gif'/> Uploading please wait ....
            </div>

            <div align="center">
                <div>
                    <span>Event Title: </span>
                    <span><input type="text" size="50" name="event_title" id="event_title"></span>
                </div><br />
                <div>
                    <span>Add an Image/Poster of the Event </span>
                    <span><input type="file" name="event_img" id="event_img"></span>
                </div><br>
                <div id='eventloadbutton'>
                <INPUT class=AudioSearchButton id="eventvalues" name="Events" type='submit' value='Announce an Event'> or <a href="">Cancel</a>
                </div>
            </div>
        </form>
    </div> 

And this is the javascript code

$(".update_button").click(function() 
{
    var updateval = $("#update").val();
    var uploadvalues=$("#uploadvalues").val();
    var eventvalues=$("#eventvalues").val();

    var X=$('.preview').attr('id');
    var Y=$('.webcam_preview').attr('id');
    var A=$('.preview_event').attr('id');
    if(X)
    {
        var Z= X+','+uploadvalues;
    }
    else if(Y)
    {
        var Z= uploadvalues;
    }
    else if(A)
    {
        var Z= eventvalues;
    }
    else
    {
        var Z=0;
    }
    var dataString = 'update='+ updateval+'&uploads='+Z;
    if($.trim(updateval).length==0)
    {
        alert("Please Enter Some Text");
    }
    else
    {
        $("#flash").show();
        $("#flash").fadeIn(400).html('Loading Update...');
        $.ajax(
        {
            type: "POST",
            url: "message_ajax.php",
            data: dataString,
            cache: false,
            success: function(html)
            {
                $("#webcam_container").slideUp('fast');
                $("#event_container").slideUp('fast');
                $("#flash").fadeOut('slow');
                $("#content").prepend(html);
                $("#update").val('').focus().css("height", "40px"); 
                $('#preview').html('');
                $('#webcam_preview').html('');
                $('#preview_event').html('');
                $('#uploadvalues').val('');
                $('#eventvalues').val('');
                $('#event_img').val('');
                $('#photoimg').val('');
                var c=$('#update_count').html();
                $('#update_count').html(parseInt(c)+1);
            }
        });
        $("#preview").html();
        $("#preview_event").html();
        $('#imageupload').slideUp('fast');
        $('#eventupload').slideUp('fast');
    }
    return false;
});

$('#event_img').die('click').live('change', function()          
{ 
var values=$("#uploadvalues").val();
$("#preview_event").html('<img src="wall_icons/loader.gif"/>');
$("#eventform").ajaxForm({target: '#preview_event', 
     beforeSubmit:function(){ 
     $("#eventloadstatus").show();
     $("#eventloadbutton").hide();
     }, 
    success:function(){ 
     $("#eventloadstatus").hide();
     $("#eventloadbutton").show();
    }, 
    error:function(){ 
     $("#eventloadstatus").hide();
     $("#eventloadbutton").show();
    } }).submit();

var A=$('.preview_event').attr('id');
var Z= A+','+values;
if(Z!='undefined,')
{
$("#eventvalues").val(Z);
}

});

on the anounce_event.php i made it to return the event_title value and all i get is an alert box with the event_title value

any help?

[SimonIoa]

Any help?

[JorgeM]

You've posted quite a bit of code. I would recommend that you narrow it down to the code snippet you are actually having a problem with. There are quite a bit of Javascript gurus on this site that can help you but its unlikely anyone is going to read all of the code and pinpoint where the problem is. If you tell us where the issue is and provide that block of code, that would be more helpful for everyone.

[SimonIoa]

I really dont know what to say...
Is this correct?

$('#event_img').die('click').live('change', function()
{
var values=$("#uploadvalues").val();
$("#preview_event").html('<img src="wall_icons/loader.gif"/>');
$("#eventform").ajaxForm({target: '#preview_event',
beforeSubmit:function(){
$("#eventloadstatus").show();
$("#eventloadbutton").hide();
},
success:function(){
$("#eventloadstatus").hide();
$("#eventloadbutton").show();
},
error:function(){
$("#eventloadstatus").hide();
$("#eventloadbutton").show();
} }).submit();
var A=$('.preview_event').attr('id');
var Z= A+','+values;
if(Z!='undefined,')
{
$("#eventvalues").val(Z);
}
});

[JorgeM]

So, online 5, I see you are using a method called ajaxForm(). I dont recognize this method, I assume you added a plugin to your page?

$("#eventform").ajaxForm()

Sorry, I would like to help but I dont know what you mean by "i want my users to be able to create events and the event to be shown on their wall." in your first post. Then "on the anounce_event.php i made it to return the event_title value and all i get is an alert box with the event_title value" where is this anounce_event.php code?

Its too difficult at least for me to sort through your code, with too little information provided. That is why i suggested to focus specifically on one problem. Do you have any idea where the problem is in your code? Any error messages to work with? Maybe you have this online somewhere so that we can take a look with the browser and see if there are errors in the console.log?

Maybe someone else on this site can add value here?

[SimonIoa]

There is none else but me. Its a long story. Yes there is a jquery plugin and its called by the form's id="eventform"

Thanks for your time Jorge i think i will take it a step at a time.

I appreciate it....