Problema javascript

virus1432 · Mesajde **virus1432** » Vin Noi 08, 2013 10:11 pm

In codul de mai jos am incercat sa unesc doua script-uri luate de pe net. Am luat un script care incarca pozele si le afiseaza fara reincarcarea paginii si am incercat sa ii adaug un buton pentru stergerea pozelor. Dar cand dau click pe buton nu imi proceseaza fisierul delete.php (care sterge poza) fara a reincarca pagina, ma trimite direct catre acea pagina. Va rog sa ma ajutati daca se poate si sa imi spuneti ce am gresit.

Cod: Selectaţi tot

<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
<link rel="stylesheet" type="text/css" href="./styles.css" />        
<script type="text/javascript" src="js/jquery.js"></script>         
<script type="text/javascript" src="js/jquery.validate.js"></script>         
<script type="text/javascript" src="js/jquery.form.js"></script> 

<script type="text/javascript">            
$('document').ready(function(){
            
$('#form').validate({                   
 rules:{                        
"poza":{                            
required:false,                            
maxlength:1000                        
}},
                    
messages:{                       
"poza":{                           
required:""                       
}},
                    
submitHandler: function(form){                      
$(form).ajaxSubmit({        
target: '#preview',         
success: function() {         
$('#formbox').slideUp('fast');         
}     
});                                 
}                            
})                                
});

    
$(function(){                   
var btnUpload=$('#upload');        
var status=$('#status');        
new AjaxUpload(btnUpload, {            
action: 'upload-file.php',            
name: 'uploadfile',            
onSubmit: function(file, ext){                 
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){                     
// extension is not allowed                     
status.text('Only JPG, PNG or GIF files are allowed');                    
return false;                
}                
status.text('Uploading...');            
},            
onComplete: function(file, response){                
//On completion clear the status                
status.text('');                
//Add uploaded file to list                
if(response==="success"){                    
$('<li></li>').appendTo('#files').html('<img src="uploads/'+file+'" alt="" /><br /><div id="preview"></div><div id="formbox"> <form name="form" id="form" action="delete.php" method="post"><input type="hidden" name="poza" value="asd" /><input type="submit" value="Stergere"></form></div>').addClass('success');                
} else{                    
$('<li></li>').appendTo('#files').text(file).addClass('error');                
}            
}        
});            
});
</script>

<div id="mainbody" >        
<!-- Upload Button, use any id you wish-->        
<div id="upload" ><span>Upload File<span></div>
<span id="status" ></span>                
<ul id="files" ></ul></div>

elrukn · Mesajde **elrukn** » Sâm Noi 09, 2013 8:08 pm

cum vrei sa se comporte un formularul ala pe care il adaugi tu din js cand el are action="delete.php" ?

de ce faci append la un alt element, pentru care sa ai o functie js cu un ajax call catre delete.php ?

tanatos · Mesajde **tanatos** » Mar Noi 12, 2013 7:48 am

Cod: Selectaţi tot

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="content-type" content="text/html" />

   <title>Untitled 1</title>
    
    <link rel="stylesheet" type="text/css" href="./styles.css" />
    
    <script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
    <script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>       
    <script type="text/javascript" src="js/jquery.js"></script>         
    <script type="text/javascript" src="js/jquery.validate.js"></script>         
    <script type="text/javascript" src="js/jquery.form.js"></script>
    
    <script type="text/javascript">           
    $('document').ready(function() {
        $('#form').validate({
            rules:{
                "poza":{
                    required:false,
                    maxlength:1000
                }
            },
            messages:{
                "poza":{
                    required:""
                }
            },
            submitHandler: function(form) {
                $(form).ajaxSubmit({       
                    target: '#preview',         
                    success: function() {         
                        $('#formbox').slideUp('fast');         
                    }     
                });                                 
            }                           
        });
        
        $(document).delegate(".delete","click",function(e) {
            e.preventDefault();
            
            var id = $(this).attr("rel");
            
            $.ajax({
               url : "delete.php",
               type: "POST",
               data : {
                "poza" : id
               },
               success: function(data, textStatus, jqXHR) {
                $(this).closest('.image').slideToggle('fast').remove();
               } 
            });
            
            return false;
        });
    });
    
    $(function(){                   
        var btnUpload=$('#upload');       
        var status=$('#status');       
        new AjaxUpload(btnUpload, {           
            action: 'upload-file.php',           
            name: 'uploadfile',           
            onSubmit: function(file, ext){                 
                if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){                     
                    // extension is not allowed                     
                    status.text('Only JPG, PNG or GIF files are allowed');                   
                    return false;               
                }               
                status.text('Uploading...');           
            },           
            onComplete: function(file, response){               
                //On completion clear the status               
                status.text('');               
                //Add uploaded file to list               
                if(response === "success") {                   
                    $('<li></li>').appendTo('#files').html('<div class="image"><img src="uploads/'+file+'" alt="" /><br /><div id="preview"></div><a class="delete" href="javascript:void(0);" rel="asd">Sterge</a></div>').addClass('success');
                } else{                   
                    $('<li></li>').appendTo('#files').text(file).addClass('error');               
                }           
            }       
        });
    });
    </script>
  
</head>

<body>

    <div id="mainbody" >       
        <!-- Upload Button, use any id you wish-->       
        <div id="upload" ><span>Upload File<span></div>
        <span id="status" ></span>               
        <ul id="files" ></ul>
    </div>

</body>
</html>

Problema javascript

Problema javascript

Re: Problema javascript

Re: Problema javascript

Cine este conectat