how to load DOM on ajax tab - javascript

I need to load the DOM in my page while using ajax tab.
I am using a jquery ajax tab plugin to implement tab functionality.I am having 6 tabs in my application and all tabs are loading data using ajax tab plugin except first one.Since the page is loaded using ajax tab plugin,DOM is not loaded.I checked by putting a alert in my page inside the script tag.I am not getting the alert popup also.In the 6 tab,the very first tab is loading the data using normal page load.So,when i am focused on that 1st tab and reload the page,i am getting the alert popup and the script function is working fine.If i click any other tab and reload the page,i am not getting the alert popup and i need to show a alert popup on clicking the ajax tab.
What i thought was the DOM is not loaded using ajax tab data load.So how to load DOM while using ajax load.
For example:
sonepage.php
<script>
alert("check");
</script>
The above will alert the popup when i am focused on first tab and if i am in other than first if i reload the page i am not getting the alert popup.I need to load the DOM in ajax load also.
Is it possible to do this.

Related

Get a URL that will load ajax content of a packed solution

I have a packaged web application with multiple ajax calls that will load html content in the middle of the website.
Is there a way to go directly to one of the ajax calls from the URL instead of manually clicking the buttons to reach the required content on the page immediately?
As a sample, i want to show the content of this page like i clicked the button without clicking it using JavaScript, jQuery, or manual click.
https://www.w3schools.com/xml/tryit.asp?filename=tryajax_first

After clicking a link, open new URL and automatically *click* on tab link inside that page

Is it possible to implement this behavior:
I have a HTML link on one page, and after a user clicks on it, it goes to another page which has several tabs on it. Upon clicking on one of those tabs, it triggers an AJAX post call which populates and displays content for that tab.
I would like that when a user clicks a link on the previous page, it takes him to another page and automatically clicks a specific tab so it triggers an ajax call which displays the content for that tab.
This site is a Wordpress site, if that information helps at all.
On the 'from' page you can have links such as
Click Me
You can set an onpage load function to load and use a trigger like this
if(window.location.hash === "#customHash"){
//my custom tab loader
}
You can use jQuery Cookie plugin to achieve this. http://plugins.jquery.com/cookie/
You just set the cookie on the first page, when the user clicks on the link
$.cookie('the_cookie', 'the_value');
And on the next page use the jQuery on load function to check for the cookie.

Refreshing dynamic listviews in JQM when navigating between pages

I'm creating a mobile app using jquery mobile and cordova. I've successfully loaded a dynamic listview from a json ajax call. My issue is that when I navigate to another page, then press the back button, the original page's listview does not load and there is nothing where it should be. If I refresh the page, the listview appears. Rather than refresh the whole page every time I navigate to this page, how would I refresh just the listview?
I've tried refreshing the listview both when the DOM and the window have loaded, and before both, and using $(document).on("pagebeforeshow", "#pagenamehere", function() {}); to no avail.
To be more specific, I have two pages with listviews. The navigational steps go as follows:
1. load page 1: listview shows
2. navigate to page 2: its listview does not show
3. press back: page 1 listview shows
4. navigate to page 2: its listview still does not show
5. refresh page 2: its listview DOES show
6. press back: page 1's listview does NOT show
This process should make it clear that the listview only loads when the url is directly input or reloaded; for some reason navigation between pages (different html files) breaks this.
If you have script inside the head tag of the second page and this page is loaded through Ajax, then the script won't execute.
Try to move your script from the head tag inside the second page's div (<div data-role="page" id="mySecondPage">) or create a JS file and load it on the first page's load. Relevant example here
jQuery Mobile uses Ajax to perform pages transitions so during the transition jQuery Mobile will only inject the contents of the response's body element (or more specifically the data-role="page" element). Nothing in the head of the page will be used (except the page title).
In conclusion, any scripts and styles referenced in the head of a page won't have any effect when a page is loaded via Ajax. They will execute if the page is requested via HTTP and that's why your listview is loaded after a full page refresh.

For a Chrome plugin, is an OnClick of a browser tab a Page Action or a Browser Action?

I am developing a plugin in Chrome,without refreshing page i need to fetch email when clicking on browser tabs. i should write code in background.html or browser action(js). but i used in content script.js, it is alerting when i refresh page..

Ajax get new page

there is a script what can run loaded javascript again?
My problem is when I load page by Ajax(jquery). And i load page to body. Content what was loaded is ok, but javascript dont run again.
Example: Page -> click button -> reload body content -> content is datatable and nothing more (javascript stay).
Is there any solutions for this problem ?

Categories