www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] Link two html pages by passing id in url with javascript

  1. #1
    Join Date
    Jan 2018
    Posts
    4

    resolved [RESOLVED] Link two html pages by passing id in url with javascript

    Implement with classes (with prototypes), the first 2 pages of your final application.
    Pages: the articles listing page (the article text is not displayed completely, but only one
    preview) and the page where they can view a complete article and its comments. On the page in
    which displays a complete article is reached by clicking on one of the items in the list
    articles.
    Technical suggestions on the JS side:
    - Use models to model the data behind the application (Article, Articles,
    Comment, Comments). From models we do not access DOM (do not search in
    page, content update)
    - Views are also JS files that link DOM patterns. Here he is
    manipulate HTML, search the page, and instantiate the models. In the
    general in Views we do not make AJAX requests, they should stay in patterns!
    Templates - are the HTML files used on each page. They will load in
    the Head section of all the sources (JS / CSS) needed on that page.
    For navigation between the two pages (articles and article), you will need to pass the comment id from
    the articles page to the article page, so we know in the article page the data that the article needs
    to ask them from the server (after id) and put them in the page. An option to get the result
    this would be to put an listener on the title of each article listed (on the articles page), and when I give it
    click on the title to set the location in the user's url as follows:
    window.location.href = https: //.../templates/article.html? id = "+ article.id;

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,769
    You need to give an example of the code you are currently working with.

    There's different ways of achieving this and it all depends on what you have coded already.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Jan 2018
    Posts
    4
    Code:
    class Articles{
      constructor(title, image, text){
        this.title = title;
        this.image = image;
        this.text = text;
    }
    
    getInfo(){
      return this.title + this.image  + this.text; 
    }
    }
    
    document.getElementById("article1").addEventListener("click", function(){
      window.location.href = "article.html?id='+article1.id";
      function getUrlParam(name){
        var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
        if (results==null){
        return null;
        }
        else{
        return results[1] || 0;
        }
      }
    getUrlParam("id"); //my page is blakn because
    i can't make new Article in another page by accesing the main page with articles because it will return null that the id does't exist.
    Last edited by \\.\; 01-08-2018 at 12:10 PM. Reason: Please use Forum BB Code tags when posting code.

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,769
    The question is what are you using, this is about the HTML as much as the JavaScript.

    Also, see my signature for details of Forum BB Code tags for HTML / PHP and use them when posting code.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Jan 2018
    Posts
    4
    i have a HTML page with preview articles and another HTL page where i have to display the complete article (just some text an image an comments)
    in the main page when you cliCk on an article it has to redirect you to that article in a new page to see it full(just that article not the others, when you go back to main page and click another article that has to be displayed in the page)

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,769
    *face palm*

    I mean POST the HTML that relates to the JavaScript you posted...
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  7. #7
    Join Date
    Jan 2018
    Posts
    4
    [html]<div class="head">
    <h1 class="title">Blog</h1>
    <input class="search" type="search" name="search" placeholder="Search..">
    <ul>
    <li><a href="#">Admin Login</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>

    <div id="main" class="main">
    <article class="article" id="article">
    <div id="author">
    <h2 id="h2">Breaking News: Cat took over the internet!</h2>
    <p class="arcle-meta"><strong>Author:</strong> Dee, <strong>Published:</strong> 06.12.2017</p>
    <div id="img" class="image-wrapper">
    <img src="http://peoplecancode-public.s3.amazonaws.com/cat.jpg" width="270px" height="170px">
    </div>
    </div>
    <div class="text-div line">
    <p id="text" class="text">When did cats take over the internet? Dogs are cuter. Dogs can be trained. Dogs are literally called ‘man’s best friend!’ So why are cats, the jerks of the domesticated animal family, the darlings of the world wide web? And don’t think I’m a feline hater, I’m actually the proud co-parent of Fatty the tuxedo cat. But if I’m being real, I’d choose dogs over cats every day of the week.
    And yet with one motivational poster, cats can melt my heart and make me yearn to rub their bellies. So as a very serious journalist, a la Bridget Jones’ Diary (in the first movie), I decided to go directly to the source of cute-spiration to find the answers the world needed. But in all seriousness, I wanted to uncover the reasoning (if any) why this animal has dominated the internet for the better part of the 21st century.
    </p>
    </div>
    </article>



    <article id="article1" class="article">
    <div id="author1">
    <h2>Bring The Christmas Spirit into Your Living Room</h2>
    <p class="article-meta"><strong>Author:</strong> Dee, <strong>Published:</strong> 20.12.2017</p>
    <div class="image-wrapper">
    <img src="https://1.bp.blogspot.com/-oNJNKb4Jak0/WDzkGVNmnBI/AAAAAAAAPNg/373zvE75FXkmMpRf9C2U0EU-5KK4kjAdACEw/s640/IMG_7342.png" width="270px" height="170px">
    </div>
    </div>
    <div class="text-div line">
    <p id="text1" class="text">Christmas decorations should all be about magic. What better way to welcome the holidays than focusing on what truly matters and turning your home into a magical place of joy?
    We’ve compiled a collection of beautiful living rooms featuring charming Christmas decorations. We believe that transforming the core of your home — wherever that may be — into a cozy and colorful interior allows that magic to take place.
    Whether you have a fireplace with stockings, a decorated Christmas tree, a colorful lighting installation or a creative message on one of the walls, the living room is the focal point of many residences and should set the tone for the entire house.
    We hope the photos below will help to inspire you this holiday season. Prefer less traditional decorations?
    </p>
    </div>
    </article>

    <article class="article">
    <h2>Interior Design's Most Popular Projects of 2017</h2>
    <p class="article-meta"><strong>Author:</strong>Dee, <strong>Published:</strong> 29.12.2017</p>

    <div class="image-wrapper">
    <img src="https://d4qwptktddc5f.cloudfront.net/thumbs_hariri_and_hariri_new_york_apartment_kitchen.jpg.770x0_q95.jpg" width="270px" height ="170px">
    </div>
    <div class="text-div line">
    <p class="text">Luckily for one New York couple of empty-nesters, Interior Design Hall of Fame members Gisue Hariri and Mojgan Hariri know a thing or two about family dynamics—after all, the sisters are now in their fourth decade of running Hariri & Hariri Architecture, having previously studied together at Cornell University. And they used that knowledge to settle the couple into a more compact home while, at the same time, expanding their horizons.
    In view of the High Line park and the Hudson River, an easy arm’s length from the foodie mecca of Chelsea Market, and a stone’s throw from the meatpacking district’s mayhem, Google has a new home. With space split between two Chelsea landmarks, National Biscuit Company buildings from 1898 and 1913, and revamped by Interior Architects, the search engine’s sales team enjoys impressive digs that are nevertheless decidedly understated. The goal here was to play against type by celebrating the low-tech and the local.
    </p>
    </div>
    </article>
    </div>

    <div class="center">
    <div class="pagination">
    <a href="#">&laquo;</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">&raquo;</a>
    </div>
    </div>
    <div id="demo1" class="art">
    <div class="comment" id="comment">
    <textarea id="myTextarea" placeholder="Comment here..."></textarea>
    <div id="imgDiv"></div>
    <button class="btn" type="button" onclick="tion()">Add Comment</button>
    <p id="demo"></p>
    </div>
    </div>

    <div id="demo2" class="art">
    <div class="comment" id="comment2">
    <textarea id="myTextarea2" placeholder="Comment here..."></textarea>
    <div id="imgDiv2"></div>
    <button class="btn" type="button" onclick="tion2()">Add Comment</butto
    Last edited by \\.\; 01-08-2018 at 07:18 PM.

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,769
    Oh dear, that didn't go to well.

    Houston, we had a problem, I tried to add the HTML forum tags and when I saved the edit, half the post vanished.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.18649 seconds
  • Memory Usage 2,941KB
  • Queries Executed 16 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (8)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (8)postbit
  • (8)postbit_onlinestatus
  • (8)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates