jquery select2 after ajax not working anymore - javascript

I have a simple select2 control on my site placed in a div. When the site loads, everything works fine. However, if the html content of the div "simpleDiv", where the Select2 is placed, is loaded with Ajax, the Select2 is not showing the results anymore when triggered.
That means, in this case the Select2 data is got from the Server, but never shown in the Select2.
And this all happens just when the "simpleDiv" html content is loaded with Ajax. Otherwise, everything works fine.
Can anyone help, please?
<div id='simpleDiv'>
<input type="hidden" id="MedikamentID" name="MedikamentID" class="fixed-width4" />
</div>
<script>
$('#MedikamentID').select2({
placeholder: "[Medikament]",
allowClear: true,
minimumInputLength: 2,
ajax: {
url: "/Medikament/List",
dataType: 'json',
data: function (term, page) {
return {
query: term
};
},
results: function (data, page) {
return { results: data };
}
}
});
</script>

Whenever you change things using .html() or .innerHTML, essentially, the DOM gets reconstructed and all the javascript events and properties attached to them is lost. But the fix is simple. Just call Select 2 again after you finished inserting the new HTML. So something like:
$.ajax("example.php").done(function(data){
$("#simpleDiv").html(data)
$("#MedikamentID").select2(...) //rebuild select2
})
I attached a jsfiddle to illustrate this:
http://jsfiddle.net/HT3rP/1/

If I got your question correct, you may be having a similar problem related to this stackoverflow problem
You could try something like this
$(document).on("ready", "#MedikamentID", function () {
$(this).select2({
// options go here
});
});

Related

Display tinymce textarea dynamically

I have a drop down list that when a selection is made will insert a bunch of elements within a form to the DOM using ajax, within this form I have textareas that I wish to be TinyMCE textareas.
I have this inside of my HTML head:
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
This is the ajax function that I use to add a bunch of elements, this is working how I need it to.
function getSecFacility(facsecid, facid) {
$("#new_section_form").hide();
$.ajax({
type: "POST",
url: "facility_section_information.php",
data: 'facility_section_id='+facsecid+'&facility_id='+facid,
success: function(data){
$("#selected_fac_section").html(data);
}
});
//loadTinyMCEEditor();
};
I have other textareas on my page that are not inserted by ajax and they display as WYSIWYG editors no problem, the issue is when I am adding in new elements.
I have checked several other questions trying to find an "answer" but nothing is working.
I tried to make a function called loadTinyMCEEditor() that I was calling within my getSecFacility() function after my ajax call. Within this function I was trying to reinitialize tinyMCE for these newly added textareas.
loadTinyMCEEditor() looks like this:
function loadTinyMCEEditor() {
tinyMCE.init({
selector: "textarea"
});
tinyMCE.execCommand('mceAddControl', false, 'test'); //test is the class name I gave this textarea
//tinyMCE.execCommand('mceAddControl', true, 'test'); //tried setting the bool to true..even tried without these lines
}
No matter what I try I cannot seem to get it to work with newly inserted textareas, How can I get these textareas to be TinyMCE textareas?
EDIT
I can now view the editor to my newly added textareas after I make a selection from my drop down list. However this only works once, if I make a second selection the new textareas only display as plain textareas. Here is what I changed in my ajax function:
function getFacSecFacility(facsecid, facid) {
$("#new_section_form").hide();
$.ajax({
type: "POST",
url: "facility_section_information.php",
data: 'facility_section_id='+facsecid+'&facility_id='+facid,
success: function(data){
$("#selected_fac_section").html(data);
loadTinyMCEEditor();
}
});
};
function loadTinyMCEEditor() {
tinymce.init({
selector: "textarea"
});
}
So after I make a selection this ajax function will run and display new textareas + other form information and I re-initialize the tinymce editors but for some reason this is only working once.
What should I change/do so that I can make multiple selection from my drop down list so that each time the new textareas will display as tinymce textareas?
You need to call tinyMCE.activeEditor.setContent with your incoming ajax-content. In your callback try:
tinyMCE.activeEditor.setContent(data);
Greetings
If you want to convert #selected_fac_section to a tinymce editor, you should call the init function of tinymce in your success function. Ajax calls are async unless you define otherwise. So, if you try to initialize the textarea outside of the ajax call, there still won't be a textarea to decorate with tinymce because the ajax call hasn't been finished yet. Use the id value for the selector this time and you should be good to go.
I am writing this from my phone so writing code here is a pain. Sorry for that. Just wanted to help you out quickly after seing you comment on my another answer. Will check this thread first thing in the morning to make sure if you need more help.

