I am trying to load in some text from another page, however I want to prepend it rather than replace.
So at the moment I have:
$('#01-L1-00-Container').load('Page.aspx #Q-01-L1-00');
But '01-L1-00-Container' includes some content I need to keep and cannot overwrite. How do I prepend instead of replace?
You can either do this:
$("#01-L1-00-Container").prepend( $("<div>").load("Page.aspx #Q-01-L1-00"));
Or
$("<div>").load("Page.aspx #Q-01-L1-00", function() {
$("#01-L1-00-Container").prepend($(this).find("#Q-01-L1-00").html());
});
These both work by creating a div in the dom, loading the new page (with ajax) into that div and then prepending the newly created div to the container.
Assuming you don't want to append the data to some other element inside the container, you can't do this with .load alone, but it is easy:
$.get('Page.aspx').done(function (html) {
$(html).find('#Q-01-L1-00').prependTo("#01-L1-00-Container');
});
Try this instead :
$("#01-L1-00-Container").prepend($("<div />").load("URL of Page"));
Hope this will help !!
Related
I Would like to know if there is a possibility to modify an external js file via ajax post, for example:
Into my external js file i've got a variable :
var color;
So i would like my users to be able change the value of this variable by typing the HEX code into an input text form.
So when the type and press submit button to grab this value and post it to external js file and modify the variable.
I want something like this:
var colorVal = $('input').val();
$.post("external-file-js.js", {color: colorVal}, function(result){});
In external js file something like:
var color = $.get(colorVal); // HERE i dont know how to grab the value
$('body').css('background-color',color);
Thank you :)
I need to understand the use case you are intending in order to provide a full answer. If all you are attempting to do is change the background color, why do you need to run an AJAX post at all? Why not just change it?
In extenal.js (which is included in html body):
function changeColor(color) {
$('body').css('background-color',color);
}
Then you bind the following event to the input:
$('input').change(function () {
// Though you may want to perform validation first.
changeColor($(this).val());
});
The only problem is if you need to change it long term, for multiple users. Then you would need to store the value server side (with a post and some type of CRUD system, in which case, check out JSON/JSONP)
It can be done. You would have to use some back-end code to rewrite your JS file. You would then need to remove any binds and use a script to reload your js document on the fly. Here is an example of loading JS on the fly. http://www.philnicholas.com/2009/05/11/reloading-your-javascript-without-reloading-your-page/
I am not sure why you would do this. I would just rework my JS file so I can avoid this mess.
i set my own template and now i want to load a module to the main content div. In the main template file there is this tag {content}. If i browse through my page into this all modules Content is loaded.
Now i want load a module manualy to this div by ajax. So if i click on a Link i want to load it. Somethink like this:
$( document ).ready(function() {
$("#change").click(function() {
$("#content").load('module/mymodule/template/myfile.html.php');
});
});
But i want to load the whole module not only a template file.
What must i do?
Or maybe it is possible to load a Block into this div. I think this is a better solution.
If you want to call a block file within a template then you have to use : {module name="feed.comment"} this code will call comment block of feed module.
In MVC4 applications, I would like to update a panel using AJAX but using jQuery methods instead using AjaxExtensions from MVC.
But my problem is the updatePanelId.
I've seen several people use this to update it when has success:
success: function (response) {
var $target = $("#target");
var $newHtml = response;
$target.replaceWith($newHtml);
}
But when I do this, it forces me to use in every partial view that includes the id="target" at the root level of my razor view, and I guess that's not a good practice; I said this because I've realized when I use AjaxExtensions it doesn't happens, replace the update and it does not remove the panelId. But using jQuery it does.
Any idea to port the AjaxExtensions feature to jQuery?
You can use just:
$("#target").html(response); // it will just update content of the $("#target") container
Use jQuery's .load function. This will load the contents of the URL you specify into the target element. You can optionally specify a selector after the URL in load to only grab part of the target page.
$(function() {
$("#target").load("/MyURL");
});
JavaScript same origin policy applies to this.
I have a simple call to replace the contents of a <div> with those of another HTML file using the .load() function:
$('#content').show().load('01.html');
01.html is in the same folder as this page. But the function isn't being executed. Is there a problem with my code? Or is it that the .load() function won't work until it's being served?
In the latter case, what's a good way to go about testing it?
You'll need to do this instead:
$('#content').load('01.html', function() {
$(this).show();
});
It will show the content after a successful load (under the presumption that content was hidden to start with).
If you're already using jQuery why don't you just go for mocking or simulating ajax requests using jquery-mockjax ?
I get dynamic content with Ajax and i put it in a div, but the problem is that i have diffrent ids for some child divs(from the dynamic content). So i have added selectors for these divs, but as i said they are dynamic loaded and that means they are not visible anywhere before they are loaded(from another file) and inserted into the div. The problem comes when i insert the dynamic content. jQuery can't select these divs :( Is there any possible solution for my problem?
Hmm maybe my explanation is not good so i will speak with code :D
Example:
This is the empty div
<div id="div"></div>
Here is the jQuery code
$(document).ready(function(){
$.get("file.php", function(data){
$("#div").html(data);
$("#somediiv").click(function(){
alert("Yeah");
});
$("#somediv").click(function(){
$.get("otherfile.php", function(data){
$("#div").html(data);
});
});
$("#somediv2").click(function(){
$.get("file.php", function(data){
$("#div").html(data);
});
});
});
});
Everything works until the new content comes. In the new content when the "file.php" is loaded there is a div with id "somediiv" and when i click on it "otherfile.php" is going to be loaded and in the content of this div there is another div with id "somediiv", but when jQuery can't catch the click :(
I think you have to use live(). Or attach the event in the callback of $.get().
You want each dynamically loaded div to also contain the click functionality of the original div? powtac is right, live events will help you. Something like:
$(".someDivClass").live("click",function(){
$.get("yourFile",function(data){
$(this).append(data);
});
});
That's assuming you want to append the data to the div you clicked, that wasn't really specified. Also you have to make sure the returned data contains the div with class "someDivClass".
Live events register for any matching selector plus all future matches (say that were added dynamically)