Trying to understand how this "select2" Jquery plugin works.
I know it hides the regular select element and add it's own elements to provide some kind of a dropdown with search experience and when using "inspect element" i see the select2 container and all the other elements but when using view source i don't.
Can some one explain why is it? (Hoping to learn something new :)
Does view source shows only elements that was loaded on the first page load?
Ok, so my guess was in the right direction:
View Source shows you only the HTML it received from the server's
response. Your JS changes happen afterward.
Firebug and Chrome's debugger show you the source dynamically so you
can see the DOM and HTML as it has been changed. But view source will
only ever show you what the browser received from the server.
(Matt Pileggi - here)
Related
I have a screen I am creating to manipulate a document. As part of the web form I have a table of page thumbnails on the left side with controls for the current page in the main portion of the screen. When a thumbnail is clicked an UpdatePanel in the body section is updated with the info for that page.
I have just added the ability to change the order of the pages by dragging the thumbnails up and down. This uses JqueryUI's Sortable feature with a hidden asp:Button to communicate the changes back to the server.
All of that works when used separately. However, when I click a thumbnail to select a page the table that they are in looses the sortable property. I can easily re-establish it using a JavaScript command. But how do I call a Javascript command at the end of the WebForms event?
It is strange that after clicking on a thumbnail the script is broken. But you would have to post some source code and ASPX/ASCX to investigate that.
But it is possible to execute some javascript at the end of a postback. Have a look at this documentation:
https://learn.microsoft.com/en-us/previous-versions/aspnet/bb398976(v=vs.100)
I think you want to have a look at the 'pageLoaded' or 'endRequest' events, maybe you can call your javascript from there.
Please see this jsbin test page that illustrates the issue
I have a simple jqm page with two page divs. The only initialization is being done inside a $(document).on('pageshow', function(){}); block. Inside the block, I initialize a fullcalendar.js calendar.
If I load the page as an external page (the first link in the menu) it loads without a hitch (but it's not using ajax, so the page flickers and there's no transition).
If I load the page using the jqm convention of linking to the id of the second page div with an anchor tag, it loads the calendar div as a page with no data.
If I then refresh the page, the data is displayed. Subsequent use of the menu displays both page divs as pages without issue.
I've seen a lot of discussion about which event of the pagecontainer widget to use, and I'm aware that document.ready() is not the way to go. I've tried all the possibilities, I think (pagebeforeshow, pageshow, pageinit, etc.) There's more detail in the demo, where you can see all the code. If I need to post it here, too, I can do that, but it's easier to see the issue if you load the test at jsbin. I suggest running it in a separate window, so you can refresh the page.
If anyone else has solved this or has an idea what I'm doing wrong, I'd really appreciate the help and / or suggestions.
I put all of the pagecontainer events into my test jsbin code and stepped through them. (Thanks to Gajotres for providing useful documentation on the various pagecontainer hooks). It turns out that the one I needed was 'pagecontainerhide' instead of pageshow, pageinit, or any of the others. Once I modified the code to use that event, the calendar displayed properly on the page div, with transition, and I no longer had to click on refresh to see load the "page".
Since I have all the events there, perhaps others with page change issues can benefit from the test page....
Please see the plunkr code demonstrating an issue I am seeing with the modal service in AngularJS.
Basically, I have moved the HTML contents for the modal window into a separate file, now when the button is clicked the backdrop appears but the modal window does not - on the first click.
If you then press escape to dismiss the backdrop and then click the button the modal window appears.
I am assuming that this is because the file is not loaded the first time when I click the button-but if so how do I use the templateUrl property to enable me to store the content for the modal window in a separate file?
Thanks for your help on this.
The issue does appear to be due to the separate file specified in the templateUrl not yet having been downloaded when the first click happens and I have now been able to work out a solution by adding the following line into the index.html file:
<div ng-include="'mymodalcontent.html'"></div>
This directive adds a reference to the file which loads the templateUrl so that when the button is clicked the first time the modal window will appear as expected.
Please note the value in the ng-include attribute has to have single quotes in order to work as detailed in the documentation for the ng-include directive. This detail is mentioned in the section named arguments and advises:
If the source is a string constant, make sure you wrap it in quotes
I have updated the plunkr code to include the fix.
The only downside to this is the original purpose behind moving the modal window contents into a separate file was to only download the contents if the user clicked the button thus saving bandwidth for users accessing the site on a mobile device.
I have a master page with buttons, on clicking a button a different page(jsp) is loaded into the contents div of the master page.The master page has all the required jquery mobile css/js files included. But when click happend the child page is displayed with out any j-m css in it.
Does anyone know how to resolve this?
you need to enable those widgets in your code. so if you append a $('') to the page you need to call $('a').button() on it to give it the jqm classes and functions.
remember to do this after you append it.
i try to use codemirror in a jquery ui dialog.
here you can see the result in jsfiddle.
http://jsfiddle.net/HtntY/
the problem is that the content in codemirror does not appear on first load. it only appears after you set focus on the editor and than type something, after that the preloaded content appears.
can this be fixed somehow. i tried to do it with the refresh() function without success.
thanks for you short time.
Looks like jQuery UI hasn't actually unhid the DIV when the opener runs. Putting a refresh call in a timeout (as in http://jsfiddle.net/NP9SL/ ) seems to do the trick.
I ran into the same problem and wound up running the editor.refresh() off the focus event, FWIW. I thought I'd mention another, somewhat related problem. If you try to take advantage of the CodeMirror dialog/search functionality inside of JQueryUI modal dialog, the integrated search dialog fails to get focus and you can't type into it. Interestingly I can paste text into the search field, but I cant type. Have yet to find a way around this other than setting modal to false.