I have no issue retrieving data for Bootstrap 5 Popover via AJAX. The issue comes, if that response contains script / function. It seems it is not allowing function inside popover object to work as it should be. Even I reinitiate jquery inside that ajax response.
For instance, I have lines of checkbox inside that ajax response, and I want to select all by clicking an object like "Check All".
Do you guys have that same issue?
Related
situation:
form1.html has a button
clicking that button calls $.mobile.changePage('../site3/form2.html');
no problem here. all is as expected and the page is loaded. let's call that form2.html
form2.html has 2 sections:
(1) #SiteForm and
(2) #SiteSearched
clicking a button on #SiteForm should call $.mobile.changePage('../site3/form2.html#SiteSearched');
now here's the weird part.
if I load the page form2.html directly and press the button, it works and I see #SiteSearched JQM page.
but, if I start from form1.html, click the button to get to form2.html#SiteForm, then click the button, everything in the attached function executes, except the line calling $.mobile.changePage('../site3/form2.html#SiteSearched');
I know that part is loaded by AJAX by wouldn't the changePage command work?
(note: Form1 may have data filled into the form that I don't want to lose. Form2.html was meant to do a search and throw back the result to Form1 somehow, which is why I am doing things this way.)
You should read official jQuery Mobile documentation before posting here, everything is explained there, but let me give you a short explanation.
jQuery Mobile has two template solutions, one is multi page and second one is multi html. You already know that because you are mixing them. But, what you don't know is (from the perspective of AJAX page handling):
Only first HTML page is fully loaded into the DOM, everything is loaded, including the HEAD content. So if initial HTML page has several data-role="page" <div> containers, every one will load into the DOM.
But, every subsequent page is loaded only partially. Basically if you second, third ... page has more then one data-role="page" div containers only first one will load into the <DOM>. jQuery Mobile will discard everything else.
So in your case, if form2.html has:
(1) #SiteForm and
(2) #SiteSearched
jQuery Mobile will load only #SiteForm, #SiteSearched will get discarded.
Basically this line will not work:
$.mobile.changePage('../site3/form2.html#SiteSearched');
You can't nit pick specific pages in subsequent pages, as I told you. You can only use this:
$.mobile.changePage('../site3/form2.html');
And jQuery Mobile will show you first data-role="page" occurrence inside form2.html page.
Read more about this here and here.
I have a jqGrid loaded by AJAX inside a jQuery UI Dialog. Everything is working fine, except the Dialog which is not closing. When I click in both buttons, it reaches the alerts, but the Dialog is not being closed.
buttons: {
'Confirm': function() {
alert('OK Confirm');
$('#test-grid').dialog('close');
},
'Cancelar': function() {
alert('OK Cancel');
$(this).dialog('close');
}
}
I've tried with $('#test-grid').dialog('close') and $(this).dialog('close'), but no one works. If I remove the jqGrid loaded by AJAX, everything works fine.
The error console on Firefox and Chrome is empty.
I'm loading the jqGrid page with:
$('#test-grid').load('/grid').dialog('open');
Can anyone help me?
UPDATE
I've tried to load a simple HTML snippet using AJAX and the problem persists.
The problem is that the call to load is interfering with the call to open the dialog. You can fix this by loading the AJAX content into a child element of test-grid. For example:
$('#test-grid-child').load('/grid');
$('#test-grid').dialog('open');
Update
I just read the docs for load and gave this a bit more thought. What is happening is that when the code $('#test-grid').load('/grid').dialog('open'); is executed, an AJAX request is started and the dialog is created immediately. But once the load's AJAX request finishes, jQuery comes back and overwrites the contents of #test-grid. This explains why the dialog could not be closed, because the underlying markup is modified out from underneath the dialog object.
Retrieving data to a child element eliminates this problem since load and dialog each now manipulates a different section of the DOM.
Note that if the AJAX request takes a long time to complete, you might want to consider implementing a complete function to give feedback to the user - maybe by displaying a spinner until the data is ready. For example:
$('#test-grid-child').load('ajax/test.html', function() {
alert('Load was performed.'); // Perform any necessary UI action here
});
Anyway, more information than you probably needed, but I just wanted to update this question while it was still fresh in my mind...
Using MVC2 I have an AJAX form which is posting to a bound model. The ActionResult is returned as Content and is inserted into an element on the page by the magic of AJAX forms. All is well.
Now I need a button that will print the returned Content. I've tried returning the result wrapped in a full HTML doc with javascript along the lines of window.print(), but of course this won't execute and even if it did I don't want the whole window.
What is the best way to have my ContentResult printed instead of updated in an element?
I've used jqPrint for this same scenario. It basically either copies the content into an iframe and calls print() on that.
I tried using jqPrint which works for the most part but it was causing problems in IE, I was printing a model dialog.
I ended up using a print style sheet:
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
I basically hided all the content of the page except for my dialog, div or whatever it is you are trying to hide.
This was the solution with the most consistent results across browsers.
I'm trying to get a getJSON result to update an HTML element on page load, within a jquery mobile loaded website.
Now, I've read I should not rely on ready(), but bind to pageInit. So I tried, but it just won't work. I've tried many other events that could be logical to try within the API event documentation, without any success.
The closest I come to success is after the page is loaded, via ajax, if I refresh the page manually (with the browser's refresh button), getJSON does update the corresponding HTML element. And you guess, it's not what I want to achieve. Here is what the code looks like now, and where it is placed...
<div data-role="page">
<script>
$( '#pageContainer' ).live( 'pageinit',function(event){
//an alert() here does fire right before the page is shown in the browser
//here is the getJSON code.
});
</script>
Now, I need help to try to figure how to make it work. I only want an element X in the page to update with the text returned from a jSON when the page appears in the browser! Like a normal ready() function would have done !
(Maybe it is relevant to specify I'm running RC2 ?)
If you can't use JSONP here, have you tried setting a setTimeout()? You have to trigger a callback after the json object is loaded so timing is essential.
I have a Todo List (an ASP.MVC UserControl) that for each row has the name of the task (that can be clicked to toggle between done/outstanding) and a delete button for removing the task - Both are created using Ajax.ActionLink to query the server.
When creating a new row I need the task text and delete button to be ActionLinks, how would I do this from the client side? Is there an Ajax.ActionLink equivalent in the Microsoft Ajax JS libraries?
Take a look at the code that is being generated using View Source. All you need to do is add the same markup and add the correct click handler via javascript. You may find it actually easier to do this with jQuery for all elements and add the jQuery code in your UserControl. At least that way you control the code and if Microsoft decides to change the way their ActionLink works, you won't get caught short.