I have a ColdFusion page with few div tags. I am doing an Ajax submission to populate result set of mxUnit results to another div.
$.ajax({
type: "POST",
url: "myURL.cfm",
data: $dataToPass,
success: function(data) {
$('#testResults').html(data);
}
});
return false;
When the result is displayed in my #testResults div, it messes up all of my css from the left column.
Any suggestions on avoiding this.
It was an issue with the returned html page.
I checked for the returned html page and rendered it in jsFiddle. It had some of its own CSS which was conflicting with mine.
Thanks for all the comments.
Related
I've got a controller that is generating some markup. In the markup there is a link that dynamically adds some content to the page using jQuery ajax.
The content that's added to the page comes from another controller. In that content there's a Drupal form. It renders correctly on the page, but it doesn't submit properly (although it works well if I call it directly - it only fails to submit if it's inserted through AJAX).
So, in summary, controller A renders some markup like this:
<a id="ajax-link">Click here to display the form</a>
<div id="form"></div> <!-- form will be displayed here through AJAX -->
In the javascript, I've got:
$("#ajax-link").on("click", function() {
$.ajax({
url: "/controller-B/get-form",
type: "POST",
dataType: "JSON",
success: function(data) {
$("#form").html(data.output);
}
});
Controller B renders the form like this:
public function get_form() {
$form = \Drupal::formBuilder()->getForm('Drupal\my_module\Form\MyForm');
$output = \Drupal::service('renderer')->render($form);
$data = new \StdClass();
$data->output = $output;
return new JsonResponse($data);
}
So I click on the link, it calls the script, which calls controller B, which generates the form, and the script adds the markup for the form on the page.
It works well, but the form doesn't submit properly.
Looking at the markup that's generated after the form is inserted on the page, it looks like it's the action attribute that's incorrect. It generates something like this:
<form action="form_action_p_pvdeGsVG5zNF_XLGPTvYSKCf43t8qZYSwcfZl2uzM" method="post" id="comment-form" accept-charset="UTF-8" class="comment-form" data-drupal-selector="comment-form">
Any tip would be greatly appreciated!
I try many searches without luck, so I write it here.
How can i in wordpress reload only the sidebar (content) by ID auto every X (sec) without page load?
I.e.
<div id="secondary">Here the Sidebar content and widgets to be auto reloaded every x min.</div>
Thank you.
you can do this with ajax request
look at this
$.ajax({
type: "POST",
url: "packtypeAdd.php",
data: infoPO,
success: function() {
location.reload();
}
});
https://stackoverflow.com/a/8268361/8941806
I'm using Ajax to gather HTML from a webserver, which is then used to populate a div within the app. The HTML populates, however the CSS is ignored and whats displayed is a plain HTML output to the screen instead of the JQuery CSS. Thing is, when I manually enter the HTML into the div and then load up the whole thing works great. Any help is greatly appreciated
Ajax call:
<script type="text/javascript" charset="utf-8">
$(document).bind('pageinit', function(){
$.ajax({
url: "http://www.mydomain.com/getDetails.php",
dataType: 'html',
success: function(text_results){
console.log(text_results);
$('.class-items').append(text_results);
}
});
});
</script>
And the div being populated:
<div data-role="content">
<div class="class-items">
</div>
</div>
I think that jQuery on() might help here:
http://api.jquery.com/on/
I am having no luck in getting a jqueryui dialog to ajax load a form, which inturn submits via ajax.
Everything works upto the point of catching the form that is being submited and instead sending it through an ajax call. Thus the form action is triggered and the browser redirected. The ajax call is never made.
My code is as follows
$(document).ready(function() {
$('.viewOrder').click(function() {
$('#displayOrder').load(this.href, [], function() {
console.log("landed here");
$('#blah').click(function() {
console.log("submiting the form via ajax");
$.ajax({
url: "/ajax/orderupdate",
type: "GET",
data: data,
cache: false,
//success
success: function (data) {
console.log("worked:");
}
});
return false;
});
});
return false;
});
});
.viewOrder is the a href that is ajax loaded. This works fine.
I have read many similar questions on here and it seems load() does not execute scripts that are embeded in the return html, but my return code is pure html no scripts. Any ideas?
IMHO you should try and capture the submit instead of the click, that way you prevent submits done by keyboard aswell, and it might even fix your problem.
The events are bound on page load. At page load the form you are binding the click event does not exist. I use the livequery plugin but they added Live to jquery 4 which you can also use(i had some issues with IE so i went back to livequery)
So load livequery with your scripts http://docs.jquery.com/Plugins/livequery
and change
$('#orderUpdate').submit(function() {
to
$("#orderUpdate").livequery("submit", function() {
I'm trying to load some content into a table using insertAfter(), but the content I'm trying to load is html (output from an asp.net page) that I'm getting using AJAX.Load().
From my understanding, insertAfter() works like this: $("htmlcodehere").insertAfter("selector"). AJAX.Load() works like this: $("selector").load("Html/file"). How would I merge these two so that it loads the html (perhaps without adding it to any existing element?) then inserts that data using insertAfter()?
Bara
I try to explain me better with another answer:
$(document).ready(function(){ //If you want to load it immediately. Anyway, you execute this code after an event
$.get("file.html", //Make an ajax request to this file
function(data){ //data is the file.html content
$("table").append(data); //Or other operations like this to inject the html content into the table
})
})
You can use the $.get or $.post to get the html and add a function on success that uses the insertAfter function to inject the code into the table
You could use JQuery's $.get like this:
$.get("html/file", {}, function(obj) {
htmlData = obj.data;
$(htmlData).insertAfter("selector");
}, "html");
Thanks to some help from mck89, this is what I ended up using:
$.ajax({
url: "/test2.html",
cache: false,
success: function(data, data2) {
if (data2 == "success")
{
$(data).hide().insertAfter(row);
}
}
});
Thanks a lot for the help!
Bara