Pozdrav, imam zahtev od klijenta da se napravi popupu prozor koji ce se aktivirati na linku, a koji ce sadrzati polja za unos u tabelu baze. To ne bi bio problem da on ne zahteva da kada klikne npr ok na tom prozorcicu vrati se na prozor sa kog je dosao (pozadinski) i da vidi tu promenu u selekt inputu. Treba da unese nesto u bazu a to koristi selekt input. Nadam se da me razumete :) Da li se to moze uraditi i kako?
Popup prozor sa insertom u tabelu baze
Zaključano
Zakačeno
moze naravno ,
postoji komplikovano resenje da ti sve to trpas u bazu, pa da asinhrono pozivas , pa da vidis kad se zavrsilo da uradis update polja itd , cimanje na kvadrat.
medjutim postoji i jednostavno resenje a to je da mu ne otvoris popup kao obican window popup nego u izvuces jedan div napred, napravis izgled kakav hoces i cim on unese sta zeli ti to upisi u bazu a i ujedno prebaci u polje na prvoj formi
postoji komplikovano resenje da ti sve to trpas u bazu, pa da asinhrono pozivas , pa da vidis kad se zavrsilo da uradis update polja itd , cimanje na kvadrat.
medjutim postoji i jednostavno resenje a to je da mu ne otvoris popup kao obican window popup nego u izvuces jedan div napred, napravis izgled kakav hoces i cim on unese sta zeli ti to upisi u bazu a i ujedno prebaci u polje na prvoj formi
Potpis
Aj sad svi u biblioteku da nesto pojedemo i popijemo ...
--------------------------------
Knjigovodstvo
--------------------------------
Knjigovodstvo
@jagger, svidja mi se predlog, samo kako ubaciti u bazu odatle?
Pogledaj deo
U tom delu treba da napišeš ono što želiš kada se potvrdi unos iz dialoga.
U tvom slučaju bi to trebalo da bude AJAX upit nekoj .php skripti. U toj php skripti treba da regulišeš upis u bazu.
http://api.jquery.com/jQuery.ajax/
Code (javascript):
if ( bValid ) {
$( "#users tbody" ).append( "<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
}
$( "#users tbody" ).append( "<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
}
U tom delu treba da napišeš ono što želiš kada se potvrdi unos iz dialoga.
U tvom slučaju bi to trebalo da bude AJAX upit nekoj .php skripti. U toj php skripti treba da regulišeš upis u bazu.
http://api.jquery.com/jQuery.ajax/
Kao sto ti je deZio napisao.
Kada korisnik klikne na Create an account dugme izvrsava se kod:
prvo se vrsi validacija da li su sva polja korektno unesena a onda, ako je sve ok pozivas ajaxom php skriptu koja upisuje u bazu
Kada korisnik klikne na Create an account dugme izvrsava se kod:
Code:
"Create an account": function() {
....
..
.
},
"Create an account": function() {
....
..
.
},
prvo se vrsi validacija da li su sva polja korektno unesena a onda, ako je sve ok pozivas ajaxom php skriptu koja upisuje u bazu
Code:
if ( bValid ) {
var data_q = 'cmd=insert&name=' + name.val() + '&email=' + email.val() + '&password=' + password.val();
$.ajax({
type : "POST",
url : "imetvojeskripte.php",
data : data_q,
dataType : 'json',
success : function (data) {
//Kod koji se izvrsava (na klijentskoj strani) po upisu u bazu
},
error : function (xhr, textStatus, errorThrown) { alert('An error occurred! ' + (errorThrown ? errorThrown : xhr.status));
}
});
}
if ( bValid ) {
var data_q = 'cmd=insert&name=' + name.val() + '&email=' + email.val() + '&password=' + password.val();
$.ajax({
type : "POST",
url : "imetvojeskripte.php",
data : data_q,
dataType : 'json',
success : function (data) {
//Kod koji se izvrsava (na klijentskoj strani) po upisu u bazu
},
error : function (xhr, textStatus, errorThrown) { alert('An error occurred! ' + (errorThrown ? errorThrown : xhr.status));
}
});
}
Potpis
Hedonista na kvadrat!
izmenjeno 1 put, poslednji put Thugzsr 16.12.2013. u 11:27
Izmene poruke
- Thugzsr16.12.2013. u 11:27zapis iz teksta poruke
Da li znate zasto mi se taj modal prozor zatvori posle 2 sekunde? Kopirao sam primer sa linka koji ste postavili. Fire bug ne pokazuje nikakav error.
Moras mi dati link strane da pogledam ili kod kompletne stranice sa javaskriptom.
Potpis
Hedonista na kvadrat!
Forma
Javascript deo
Code:
<div id="dialog-form" title="Kreiraj novi grejd">
<p class="validateTips">Sva polja su obavezna.</p>
<fieldset>
<label for="name">Oznaka grejda</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
<label for="zarada_od">Najmanja zarada</label>
<input type="text" name="zarada_od" id="zarada_od" value="" class="text ui-widget-content ui-corner-all">
<label for="zarada_do">Najveća zarada</label>
<input type="text" name="zarada_do" id="zarada_do" value="" class="text ui-widget-content ui-corner-all">
</fieldset>
</div>
<div id="dialog-form" title="Kreiraj novi grejd">
<p class="validateTips">Sva polja su obavezna.</p>
<fieldset>
<label for="name">Oznaka grejda</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
<label for="zarada_od">Najmanja zarada</label>
<input type="text" name="zarada_od" id="zarada_od" value="" class="text ui-widget-content ui-corner-all">
<label for="zarada_do">Najveća zarada</label>
<input type="text" name="zarada_do" id="zarada_do" value="" class="text ui-widget-content ui-corner-all">
</fieldset>
</div>
Javascript deo
Code:
$(function() {
var name = $( "#name" ),
zarada_od = $( "#zarada_od" ),
zarada_do = $( "#zarada_do" ),
allFields = $( [] ).add( name ).add( zarada_od ).add( zarada_do ),
tips = $( ".validateTips" );
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Unesi Nov grejd": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( name, "username", 3, 16 );
bValid = bValid && checkLength( zarada_od, "zarada_od", 6, 80 );
bValid = bValid && checkLength( zarada_do, "zarada_do", 5, 16 );
if ( bValid ) {
$.post({
url: 'register.php',
data:
{
name: name,
zarada_od: zarada_od,
zarada_do: zarada_do
}
})
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create_grejd" )
.button()
.click(function() {
//
$( "#dialog-form" ).dialog( "open" );
});
});
$(function() {
var name = $( "#name" ),
zarada_od = $( "#zarada_od" ),
zarada_do = $( "#zarada_do" ),
allFields = $( [] ).add( name ).add( zarada_od ).add( zarada_do ),
tips = $( ".validateTips" );
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Unesi Nov grejd": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( name, "username", 3, 16 );
bValid = bValid && checkLength( zarada_od, "zarada_od", 6, 80 );
bValid = bValid && checkLength( zarada_do, "zarada_do", 5, 16 );
if ( bValid ) {
$.post({
url: 'register.php',
data:
{
name: name,
zarada_od: zarada_od,
zarada_do: zarada_do
}
})
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create_grejd" )
.button()
.click(function() {
//
$( "#dialog-form" ).dialog( "open" );
});
});