Get dynamic AJAX URL with Jquery "ajaxSend" - javascript

If you go to this website: http://www.w3schools.com/ajax/
You wil see an example where on the click of a button an ajax call is made to this URL: /ajax/ajax_info.txt
You can see the request in console. I'm trying to get this URL with Jquery like this:
$( document ).ready(function() {
$(document).ajaxSend(function(evt, request, settings) {
alert("Starting request at " + settings.url + ".");
});
});
The problem is that it is not alerting anything. Why is that? I'm testing this in two ways, first: implementing the jquery library and code in the console and second: scraping with PHP and injecting the code. Neither method is working. So how can I get the last URL?

The event being fired on the page you have listed is a jquery ajax event - from the jquery docs.
Description: Attach a function to be executed before an Ajax request
is sent. This is an Ajax Event.
The page you are trying to test the code on is using plain ol' javascript and not jquery, therefore, the ajax event is never fired, and the ajaxSend function is never triggered.
You would need to get the data via a jquery ajax call to get the correct functionality.

Related

Program does not recognize .modal("show") function after appending HTML to page

I am writing a program where a click event handler fires an ajax request to my node server, which then renders info inside of a handlebars partial and sends it back to the client (res.render("partials/scraped-article", data);). The client-side javascript appends this html to the document and shows a modal using the bootstrap .modal("show") function. The program shows the modal the first time the click event handler gets fired, but does not recognize the .modal("show") function afterwards. Is there a way to fix this?
Client-Side Javascript:
$(document).on("click", "#scrape-options li", function(){
var choice = $(this).text();
var request;
if(choice === "website1")
request = "/scrape/website1";
else
request = "/scrape/website2";
$.ajax({
type: "GET",
url: request
}).then(function(response){
$(".news-article").remove();
$("footer").append(response);
$('.news-article-img').each(function(i, element){
$(this).css({'height': ($(this).next().height() + 'px')});
});
$("footer h1").addClass("display-none");
$("#articles-added").text($(".news-article").length);
$(".modal").modal("show");
});
});
It turns out that even if you are rendering a partial, the response sent from the server will be embedded in the default template (i.e. it will be a full HTML document). If you simply add this to the DOM, you will be inserting the script for Bootstrap a second time, which will do weird things like disable the $(...).modal function. Instead, you should use the array.split method to extract the body HTML and then append this to the DOM.

How to Make Jquery .load() function work once and Ajax request once?

When the page is loaded contents from the PHP file has to load, for that i am using JQuery .load() function, content is successfully loading but it keep loading, i can see it from chrome Developer tools. I have to load content only once.
var userName =$('#dT').data('uname');
$('#dT').load('load_table.php', {userName:userName});
So i tried another Jquery ajax method that also same as loads the contents continuously..
$(document).ready(function(){
function loadTable(){
var userName =$('#dT').data('uname');
$.ajax({
url:'load_table.php',
data:{'userName':userName},
success: function(results){
$('#dT').html(results);
setTimeout(loadTable,5000);
}
});
}
loadTable();
});
Above setTimeout function not working, any way to load content from PHP file only once?
I think in your first load attempt you are loading the html with the exact same code, so it will keep on loading itself infinity.
Doing it with ajax is much better, however if I were you I would move the settimeout outside the function itself. Currently it will only trigger if the initial call was successful, you want it to run every 5 seconds I am guessing. So where you call it the first time at the bottom, instead of just
loadTable();
You have:
setTimeout(loadTable,5000);
Now you do not need to do the settimeout in the success function.

jQuery document.ready with ajax $.post