Processing a PHP request from an ajax-driven Fancybox element on the same page

I've been working on a little project that involves collecting/processing search results and I thought you guys may be able to lend a hand. I have a small script that takes a search value from a search input, processes it via PHP and then collects and inserts the results in a fancybox via JS. Thus far, all is going well but I can't seem to work out the next bit.
I can't manage to interact with any elements in the fancy box because it will reload the page (for example, previous and next buttons or search input). How would you go about loading new content or form inputs into a fancybox on the same page instance using AJAX?
HTML:
<form action="search.php" method="post" name="search" id="search">
<input size="35" value="" placeholder="Search" name="search" id="result" autocomplete="off">
<button id="check" data-fancybox-type="ajax" href="search/search.php" id="check">Search</button>
Script:
jQuery(document).ready(function(submit) {
$('#check').on("click", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
cache: false,
url: "search.php",
data: $("#result").serializeArray(),
success: function (data) {
// on success, post returned data in fancybox
$.fancybox(data, {
// fancybox API options
fitToView: true,
openEffect: 'fade',
closeEffect: 'fade'
});
}
});
});
});
The above script is largely basses on this post
Thanks for your ideas!
The fancybox API provides a number of event based callback functions for interacting with the fancybox elements, before, during and after the box is shown or loaded. This allows you a lot of flexibility.
I would use the afterLoad() callback function within the Fancybox2 API.
See this fiddle i put together: Fancybox afterLoad() callback to return a function
This is just my solution, I am still very much a student of js, so I can't say this is the best way, and I welcome feedback or edits.
Basically we will use the afterLoad() API function of fancybox so that upon successful load of the fancybox element driven from your successful $.ajax call a function is returned to then listen to the click event of an element loaded into your fancybox.
$.fancybox(echoData, {
// fancybox API options
fitToView: true,
openEffect: 'fade',
closeEffect: 'fade',
afterLoad: function () {
return fancyUpdateMyWay = function () {
var a = Math.random();
var newHtml = "<h4>UPDATED=" + a + "</h4>";
$("#fancyResult").html(newHtml);
}
}
});
Note: I imagine that you will want to do further ajax calls from within the fancybox results, and here I only demonstrated a simple DOM update from jquery.
try changing your javascript to use 'click' instead of 'on'. this should do it
jQuery(document).ready(function(submit) {
$('#check').click(function (e) {
e.preventDefault();
$.ajax({
....
});
});
});

Why does my JS/JQuery code only work in a web browser's console?

The $(element).scroll(function(){}); function isn't working for me when I put it into a js file but when I enter it into the console (just the scroll func), it works just fine.
I'm trying to do a scrolling pagination.
I've looked through my other js files and the only thing that I think could be conflicting is another one of the files has a $(document).ready(function(){}) but I'm pretty sure that's not the problem. I'm also using Dropkick to make pretty dropdowns but I doubt that's it either.
Here's the code, almost verbatim. It's basic for now until I can figure out how to get it to load.
$('#main').scroll(function(){
if(($('#main').prop('scrollHeight'))==
($('#main').scrollTop()+$(document).height()-10)){
//^there's a strange 10px empty space that needs to be accounted for
$('#loading').show();
$('#main').css('overflow','hidden');
addMore();
}
});
$(document).ready(function(){
addMore();
});
addmore.counter=0;
function addMore(){
$.ajax({
async: 'true',
url: 'http://mywebsite.com/bc/get',
type: 'post',
data: ({'offset':(addmore.counter)}),
success: function(data) {
$('#scrollingpagination').append(data);
$('#loading').hide();
$('#main').css('overflow','scroll');
addmore.counter++;
}
});
}
And here's the HTML (not verbatim, but same idea)
<!--I'm only including the "main" div that shows the content.-->
<div id='main'>
<div id='scrollingpagination'></div>
<div id='loading'></div>
</div>
Thanks guys, I really appreciate it!
try keeping
$('#main').scroll(function(){
......
})
inside document.ready. i think it was called before the dom was ready

jQuery Basic problem

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).

jQuery Ajax Loader

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

Categories