i am working on a code igniter ..In my view page, i have one modal popup. In the modalpopup, i have put form.so what i want is that When user click save button ..the model pop up close through jquery..
this is my save and close button ... the model is closes fine if i click the close button but because for save button i have given control to the jquery so i want to close there which i dont know
Close
<a id = "save" class="btn x" data-dismiss="modal">Save changes</a>
<script type="text/javascript">
$('#save').click(function() { // $("#form").serialize()
var check_no = $('#check_no').val();
var form_data = {
check_no: $('#check_no').val(),
};
$.ajax({
url: "<?php echo site_url('checkDetailsController/addCheckDetails'); ?>",
type: 'POST',
data: form_data,
dataType: 'json',
success: function(msg) {
if(msg.res == 1)
{
alert('true')
}
else{
alert("false");
}
}
});
return false;
});
</script>
The save function must use $('#dialog').dialog("close"); instead of $(this).dialog('close'). This causes the close method attached to dialog object to be called.
If you use the dialog from jqueryUI you can use the buttons option.
$('#yourcontainer').dialog({
buttons : {
// Save and close button
'Save' : function () {
// your javascript code for saving
$(this).dialog('close');
},
// Cancel button
'Close' : function () {
$(this).dialog('close');
}
},
// and your other settings
});
Related
I am using this jQuery plugin for making toggle, but I have an issue that when I make multiple toggles that have same ids and class so in that case I am not able to identify particular toggle for applying auto load ajax on changing value.
I would to ask that how I make same toggle with this same plugin but different ids or class or name so I make ajax function like when I click toggle it will update in PHP without submitting submit button.
The plugin I am using is this one
The code I am using is this:
HTML
<p>Default: <span class="easyswitch"></span></p>
<p>Checked: <span class="easyswitch" data-default="1"></span></p>
SCRIPT
<script>
$('.easyswitch').easyswitch();
</script>
AJAX
$('MY_CLASS_NAME').change(function(){
var mode= $(this).prop('checked');
$.ajax({
type:'POST',
dataType:'JSON',
url:'test.php',
data:'mode='+mode,
success:function(data)
{
$("body").html('Operation Saved');
}
});
You can not handle easyswitch's change event. you need to create click event of it, and from it you can get the status of current toggle.
$('.easyswitch').easyswitch();
$('.easyswitch').click(function () {
var mode = $(this).hasClass('on');
toogleStatus(mode);
});
// for all controlls.
$(".easyswitch").each(function() {
var mode = $(this).hasClass('on');
toogleStatus(mode);
});
function toogleStatus(mode)
{
if (!mode) {
alert('checked')
}
else {
alert('unchecked')
}
}
Try using callback option
$('.easyswitch').easyswitch({
callback: function(val, ele) {
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'test.php',
data: { mode: val },
success: function(data) {
$("body").html('Operation Saved');
}
});
}
});
i have a problem, i have a form with a single input and submit button called "search" in a jquery dialog box. I want to display the mySQL data when clicking on this button in another jquery dialog box . How can i do that ?
Try this
$(document).on('click', '#search', function (e) {
e.preventDefault();
$.ajax({
type: 'get',
url: 'getMysqlData.php',
success: function (data) {
$("#otherDialogBox").html(data);
$("#otherDialogBox").dialog();
}
});
});
I have this jquery on every page:
$(window).load(function(){
// PAGE IS FULLY LOADED
// FADE OUT YOUR OVERLAYING DIV
$('#overlay').fadeOut();
});
which fades out a div when the page is fully loaded.
On all pages i have a form and this Jquery code:
<script type="text/javascript">
$(document).ready(function() {
$("#message").hide();
$("#please_wait_box").hide();
$("#reviewtickets").submit(function(e) {
$("#message").hide();
$("#please_wait_box").show();
e.preventDefault();
dataString = $("#reviewtickets").serialize();
$.ajax({
type: "POST",
url: "reviewtickets_go.php",
cache: false,
data: dataString,
success: function(res) {
$("#please_wait_box").hide();
$("#message").html(res);
$('#message').fadeIn('slow');
if (res.indexOf("success") != -1) {
window.location.href = res.substr(8);
}
}
});
});
});
</script>
so it basically calls another page to submit the form without moving away from the page.
When the forms are submitted, the page is called to save the data in the above jquery code but my jquery load function doesnt fade out because it cannot see that the page has fully loaded
how can i stop the loading function if the form submit code is used?
the div had an id and class both of overlay
the jquery needed to be the class and not the id as the css was on the class
call it inside the success callback of ajax . success function callback is called when the ajax request is successfully made and datas are returned from the server.
success: function(res){
$("#please_wait_box").hide();
$("#message").html(res);
$('#message').fadeIn('slow');
$('#overlay').fadeOut(); //<---here
if (res.indexOf("success") != -1) {
window.location.href = res.substr(8);
}
}
I am having an issue trying to keep a cretin window toggled opened after AJAX retrieves data, to show a proper message to denote weather or not the user has logged in or not.
My Javascript is as follows:
function validLogin(){
var username=$('#username').val();
var password=$('#password').val();
var dataString = 'username='+ username + '&password='+ password;
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="images/loading.gif" width="32px" height="32px" />');
$.ajax({
type: "POST",
url: "login.php",
data: dataString,
cache: true,
success: function(result){
var result=trim(result);
$("#flash").hide();
if(result=='correct'){
$("fieldset#signin_menu").show(); // <-- This will not work!
}else{
$("#errorMessage").html(result);
}
}
After I get the informatoin the window should stay open; however, the page refreshes and the window closes. This is an onclick event once you press "Sign In". A window will pop down. Here is the code for that window popping down:
$(document).ready(function() {
$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});
$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});
Is there a better work around for this? Am I doing this wrong?
use this jquery instead
$(document).ready(function() {
$("fieldset#signin_menu").show(function() {
$(".signin").toggleClass("menu-open");
});
});
$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});
I want to enhance my tool's page where as soon use click a button. Request goes to server and depending upon return type (fail/pass) i change color of button. No Refresh/page reload
Page has multiple buttons : some what like below.
Name 9-11 - 11-2 2-5
Resource1 - Button - Button - Button
Resource2 - Button - Button - Button
Resource1 - Button - Button - Button
I am a c++ programmer so you might feel i asked a simple question
Here's a sample of jQuery Ajax posting a Form. Personally, I'm unfamiliar with PHP but Ajax is the same no matter what. You just need to post to something that can return Success = true or false. This POST happens asynchronously so you don't get a page refresh unless you do something specific in the success: section.
$("document").ready(function () {
$('form').submit(function () {
if ($(this).valid()) {
$.ajax({
url: yourUrlHere,
dataType: "json",
cache: false,
type: 'POST',
data: $(this).serialize(),
success: function (result) {
if(result.Success) {
// do nothing
}
}
});
}
return false;
});
});
Of course you don't have to be doing a POST either, it could be a GET
type: 'GET',
And if you don't need to pass any data just leave data: section out. But if you want to specify the data you can with data: { paramName: yourValue },
The cache: false, line can be left out if you want to cache the page. Seeing as how you aren't going to show any changes you can remove that line. jQuery appends a unique value to the Url so as to keep it from caching. Specifying type: "json", or whatever your specific type is, is always a good idea but not necessary.
Try using the $.post or $.get functions in jquery
$.post("url",$("#myform").serialize());
Adding a callback function as FabrÃcio Matté suggested
$.post("url",$("#myform").serialize(),function(data){alert(data);$("#myform").hide()//?Do something with the returned data here});
Here you go. You will find an example of a form, a button a the necessary ajax processing php page. Try it out and let us know how it goes:
<form action="" method="post" name="my_form" id="my_form">
<input type="submit" name="my_button" id="my_button" value="Submit">
</form>
<script type="text/javascript">
$("document").ready(function () {
$('#my_form').submit(function () {
$.ajax({
url: "ajaxpage.php",
dataType: "json",
type: "POST",
data: $(this).serialize(),
success: function (result)
{
//THere was an error
if(result.error)
{
//So apply 'red' color to button
$("#my_button").addClass('red');
}
else
{
//there was no error. So apply 'green' color
$("#my_button").addClass('green');
}
}
});
return false;
});
});
</script>
<?php
//ajaxpage.php
//Do your processing here
if ( $processed )
{
$error = false;
}
else
{
$error = true;
}
print json_encode(array('error' => $error));
die();
?>