So I have a function that uses jQuery's $.post mechanism to fill in a div with contents from another page. I want to fire this method in the very beginning to show the content in the div right away. To do this I call the method in the document.ready script.
This is how the code looks:
function OnloadFunction()
{
alert("HELP!");
var url = "<?php echo $this->url('public', array('id'=>'ajax')); ?>";
$.post(url, {contentVar:cv}, function(data){
$("#shoppingCart").load(data).show();
});
}
//when document loads, do the following
$(document).ready(function(){
OnloadFunction();
})
When I load the page, the alert saying "HELP!" shows up, but the $.post function is not making any difference and the div is not filled with the contents from the url.
P.S This shouldn't make a difference but I am using ZF2 (hence the url('public', array('id'=>'ajax')); ?>)
Any help would be appreciated :)
Thanks!
You need to use .html() instead of .load(), assuming data is html content
$("#shoppingCart").html(data)
The load function takes a URL as an argument, makes an XHR request for it, and then populates the element with the response.
Presumably data is not a URL.

Duplicate javascripts are getting loaded ajax

I'm developing a web based document management for my final year project. The user interacts with only one page and the respective pages will be called using AJAX when the user click the respective tabs (Used tabs for navigation).
Due to multiple user levels (admin, managers, etc.) I've put the javascripts into the correspondent web pages.
When user requests the user request everythings work perfectly except some situations where some functions are triggered multiple times. I found the problem. It is each time the user clicks a tab it loads same scripts as new instance and both of them will be triggered when I call a function.
to load the content I tired
.load and $.ajax(); non of them address the issue.
I tried to put all into the main page at that time my jQueryUI does not work. I tired
$(document).load('click', $('#tab_root li'), function(){});
Same issue remain.
Can anyone help me out this issue?
--Edit--
$(function){
$(document).on('click','#tabs',function(e){
getAjax($(this))
});
}
//method to load via AJAX
function getAjax(lst){
var cont = $(lst).text();
$.ajax({
url:'../MainPageAjaxSupport',
data: {
"cont":cont
},
error: function(request, status, error){
if(status==404){
$('#ajax_body').html("The requested page is not found. Please try again shortly");
}
},
success: function(data){
$('#ajax_body').html(data);
},
});
}
You can't undo JavaScript after it has been executed by simply unloading the file or removing the script element.
The best solution would probably be to set a variable in each JavaScript file you include in your ajax data and include them from an online inline JavaScript inside the ajax data along with a conditional like such:
<script>
if(!tab1Var) $.getScript("filename");
<script>
Older Solutions
You can manually unbind each event before setting them with off.
$(function){
$('#tabs').off('click');
$('#tabs').on('click',function(e){
getAjax($(this));
});
}
Alternatively you can initialize a global variable (eventsBound1=false) for each tab in the main html:
$(function){
if(!eventsBound1){
$('#tabs').on('click', function(e){
getAjax($(this));
});
eventsBound1 = true;
}
}
The tabs click event is only an example you have to do this for each time you bind an event in the scripts that are being reloaded.
if all the events are bound to things inside ajax_body, a final thing you can try is:
success: function(data){
$('#ajax_body').empty();
$('#ajax_body').html(data);
},
You have bind an event click on 'document' so getAjax() only replace the '#ajax_body' not the 'document'.
This means old event is still attached to the 'document' all you need is to unbind event by using $(document).off('click'); or change 'document' to other elements.

JQuery Tabs: How to display a 'Loading...' message' on waiting an AJAX HTTP request response?

I am using jQuery UI 1.8.12 and I am implementing Content via AJAX tabs. I would like to show a "Loading..." message in the meantime the content is loaded (then, of course, the content retrieved with the AJAX HTTP request is displayed).
How can I do that?
Maybe I can use the tabTemplate option but I don't know how to accomplish how I can do that.
P.S.: I would like to do not use the solution used in this question but I would like to add dynamically (in the DOM) the "Loading..." message via jQuery.
You could use BlockUI. Then it's just a case of adding this to your script:
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
Every time an AJAX request starts, the UI will be blocked by the loading message, and when it stops, the block will fade out and the UI will be usable again.
Try:
$('#example').tabs({
select: function(event, ui) {
if ($(ui.panel).text() == '')
$(ui.panel).html('Loading...');
return true;
},
});

Categories