I am facing issue while i load a form on ajax request. i followed the steps :
Enable jqueryUi in layout.
creates a form element like :
$dob = new ZendX_JQuery_Form_Element_DatePicker('patient_dob');
$dob->setLabel('')
->addFilter('StripTags')
->addFilter('StringTrim')
//->addValidator('Date')
->setAttrib('readonly', 'true')
->setJQueryParam('dateFormat', 'yy-mm-d')
->setDecorators(array(
'Description', 'Errors', 'UiWidgetElement',
array(array('data' => 'HtmlTag'), array('tag' => 'Div', 'class'=>'calender_input'))
));
and just called the element into form. It is working when page load normally but not with ajax request. What is the reason? any suggestions? i googled a lot about it.
The problem is that the javascript code that activates the date picker is rendered by the ZendX_Jquery extension to happen when the document is ready:
<script type="text/javascript">
//<!--
$(document).ready(function() {
$("#patient_dob").datepicker({});
});
//-->
</script>
which makes sense with non-ajax requests, but never is executed in an ajax request because the document.ready has already happened in the parent's page. You can add your own in your view directly:
<script type="text/javascript">
$("#patient_dob").datepicker({});
</script>
I haven't yet found a solution for this from the Zend Jquery extension, but if you do please let me know!
Related
I am trying to show a animation when a page is loaded trough ajax with turbolinks.
I created a partial _loader.html.erb and added the code.
The js doesn't seem to fire on ajaxStart or ajaxStop.
I have also tried to wrap the js in $function and $(document) but cant get it to work.
What am I doing wrong?
<script>
// hide it first
$(".loading-indicator").hide();
alert("hide at first")
// when an ajax request starts, show spinner
$.ajaxStart(function(){
$(".loading-indicator").show();
alert("start")
});
// when an ajax request complets, hide spinner
$.ajaxStop(function(){
$(".loading-indicator").hide();
alert("stop")
});
</script>
<%= image_tag("loading.gif", :class => "loading-indicator", :style => "") %>
<style>
.loading-indicator {
}
</style>
Through ajaxStart() and ajaxStop() you're just registering handlers that get called when the first ajax request starts and all ajax requests are completed. You never do an ajax request, so they never get called. Use .ajax() to do the actual request.
You could also use the complete callback to hide your loading animation:
function request() {
$(".loading-indicator").show();
$.ajax({
...
complete: function() { $(".loading-indicator").hide(); }
});
}
jQuery Code: I removed all my Sortable settings. If you feel they are pertinent I can put them back in.
$('#navsort').sortable({ ... });
$("#content").on('click', '#submit_menu', function (event){
event.preventDefault();
$.ajax({
type: "POST",
url: "menu-ajax.php",
data: { data:$('#form').serialize() }
}).done(function (response) {
$('#content').hide().html(response).fadeIn('slow');
});
});
HTML Code: This is a simplified version because the real code has lots of PHP and other stuff going on.
<div id="content">
<form method="post" id="form">
Save
<ol id="navsort">
...
</ol>
</form>
</div>
As you can see the entire form, including the elements attached to Sortable, are replaced (with an identical copy of itself) via AJAX when the form is submitted. This is when Sortable stops working.
I understand that the new form was not part of the DOM when Sortable was initialized and so its not attached despite being identical to the form it replaced. I also understand how .on() is used to delegate between elements that are present when the page first loads and those added afterwards. What I do no understand is how to apply this concept to the initialization of Sortable.
I got it to work with a dirty hack, but I want to understand the right way.
Dirty Hack:
function dirtyhack(){
$("selector").on('event', 'target', function (){ ... });
}
dirtyhack();
$("#content").on('click', '#submit_menu', function (event){
event.preventDefault();
$.ajax({
type: "POST",
url: "menu-ajax.php",
data: { data:$('#form').serialize() }
}).done(function (response) {
$('#content').hide().html(response).fadeIn('slow');
dirtyhack();
});
});
So Sortable is initialized when the page loads and reinitialized when AJAX is done replacing the elements Sortable is attached to. Maybe this is right, but it feels wrong.
Disclosure: I am actually using the nestedSortable plugin in place of Sortable, but the plugin author claims that "All jQuery Sortable options, events and methods are available" through his plugin. I also did switch to the standard Sortable Widget to test and had the same issue, so I do not think its the plugin.
Plugin URL: https://github.com/mjsarfatti/nestedSortable/tree/2.0alpha
Below is the code snippet which is hitting the url on server and getting the html response.I can see
the response inside firefox debugger but it does not display in div tag.
$.ajax({
url: url,
dataType: 'html',
data: '',
type: 'POST',
success: function(data) {
//in firefox debugger i can see complete html response inside data
$('#displayContent').html(data); // but here, it does not
// append the html inside div displayContent. Instead it makes
// the current page blank
}
});
Looks like this is happening because of " $ is not defined " error(which i see in firefox debugger). This is happening because of inclusion of below javascript file because if i comment out this file i dont get this error in firefox debugger and page gets displayed correctly. But i can not comment out this file because i need it for text rich editor.
I am not getting why i am getting this error though same tiny_mce.js is working in other jsp files? Is there any relation of this with loading the html content thru ajax?
<script type="text/javascript" src='<s:url value="/script/tinymce/jscripts/tiny_mce/tiny_mce.js"/>'></script>
jQuery has a noConflict mode, which will allow you to use a different shortcut for calling jQuery functions and leave '$' for other frameworks.
http://api.jquery.com/jQuery.noConflict/
First of all include jquery in your project and secondly include tinymce like this.
<script type="text/javascript" src="/script/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
Is it possible to "redirect" users from a subpage ie. index.htm#sub-page to index.htm#home with the mobileinit function?
$(document).bind("mobileinit", function(){
$.mobile.changePage("/index.htm#home");
});
And why not
$(document).bind("mobileinit", function(){
document.location.href="whereever";
});
or just
<script>
document.location.href="whereever";
</script>
or even with a metatag?
$.mobile.changePage('#page_two');
This one worked for me.
Yes. If you use redirect, the non-ajax web page must reload more than 100KB of JQuery JS....
I still don't want to, but in some cases it must be done by page reload (to handle the PHP Session carefully).
I have an ajax link in my application:
<head>
<script type="text/javascript">function GoFurther() { ... }</script>
</head>
...
<%= Ajax.ActionLink("Go", "SomeAction", "SomeController", new AjaxOptions() { UpdateTargetId = "someDiv" }) %>
<div id="someDiv"></div>
I want to execute GoFurther() after ajax request completes AND someDiv is filled with its content so that it can bind some events on some buttons that've come from server. OnCompleted and OnSuccess seem to work after the ajax answer is received but before someDiv is filled. So they do not work for me.
To be clear, some div will be filled with some content after ajax call:
<someDiv><input type="button" value="Click" class="someButton" /></someDiv>
GoFurther makes some bindings using $(".someButton").click(...); so it must run once someDiv is completely filled. How can I make sure it runs after someDiv is filled?
OnSuccess is supposed to run after the DOM element has been updated [according to the source code for the Mvc Ajax Helpers - see OnComplete method]. Is there a particular problem that is occurring when you use OnSuccess?