Develop Reference

Add dynamic input field in ajax

Is there a way to put a dynamic input inside ajax? I am using hayageek jquery file upload. I wanted to add an input as hidden inside the form upload for replacing a file. Any help would be much appreciated.
The div that handles upload:
<div id="replacefile">Upload</div>
I wanted to put: <input type="text" name="replace">
$("#replacefile").uploadFile({
url : newurl,
fileName : "myfile",
returnType : "json",
dragDrop : true,
showFileCounter: false, // show numbered list of file
allowDuplicates: false,
multiple : true, //allow multiple file upload
showFileSize : false, // show file size
acceptFiles : "doc,pdf",
onSuccess : function(files,data,xhr,pd) {
// success
},
onError : function() {
// error
}
});

$("#replacefile").uploadFile({
url : newurl,
fileName : "myfile",
returnType : "json",
dragDrop : true,
showFileCounter: false, // show numbered list of file
allowDuplicates: false,
multiple : true, //allow multiple file upload
showFileSize : false, // show file size
acceptFiles : "doc,pdf",
onSuccess : function(files,data,xhr,pd) {
// success
var input=$('<input type="text" name="replace">');
$('#replacefile').find('form').append(input);
},
onError : function() {
// error
}
});

Load ajax success data on new page

My ajax call hits the controller and fetches a complete JSP page on success. I was trying to load that data independently on a new page rather than within some element of the existing page. I tried loading it for an html tag but that didn't work either. I tried skipping the success function but it remained on the same page without success data. My ajax call is made on clicking a normal button in the form and the code looks like as shown below.
$.ajax({
url : '/newpage',
type : 'POST',
data : requestString,
dataType : "text",
processData : false,
contentType : false,
success : function(completeHtmlPage) {
alert("Success");
$("#html").load(completeHtmlPage);
},
error : function() {
alert("error in loading");
}
});

This should do:
$.ajax({
url : '/newpage',
type : 'POST',
data : requestString,
dataType : "text",
processData : false,
contentType : false,
success : function(completeHtmlPage) {
alert("Success");
$("html").empty();
$("html").append(completeHtmlPage);
},
error : function() {
alert("error in loading");
}
});

You can try this,
my_window = window.open("");
my_window.document.write(completeHtmlPage);
into your success.

I am making an ajax call to load the contents into modal dialog; which seems to be working on all other browser than IE

I am making an ajax call to load the contents into modal dialog; which seems to be working on all other browser than Internet Explorer. In Internet Explorer it is freezing and I cannot do any thing I have to use Task Manager to end task. Can anyone tell me what can i do to resolve the freezing issue? The content that I am loading from the URL are dynamic HTML contents, which has scripts, etc.
try{
var LOCALE ='en_us';
var custNUm= 'Y0392287497';
var dURL = 'https://www.over.com?cstNum='+custNUm+'&loc='+LOCALE;
var mModal = $("<div class=\"mdialog\" role=\"dialog\"></div>").html('Loading Please Wait....').dialog({
position : [ 'center', 20 ],
modal : true,
//autoOpen : false,
bgiframe : true,
resizable: false,
closeOnEscape : false,
title : "CUSTOMER MODAL",
close : function(event, ui) {
$(this).remove();
}
});
$.ajax({
url : dURL,
type : 'POST',
dataType : 'text',
timeout : 5000,
beforeSend: function()
{
$('html,body').css('overflow', 'hidden');
},
error : function(xhr, status, error) {
alert(error);
},
success : function(textResponse) {
mcdpModal.html(textResponse);
}
});
}catch(e){
alert(e);
}

Want to the following: 1.Is ur Modal Window getting opened ?
2.Is your data response comming from ur server
3.Is this url u access resides in different domain ? (for 3 rd point:IE does not support Cross Domain AJAX Calls.You need to have both ur execution domain and the server domain to be same.)

Variable in Javascript for uploadify form data is undefined

Hi I need to save a variable in Javascript and give it to uploadify.
This is my code:
var mediaID;
$(".edit_photo_media").live("click", function() {
mediaID = $(this).data("media-id");
$.ajax({
url: 'edit.php?action=media_select',
type: 'GET',
dataType: 'html',
success: function (select) {
if (select == '3') {
document.location = "login.php";
} else {
$("#dialog_upload_media").dialog("open");
}
}
});
return false;
});
$('#file_upload').uploadify({
'fileTypeDesc' : 'Image Files',
'fileTypeExts' : '*.jpg;',
'fileSizeLimit' : '4096KB',
'debug' : true,
'method' : 'post',
'formData' : {'id' : '' + mediaID},
'swf' : 'include/swf/uploadify.swf',
'uploader' : 'include/scripts/upload_mult.php'
});
So everytime before the uploader is opened .edit_photo_media is clicked.
<img src="images/photo.png" />
This is where the var mediaID is getting its content. Inside .edit_photo_media mediaID is defined correct.
But if I click the upload button mediaID is undefined. Why is the variable loosing its value?
Edit: Ok this seems to be related to a uploadify bug? If I check mediaID on any other function it is working fine... rlly strange

Ok problem solved. Just added 'onUploadStart' and saved the id in there
$('#file_upload').uploadify({
'fileTypeDesc' : 'Image Files',
'fileTypeExts' : '*.jpg;',
'fileSizeLimit' : '4096KB',
'buttonText' : 'Bilder auswählen',
'debug' : true,
'method' : 'post',
'formData' : {'id' : 0},
'swf' : 'include/swf/uploadify.swf',
'uploader' : 'include/scripts/upload_mult.php',
'onUploadStart' : function(file) {
$('#file_upload').uploadify("settings", "formData", {"id": mediaID});
}
});

jQuery only started subsuming HTML5 data properties set in the source code from version 1.6 onwards. If you're using < 1.6, this won't happen, in which case upgrade jQ.

fancybox links doesn't work on inside ajax content

I need to update a section on my site frequently using ajax, jquery, and php.
When the page first loads, it calls a javascript function that displays the content of that section. Then using json I check for updates and if there are results, calls the same function to display it.
Now inside the ajax content there are links like
title
to call fancybox but instead of opening a popup, it opens the page directly.
If the link to call fancybox is not inside an ajax content it displays properly.
I know that there are some people with the same problem but the answers are for divs with specific id.
How can I set it globally. I mean to work on links with class="ajaxpopup"?
this is my function to call the content
$(document).ready(function() {
$(".ajaxpopup").fancybox({
'overlayColor' : '#000000',
'centerOnScroll' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'modal' : true
});
});
function update(page,value) {
var data = 'id='+value;
$.ajax({
url: page,
type: "POST",
data: data,
cache: false,
success: function (html) {
$('#updates').html(html);
$('#updates').fadeIn(200);
}
});
}
then the divs

After loading the dynamic content, bind the fancy box again
div.load("myserverpage.aspx?mode=popularmodels", { symbol: $("#txtSymbol").val() }, function() {
$(this).fadeIn(100);
$(".ajaxpopup").fancybox({
'scrolling': 'no',
'titleShow': true,
'titlePosition': 'over',
'onClosed': function () {
$("#login_error").hide();
}
});
});