how to refresh data in modal1 after modal 2 save - json

First, I have a list table in each row have button edit, if button edit click show modal1 where have detail from each row and have button to edit2, if button edit2 click will show modal2 after button save from modal2 been click how to refresh data in modal1
So far where all modal been close and modal1 open data have correct update, but I want just modal2 close and data in modal1 refresh without close all modal
This is my button save code function save1()
{
$('#btnSave1').text('saving...'); //change button text
$('#btnSave1').attr('disabled',true); //set button disable
var url;
if(save1_method == 'add1') {
url = "<?php echo site_url('person/ajax_add1')?>";
} else {
url = "<?php echo site_url('person/ajax_update1')?>";
}
// ajax adding data to database
$.ajax({
url : url,
type: "POST",
data: $('#form1').serialize(),
dataType: "JSON",
success: function(data)
{
if(data.status) //if success close modal and reload ajax table
{
$('#modal_form3').modal('hide');
// $('#modal_form3').on('hidden.bs.modal', function () {
// window.alert('hidden event resfreh!');
// });
reload_table();
}
$('#btnSave1').text('save'); //change button text
$('#btnSave1').attr('disabled',false); //set button enable
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error adding / update data');
$('#btnSave1').text('save'); //change button text
$('#btnSave1').attr('disabled',false); //set button enable
}
});
}

Related

select2 not loading in bootstrap5 remote modal the first time. second time works

I recently moved from bootstrap3 to bootstrap5. Select2 in modal stopped working. I know there has been known issue in this which was resolved using
$.fn.modal.Constructor.prototype.enforceFocus = function() {}
Or using dropdownParent option for the select 2 to bind to the modal. But this didn't work for me.
So I am loading content (including modal) via ajax and populate Select2 inside it. When I click the link first time, select2 is invisible altogether. I close the modal and click the link again, it works fine the second time. I tried dame removing tabindex as well as tabindex='false'.
Clicking first time:
closed the modal and click the second time:
What am I missing here.
my Ajax code is :
HTML: <a href='url-to-controller-returning view' class='modal-remote'>Add</a>
$(document).on('click', '.modal-remote', function (e) {
e.preventDefault();
var $modalRemote = $('#modal-remote'),
url = $(this).attr('href');
$.ajax({
url: url,
beforeSend: function (data) {
if (!$modalRemote.length) $modalRemote = $('<div class="modal fade" id="modal-remote" aria-hidden="true"><div class="modal-dialog ' + modalClass + '"><div class="modal-content"></div></div></div>');
$modalRemote.find('.modal-content').html('<div class="modal-header"><h5 id="remoteModalLabel">Loading...</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="modal-remote-indicator"></div></div>');
$modalRemote.modal('show');
},
success: function (data) {
$.fn.modal.Constructor.prototype._enforceFocus = function() {};
var $dom = $(document.createElement('html'));
$dom[0].innerHTML = data;
$dom.find('link').remove();
$modalRemote.find('.modal-header > h5').html($dom.find('title').text());
$modalRemote.find('.modal-body').html($dom.html());
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$modalRemote.find('.modal-header > h5').html('Error');
$modalRemote.find('.modal-body').html(XMLHttpRequest.responseText);
}
});
});

Redirect a user when box is closed

I have a javascript popup context menu with a button below it with close. That button when pressed close will continue to the next page. If a user dont click the close button and decides to click outside the popup box it will not redirect the user. What function for javascript can i add if a user click outside the box it will redirect them without clicking the close button inside the box. using a osx-modal-content plugin
How its triggered*
<input type='button' name='osx' value='Click Here To Enter The Website!' class='osx demo'/></a>
plugin page (link)
OSX STYLE DIALOG ** OSX STYLE DIALOG ** OSX STYLE DIALOG **
http://www.ericmmartin.com/projects/simplemodal-demos/
This is something that i have for the close function**
close: function (d) {
var self = this; // this = SimpleModal object
d.container.animate(
{top:"-" + (d.container.height() + 20)},
500,
function () {
self.close(); // or $.modal.close();
}
This is how you can do stuff on close:
$("#element-id").modal({
onClose: function () {
window.location.href = "http://stackoverflow.com";
}
});
If you had an element added like:
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});
Change that to
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal({
onClose: function () {
window.location.href = "http://stackoverflow.com";
}
});
return false;
});

