I want to generate a popup after an ajax call. My current code (below) creates a new tab and not alert box.
$.ajax
({
type: "POST",
url: "addDayData.php",
data: TblData,
async: false,
success: function (data) {
window.open("addnewexcursion.php");
}
});
What should I change to allow the new content to appear in a popup rather than a new tab?
Better to open a 'html form in popup': On success $( "#dialog-form" ).dialog( "open" );
you should use alert() instead of window.open()
$.ajax
({
type: "POST",
url: "addDayData.php",
data: TblData,
async: false,
success: function (data) {
alert("POPUP");
}
});
You can use alert() function,
alert('Your text here ');
you should check for other window.open parameter
$.ajax({
type: "POST",
url: "addDayData.php",
data: TblData,
async: false,
success: function (data) {
window.open("addnewexcursion.php", "myWindow","width=200,height=100");
}
});
to open new pop-up use
window.open('www.yourUrl.com','name','height=200,width=150')
specify width and height for window.open, this will open up a new pop-up window.
NOTE : Pop-ups are subjected to be blocked based on browser's configuration
Try this
newwindow=window.open('addnewexcursion.php','name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
Instead of just
window.open("addnewexcursion.php");
Refer this link
Well you can use colorbox( http://www.jacklmoore.com/colorbox/ ) for popup and pass your url in href as parameter. Or you can append your own popup as in
var resp=jQuery.ajax({url:"www.whatever.com"}).done(function(resp){jQuery('body').append("<div class="popup">"+resp+"</div>");});
Of course you have style your popup with position as fixed and fade the background.
How to create a simple popup with ajax content? for that we need little bit of css,some js and html. Its very simple.First add a div with class popup_box,add the div into outside of the main wrapper class. we need some styling for the popup so use the css with this. You can add/modify your own things into it. Then the main thing the js. Add these functions loadPopupBox ()and unloadPopupBox()(definitions are given below). call them at appropriate occasions, that’s it.done!
complete code and style are given below.
Related
I try to get my elements, that I load via ajax back to work but when I try to reinitialize the events on them, it simply doesn't work.
I tried to insert $(document).foundation(); on different places in my code but nope :(
Here an example:
$.ajax({
url: 'dashboard/ajax/links/get',
method: 'post',
data: {
_token: $('input[name=_token]').val()
},
success: function(data) {
$('.links-container').html(data);
$(document).foundation();
}
});
Any ideas?
Update
Another example
// open edit link modal
$('.item-link-edit').on('click',function(e){
e.preventDefault();
// get item id
var id = getItemId(this);
// open modal and load content
$('#edit-link-modal').foundation('reveal','open',{
url: 'dashboard/ajax/links/modals/edit',
data: {
id: id
},
success: function() {
setTimeout(function(){
$(document).foundation();
console.log('reinit');
},1000);
}
});
});
still not working :/
You need to use reflow if you add new content to the DOM.
$(document).foundation('reflow');
Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them. If you dont want to reflow everything you can specify the module you want to re-apply;
$(document).foundation('orbit', 'reflow'); // orbit, for an example
Further documentation can be found here:
http://foundation.zurb.com/docs/javascript.html
I have been trying to get the loading gif to replace the cursor while I am updating the database or loading. It does work when my tabs are loading but it doesn't when I am saving from the jQuery modal popup.
when I debug and look at the rendered html it tells me it is displaying right before it makes the call style="display:block;" when I let it complete the save it switches back to style="display:none;" The below code is just a taste, sorry I can't transfer the actual code from the development network to here. Since I am using these popups for every edit in a huge application, I really would like to get the loading gif showing.
//using jquery to start and stop with ajax
var $loading = $('#waiting').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
//my div
<div id="waiting" class="loading-img" style="display:none;"
$("#somePopup").dialog({
autoOpen:false,
height: 'auto',
width: 900,
buttons: { Save: ....
// you get the idea
$ajax({
type:"post",
url: "some procedure",
dataType: "json",
data: DTOvar,
contentType: "application/json",
async: false,
success: function(data){
//refresh main screen and close popup
error : function(errorstuff){
//handle error
}
});
It won't work since you specified "async: false", signalling the browser to use the same ui thread. ajaxStart/ajaxStop methods will never have a chance to run. You should most likely remote the sync option to achieve what you need.
When I submit the form with ajax everything seems to work but the content is hidden. I can only see it on the "inspect element" but not in the browser.
Any suggestion?
this is the code that i'm using. I already try with .triger(create)
$("#submit").click(function(){
var formData = $("#post").serialize();
$.ajax({
type: "POST",
url: "ajax.php",
cache: false,
data: formData,
success: function (data) {
$('#allfeeds').append().html(data);
$("#content ul").listview('refresh');
}
});
});
Thank you in advance for your help.
Update. Thank you for your help. I used the append() method and it is working!
Use either append() or html() to insert the data but you are using both in wrong way
$('#allfeeds').html(data);
Or
$('#allfeeds').append(data);
First of all I want to say I am not a javascript expert at all..
I am testing Ray Stone's leanModal pluggin.
I am able to open and close modal using the pluggin.
I have added a form to modal div.
What I want to do now is to close the modal when user clicks submit button (as you can see in project website).
The problem is that I don't process the form as usual. I get the data using jQuery and I do request to server using $.ajax(). Here is my code:
$(function() {
$('#add-user').submit(function() {
$.ajax({
type: 'post',
url: '***',
data: '***',
contentType: 'application/json',
dataType: 'json'
});
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
return false;
});
});
Where
#add-user is the link that opens the modal.
#cp is the div id of the modal.
In this case the div gets close but the blur behind the div does not dissapear until user do clicks. The effect is the same than using $('#cp').remove();
How can I totally close the div when the request is sent?
Thanks in advance
Update: A jsFiddle with my code is available here.
Some CSS rules are missed and I have not featured the AJAX request but I think the main code is there.
Firstly $.ajax() is asynchronous so the following lines
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
will be executed even if your query is not successful.
You would better do
$.ajax({
...
success: function () {
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
}
});
Secondly, after checking the source, I think you should use
$.leanModal.close_modal('#cp');
$("#lean_overlay") seems to be the "blur" element you want to get rid of.
Ultimately you could do $("#lean_overlay").remove() but the plugin seems to manage it already
Finally you should have
$(function() {
$('#add-user').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '***',
data: '***',
contentType: 'application/json',
dataType: 'json',
success: function () {
$('#add-user :input:not(:submit)').val('');
$.leanModal.close_modal('#add-user');
}
});
return false;
});
});
Here is my full JS code:
var timeOutId;
function ft(){
$.get("progress.txt", null, function(data){
if(data.substr(0,10) == "MSG::MSG::"){
$("#box").html(data);
window.clearTimeout(timeOutId);
}else{
$("#box").html(data);
}
});
};
$(document).ready(function(){
$("#box").corner('20px');
$("#progress").hide();
});
$("#newm").click(function(){
$("#progress").show();
$("#list").html = $.ajax({
url: "action.php",
global: false,
type: "POST",
data: ({keyword : $("#keyword").value()},{format: $("#format").value()},{filename: $("#filename").value()},{list: $("#list").value()}),
dataType: "html"
});
timeOutId = window.setTimeout("ft()", 10000);
});
and there is a hyperlink with ID "newm" on page but clicking on the link doesnt trigger the ajax request. Can anyone tell me what is wrong?
Description
I have tryed your code and recognize that your binding to click is not working because the DOM element is not available at this time.
You should bind it under $(document).ready() to ensure the DOM is fully loaded before binding javascript / jquery to that.
This will enusre that your link will work, but its hard to help you without the html source.
If this will not help, please post the html.