<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
// when the document has finished loading, get the data
$(document).ready(GetData());
function GetData() {
$.ajax({
beforSend: function () {
$('#loadingDiv').css('display', 'block')
},
complete: function () {
$('#loadingDiv').css('display', 'none')
},
type: "GET",
url: "/Integrationsonify/Data.aspx",
data: dataObject,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var header = $("#accordion");
$.each(data, function () {
header.append("<a href='javascript:toggleDiv();'>" + this.Name + " </a>", "<div id='myContent' style='display:none'>" + "<ul>", "<li>" + this.Id + "</li>", "<li>" + this.SName + "</li>", "</ul>" + "</div");
});
},
error: function () {
alert("There was an error while rendering the page. Please contact the Admin for details");
}
});
}
function toggleDiv() {
$("#myContent").toggle();
}
</script>
<div id="loadingDiv" style="display: block;">
hi
</div>
<div id="accordion">
</div>
I am unable to toggle the myContent div..Is it because its created in ajax call?? The div is displayed but if I do a view source for the page I cannot see any data inside my accordion div..but on ui side in the browser I can atleast see the data..Thanks I am very sorry, I know its a very basic question but I need to find my way out of this very soon now so please guide me...
Use beforeSend instead of beforSend. And you should use hide() and show() to hide/show your div, it's clearer.
EDIT :
I don't know what data you are expecting, and as such I can't really help you, but try debugging it this way :
if you are in chrome, right-click anywhere on your page and click on "inspect this element" (or smthg like that)
if you are in firefox, download firebug extension
if you are in IE, download one of the previous browsers
You will find some ways of debugging js with this tools on the internet, and it will be really helpful if you do a lot of js.
Just an advice, try to insert HTML this way when you use jQuery, it's far more readable, and you can debug it :
header.append(
$('<a/>').click(function() {
toggleDiv();
return false;
}),
$('<div id="myContent"/>').hide().append(
$('<ul/>').append(
$('<li/>').text(this.Id),
$('<li/>').text(this.SName)
)
)
);
EDIT 2 :
Sorry, I didn't really think it through, it should be :
$('<a/>').click(function() {
toggleDiv($(this));
return false;
})
And in your toggleDiv function :
function toggleDiv ($elem) {
$elem.next().toggle();
}
I think this will work
EDIT 3 :
Of course you should put $('<div class="myContent"/>') because HTML specifications forbid multiple elements with the same id. then, your selector becomes $('.myContent') and returns multiple elements
I just replaces (,) with (+) and it started working ..weird!!!
Related
I currently load a html page into a <DIV> in my page. using this code
$.ajax({
url: 'myApi.php?user=' + user + '&url='+ URL2add,
success: function(html) {
var newHTML = "<object id='webloader' data='" + html + "'></object>";
$("#exweb").fadeOut(500, function () {
$("#exweb").html(newHTML).fadeIn(5000, function() {
alert("done");
});
});
}
});
So i want to do a check or preferably get a alert once that page loaded changes. which is in the data tag that comes from the html coining back from the ajax call.
I have tried document.getElementsByTagName
I know there has to be a way to get the new data info in that object .
i would prefer an alert each time the page changes from what comes back from the ajax call
i have updated the code like this...
$(document).on('contentchanged', '#exweb', function() {
alert('WOO?');
});
$.ajax({
url: 'Api.php?user=' + user + '&url='+ URL2add,
success: function(html) {
var newHTML = "<object id='webloader' data='" + html + "'></object>";
$("#exweb").fadeOut(50, function () {
$("#exweb").html(newHTML).fadeIn(50, function() {
$('#exweb').trigger('contentchanged');
});
});
}
});
But this is only working on initial change
i need to know when that page changes again.. say if someone clicks on a link that will change the page in DIV or if its a redirect page.
i want to know whenever that page changes to something after i loaded it from my ajax call
should it not be as easy as getting the information between data=""
<object id="webloader" data="http://google.com"></object>
and how do i get back that info? i have tried document.getElementsByTagName
you can do something like this after ajax.
$.ajax({...}).done(function() {
alert('page loaded');
});
$.ajax({/* your AJAX */}).done(function() {
alert(/*your text*/"page loaded!");
});
I think you could try this $("div").load("your_url.php?parameters"); the page you want to load could have the following <body onload="alert('Page Loaded')">
Update:- if you dont have the access of the webpage then use this $("div").load("your_url.php?parameters",function(){alert("Page loaded")});
I have created an unordered list just like in this example - DirectionAwareHoverEffect .
Because I may have a lot of content, I decided to automate the markup. I included the content in a JSON file. The file is loaded using the following code.
$.ajax({
//cache: false,
url: "../content/"+"benefits.json",
dataType: "json",
success: function(data) {
var rows = data.rows;
var item = '<ul id="da-thumbs" class="da-thumbs">';
$.each(rows, function(idx, obj) {
item += '<li><a class="hvr-float"><img src="' + obj.image + '" /><div><span>' + obj.title + '</span></div></a></li>';
});
item += '</ul>';
$("#benefits-container").html(item);
}
});
However after having done so, the JS effect no longer works and I don't see any errors when I use the debugging tool.
The JS effect for the DirectionAwareHoverEffect (according to the tutorial) is done using this code
$('#da-thumbs > li ').each( function() {
$(this).hoverdir({
hoverDelay : 0
});
} );
Of course, this code calls its own library given in the source code.
I included the content loading function in the $(window).load() function and the JS effect in the $(document).ready() function. But I do not get any effect.
Any help will be much appreciated.
You either need to use delegation like on() or you need to call the plugin after the ajax call and the appending of the elements.
So, either, after this line
$("#benefits-container").html(item);
do
$('#da-thumbs > li ').each( function() {
$(this).hoverdir({
hoverDelay : 0
});
} );
or try and see if you can delegate like
$(document).on('hoverdir', '#da-thumbs > li', function(){
return {hoverDelay : 0}
}));
$('#da-thumbs > li ').each( function() {
} );
Note, above delegate suggestion may not be %100 correct as I am not sure how to bind to custom events(and can't look it up right now, sorry :) ).
How to get href value, in such situation?
I'm using jQuery and pure JS on my page;
ololoText
<script type="text/javascript">
function asAjaxCall(elem) {
var link = elem.getThatLinkSomehow(); //how to get "href"??
$.ajax({
type: "Get",
url: link,
success: function (response) {
$("#controlsContainer").empty();
$("#controlsContainer").append(response);
},
error: function (e) {
alert('Error: ' + e);
}
});
}
</script>
It is stored in elem.href.
But you should not use <a> in this case - after your callback is done or if user tries middle-button click new page with useless address will be opened. Use simple <div> instead. Or at least stop event propagation.
In Jquery you can use .attr() like so:
$(elem).attr("href");
or in plain javascript you can use .getAttribute():
elem.getAttribute('href')
FIDDLE
I have a following javascript function mixed with MVC controller actions calls:
var loadPartialChapterAfterAnswer = function () {
$.ajax({
url: '#Url.Action("IsAuthenticated", "Story")',
type: "POST",
success: function(data) {
var isAuthenticated = data;
if (isAuthenticated) {
if ('#Model.IsPersonality' == 'True') {
loadPartialChapter();
} else {
$("#chapterContainer").load('#Url.Action("GetNextQuestion", "Story")' + '?storyId=' + '#Model.Id', function () {
selectedCounter = 0;
showOnlyOneQuestion();
});
}
} else {
window.location.href = '#Url.Action("RedirectToHomeRoute", "Home")';
}
},
error: function() {
alert("Error");
}
});
};
Every time I select one checkbox on my page(view) this function is called. Code works great in all browsers except in IE. In IE the ajax url #Url.Action("IsAuthenticated", "Story") is called OK every time, but the other controller action '#Url.Action("GetNextQuestion", "Story")' + '?storyId=' + '#Model.Id' is called only when the IE's browser debugger is turned on. When IE's debugger window is off this second MVC action is never called.
Any help is highly appreciated!
SOLUTION
I added at the beginning of my page this code:
<script>
$.ajaxSetup({
cache: false
});
</script>
and now it works! Thanks all for your effort.
I read something about IE having issues with JQuery load function
Try to replace it with regular $.ajax with cache: false option hopefully it will resolve the issue.
Check this topic
Add controller to this: #Url.Action("GetNextQuestion")'
Without controller specified it place controller which return view last.
Hi I asked before on how to load a div's content (A url) by clicking a button and not on page load before and I got this code as an answer:
<script type="text/javascript">
function toggleDiv(id){
if ($('#' + id).html() == '') {
$.ajax({
url: 'api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=SOMETHING&from=en&to=de&text=Hello', // your url to microsoft translator
success: function(data) {
$('#' + id).html(data);
},
error: function() {
$('#' + id).html('The resource could not be loaded');
}
});
}
$('#' + id).toggle(); // Toggle div visibility
}
</script>
Show/Hide Value
<div id="a" style="display:none"></div>
First of all it doesn't work correctly and always show "The resource could not be loaded" if you put a txt link like (http://knowpersia.com/a.txt) it doesn't work either.
Secondly the Show/Hide Value link uses a href=# and onclick system to work. When I use it on my website it gets back to the homepage when I click it. Is there a way to change it to something like:
Show/Hide Value
Thanks
You have to pass an id to the toggleDiv() function, and you're passing a collection of objects -> toggleDiv('a') // Nop.
Also, if you're using jQuery, I suggest you get rid of that ugly inline code. Then, you can pass jQuery objects into your function:
Show/Hide Value
<div id="content"></div>
.
var toggleDiv = function($el) {
if ($el.empty()) { // You can just use `empty()`
$.ajax({
url : 'api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=SOMETHING&from=en&to=de&text=Hello', // your url to microsoft translator
success : function (data) {
$el.html(data);
},
error : function () {
$el.html('The resource could not be loaded');
}
});
}
$el.toggle(); // Toggle div visibility
};
$('#link').click(function(){ toggleDiv($('#content')); });