jQuery dynamically load page and unload javascript on exit

I am trying to build a site that dynamically loads the pages. Certain pages have extra javascript that they load. I need to be able to unload this javascript when the page changes. Is that possible? My code so far (work in progress still):
//When page loads...
$("ul.toggle li:first").addClass("active").show(); //Activate first tab
var taburl = $("ul.toggle li:first a").attr("href").substr(1);
$(document).ready(function(e) {
$.ajax({
type: "POST",
url: taburl+'.php',
data: '',
dataType: "html",
success: function(d){
$('#main').html(d);
}
});
});
//On Click Event
$("ul.toggle li").click(function() {
$("ul.toggle li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$("#main").fadeOut(500);
$("#main").html('');
var activeTab = $(this).find("a").attr("href").substr(1) + '.php'; //Find the href attribute value to identify the active tab + content
$("#main").load(activeTab).fadeIn(500); //Fade in the active ID content
});
Let me know if any other info is needed.

malsup jquery form submit on select change

I'm using Malsup's excellent Form plugin to dynamically load search results onto the same page.
It works great with a standard form submit, however I have 2 select elements in my form and would love for the results to update as the select is changed.
My code at the moment is thus:
$(document).ready(function() {
var options = {
target: '#bands-results',
beforeSubmit: showRequest
};
$('#bandsearch').ajaxForm(options);
});
// Show loading message and submit form
function showRequest(formData, jqForm, options) {
$('#bands-results').prepend('<span>Searching</span>');
return true;
}
I haven't seen other examples that do the same.
Help appreciated.
Got it licked with this
$(document).ready(function() {
$("#genre-filter").change(function() {
$("#band_search").submit();
});
// bind to the form's submit event
$('#band_search').ajaxForm({
beforeSubmit: showRequest,
target: '#band_list',
success: function() {
$('#premlim').hide();
}
});
})
function showRequest(formData, jqForm, options) {
return true;
}

How would I send a POST Request via Ajax?

I have a php page, Post.php it recieves the POST's Action, and that has two functions. Insert, and Update.Now how would I go about posting INSERT with this Ajax code. The code posts update fine but is doesnt post insert at all.
$(document).ready(function(){
//global vars var inputUser =
$("#nick"); var inputMessage =
$("#message"); var loading =
$("#loading"); var messageList =
$(".content > ul"); //functions
function updateShoutbox(){ //just
for the fade effect
messageList.hide();
loading.fadeIn(); //send the post to shoutbox.php
$.ajax({ type:
"POST", url: "Shoutbox.php", data:
"action=update",complete:
function(data){
loading.fadeOut();
messageList.html(data.responseText);
messageList.fadeIn(2000); } }); }
function checkForm(){
if(inputUser.attr("value") &&
inputMessage.attr("value"))return
true; else return false; }
//Load for the first time the
shoutbox data updateShoutbox();
//on submit event
$("#form").submit(function(){
if(checkForm()){ var nick =
inputUser.attr("value"); var
message = inputMessage.attr("value");
//we deactivate submit button while
sending $("#send").attr({
disabled:true, value:"Sending..." });
$("#send").blur(); //send the
post to shoutbox.php $.ajax({
type: "POST", url: "Shoutbox.php", data: "action=insert&nick=" + nick +
"&message=" + message,
complete: function(data){
messageList.html(data.responseText);
updateShoutbox();
//reactivate the send button
$("#send").attr({ disabled:false, value:"Shout it!" });
}
}); } else alert("Please fill all fields!"); //we prevent the
refresh of the page after submitting
the form return false; }); });*emphasized text*
List item
Your second call to $.ajax uses type: "GET" whereas the first uses type: "POST". Try switching the second one to "POST".