I have a div within a cshtml file that shows the view from another action, as follows:
<div id="tabs-1ua">
#Html.Action("Index", "Admin")
</div>
This loads fine on initial page load. In a separate js file, I have an event catcher for the div as follows:
$("a[href='#tabs-1ua']").click(function (event, ui) {
$("#tabs-1ua").val("#Html.Action('Index', 'Admin')");
});
As can be seen above, the val parameter is the same Razor code that appears in the original div. However, this doesn't get me the desired outcome of the action being performed each time that div event is activated. What is the correct way to activate the razor code each time the event occurs? I made sure the event is captured by testing with alerts, so that's not the issue.
Thank you.
You can try to load the desired content asynchronously using ajax, doing something like this:
$("a[href='#tabs-1ua']").click(function (event, ui) {
$.ajax({
url: "/Admin/Index",
data: {}
}).done(function (htmlResponse) {
$("#tabs-1ua").html(htmlResponse)
});
});
This loads the result of the action inside the div with id=tabs-1ua.
Maybe this is a simpler approach, let me know if i can be of further help
Related
So, I have the following code:
$(document).ready(function(){
//Retrieve menu html
$.get('/modules/menu.php', function(data) {
//Load menu html
$('main#main').prepend(data);
});
//Initialize Menu
menuInit();
$('#menuToggle').click(function() {
$('#main_menu').fadeToggle();
});
});
menuInit() successfully modifies DOM elements when included in the html directly instead of using $.get(),so the intialization has no issues, however, when using ajax, the intialization of the menu starts before the DOM elements are fully loaded.
I've made a little research and .prepend() does not support callbacks, so not an option.
Surrounding menuInit() with a setTimeOut() with 100 ms works, but it will most certainly fail with slow connections, I need something more dynamic.
Just put the rest of the code inside the callback so it executes after the data has been added to the page:
$(document).ready(function(){
//Retrieve menu html
$.get('/modules/menu.php', function(data) {
//Load menu html
$('main#main').prepend(data);
//Initialize Menu
menuInit();
$('#menuToggle').click(function() {
$('#main_menu').fadeToggle();
});
});
});
My jQuery script looks something like (the form is submitting files to upload):
$("#addMore").click(function() {
$("#progForm").submit();
$("#upTar").css("display","block");
$("#title").val("");$("#obj").val("");$("#theory").val(""); $("#code").val("");$("#output").val("");$("#conc").val("");
});
I want to delay the execution of the code beginning from $("#upTar") until the form submission is completed (that is the files are uploaded and PHP script has responded).
Edit
#upTar is an iframe and the target of the form submission. I want #upTar to be displayed only after its content has been generated from the form action script.
Thanks!
Code after solution
$("#addMore").click(function() {
$("#progForm").submit();
$('#upTar').load(function() {
$("#upTar").css("display","block");
$("#title, #obj, #theory, #code, #output, #conc").val("");
});
});
There's no way to make JavaScript in a browser "wait" for anything. In this case, there are a couple things you could do:
You could put the CSS changes etc. in a "load" event handler for the target <iframe>
$('#upTar').load(function() {
$("#upTar").css("display","block");
$("#title, #obj, #theory, #code, #output, #conc").val("");
}
You could put code in the response to the form POST that executes from the <iframe> itself.
$(function() {
(function($) {
$("#upTar").css("display","block");
$("#title, #obj, #theory, #code, #output, #conc").val("");
})(window.parent.$);
});
What you are doing right now is submitting the HTML form and loading whatever page you have listed in the "action" attribute of the form. The lower part of the javascript function will never actually execute since the browser will be directed to the new page. Here's what you want, a form that submits via ajax and then clears the form:
$("#addMore").click(function() {
var formData = $("#progForm").serialize();
var url = $("#progForm").attr("action");
$.get(url, formData, function(){
$("#upTar").css("display","block");
$("#title").val("");
$("#obj").val("");
$("#theory").val("");
$("#code").val("");
$("#output").val("");
$("#conc").val("");
});
});
Were you looking for something like that?
If you load jQuery inside the iframe you could use the following function to control parent elements with this selector:
$("#myparentid", top.document);
In essence, you could run a function inside the iFrame that waits for a refresh at which point you can run any function you wish with the top.document selector.
I am trying to call some script in a newly ajax loaded tab but it looks like the script blocks inside the tab are not being processed at all so when I go to call a function in the tab the function cannot be found. Is there a way to properly load the tab content such that the scripts are interpreted?
I have tried playing with the ajax options but that doesn't seem to help.
$("#tabs").tabs({
ajaxOptions: {
error: function (xhr, status, index, anchor) {
$(anchor.hash).html("This tab not yet built, sorry bub.");
},
dataType: 'html'
},
spinner: 'Loading tabs...',
});
In the tabs I have something like
<script type="text/javascript">
function SetupTab(){
alert('loaded');
}
</script>
but
$("#tabs").bind("tabsshow", function(event, ui){ SetupTab();});
cannot find SetupTab. Even if I allow the tab to load and then attempt to call SetupTab from firebug it can't be found.
if you try and bind any events/actions to a html element that does not exist yet i.e.
$(document).ready(function(){
//apply elemnt bindings here
});
when you do load the elements using ajax the elements will not take on the bindings you supplied on document ready because they did not exist at that point.
Add a call back to your ajax call to then bind any events/functions to ur new html elements, then this should work.
I think thats what you was reffering to.
EDIT: try this.
$("#tabs").bind("tabsshow", function(event, ui){ alert('loaded');});
EDIT AGAIN: you could try this.
make sure the page you are loading just contains the script itself and not the script tags and then use:
//lets say the data returned from your ajax call:
data = function SetupTab(){alert('loaded');}
eval(data);
then you could call that function no problem.
EDIT 3RD TIME: if you cant remove the script tags from the page your load you could regex the html. with this pattern.
pattern = /<script\b[^>]*>(.*?)</script>/i
urscript = data.match(pattern);
eval(urscript[1]);
this should work.
What you can do is also to detach your ajax call from the element (do just $.getScript for example).
Your loading tabs function should do something like this:
<div class="tabs" onclick="$.getScript('myScript.php?index='+$(this).index(#tabs"))">...
Then the server-side script should return something like this:
echo '
$("#tabs").eq('.$_GET['index'].')html("'.$myHTML.'");
/* Then the rest of your JS script (what you had in your HTML output) */
';
I have a page that display some data. It is loaded from a database using php and mysql, I use zend framework to handle all this.
On this page I have two things that use jquery. one is a paginator and the other is a thumps up function.
the paginator works fine. It receives the data as json and applys it to the view. all the functions that I need to handle this are located in one js file. In this file I listen for clicks...
$(document).ready(function() {
$("a#next").click(getProgramms);
$("a#previous").click(getProgramms);
$("a#page").each(function() {
$(this).click(getProgramms);
});
});
Now I have a problem with the thumps up function. It is located in another js file. Everytime the thumbs up button is clicked the script should just alert "click". actually when you click before you use the paginator a "click" appears, but when you do it after nothing happens. but the html in the dom inspector appears to be the same.
in my thumpsup.js I just have
$(document).ready(function() {
$("a.tp").click(thumpsUp);
});
function thumpsUp() {
alert("click");
}
I do not know where the problem is. maybe the js files are interferring each other!?
function thumpsUp() {
var url = window.location.hostname + '/programme/thumpsup/id/'
+ $(this).attr('page');
$.post(url, {
"format" : "json"
}, function(data) {
alert(data);
}, 'html');
return false;
}
I'm guessing the paginator is rewriting your elements and they are losing their click event binding. Try using live() for event binding instead:
$(document).ready(function() {
$("a.tp").live('click',thumpsUp);
});
function thumpsUp() {
alert("click");
}
You might have the Script files (which are included in your mark up) the wrong way round. That's the only solution I can think of...
I'm pretty sure you can get away with two $(document).ready()'s (even if it is frowned upon).
Greetings,
I would like to know what should I do to make appear a ajax loader...
actually I am calling a function in ajax... everything is going well
here is how it's being done
$('#txtEmail').blur(function()
{
$.post("ajaxAvailability.aspx",{ email:$(this).val() } ,function(data)
{
if(data=='false')
...
Now I would like to have a loader so I done it like this:
$('#loader').ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
This should be working? what is happening is that I am getting an exception inside the jquery.js....
-thanks in advance
I usually do this in my code:
$('#txtEmail').blur(function(){
var value = $(this).val();
//display loader image
$("#indicator").html("<img src='PATH/loading.gif' alt='' /> Sending...").show();
$.post(URL,
{ email:value },
function(data) {
$("#indicator").empty().hide();
//...
});
)};
In above code, the animated image will appear inside DOM element with id="indicator". After AJAX request completed, I emptied the container, then hide it. Adjust this according to your page element.
My another code use jQuery blockUI, usually when submitting form, to prevent double submit. Check the web for the usage example.
Greetings, for everyone
The solution for this issue is correct the jquery-1.3.2-vsdoc2.js file
on the ajax function there are f parameter, this should be replaced into callback